Mama Mia’s Pizzeria Stage 5 – Coding Part 1

Over the past couple of days I began coding the homepage for my Mama Mia’s Pizzeria site. I started out coding traditionally, the way I normally do, using pure HTML and CSS. Having created a mock-up of the different sections of the site and figuring out how I would layout the divs, it was fairly simple to create the code for the page.

mock-up1

Overview of AI file

mock-up2

Header Layer

mock-up5

Navigation Bar Layer

mock-up3

Body Layer

mock-up4

Footer Layer

I initially just worried about the structure of the page, making everything look just right, getting the design right. Then I moved on to some of the bells and whistles so to speak. The big task for this page was the photo gallery. This was my first time coding a photo gallery from scratch. I wanted to see what I could come up with, without looking at anybody else’s existing gallery plug-ins. I did look at the W3C article on automatic slideshows to figure out the automation part. They executed their slideshow by creating multiple divs and then only displaying the active div, which is something I have done in the past, most recently for a data mashup visualization[GitHub] I created. For my slideshow I created one div, and set the background image based on the class assigned to the div, so essentially the buttons just change the background image for the div, and the carousel loops through the different backgrounds.

The next major step I took in the project was to look into templating frameworks. From the articles I found, nunjucks sounded like the best choice, so I followed a couple tutorials to get an idea of how it worked, and then I converted my existing code into a nunjucks project. There was a bit of a learning curve because I have never used gulp before, but I can already see that it will save me a lot of time as I begin coding the rest of the site. In the past I have handled “templates” by converting all of my pages to php and using includes for reoccurring sections of code.

Nunjucks is much better for this though for several reasons. One big reason is the ability to create a layout template which includes everything from the HTML tags and metadata to the navigation bar and footer. With php includes I would not be able to include the basic layout because you can only include uninterrupted chunks of code. I would also have to include the navigation and footer separately for the same reason. With nunjucks the code I write for each new page has been reduced down to just the body content.

codescreenshot1

nunjucks code for the index page

codescreenshot2

snippet from the nunjucks layout code

Another advantage to nunjucks is that I can preview my website without having to run a server, php of course is a server side language so in order to view the site you need to run it on a server. The workflow is much easier for me with nunjucks. I have just barely scratched the surface with can be done I know, but I look forward to learning more as I move forward.

The tutorials that I looked through were:

Nunjucks: A JavaScript Template Engine – Medium.com

How to Modularize HTML Using Template Engines and Gulp – Zellwk.com

I have started a github repository for this project located [HERE].

A live version of the site can be found [HERE].

Here are some screenshots of the site so far:

screenshot2screenshot3screenshot4screenshot1

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s