JQuery

Metal Toad University #5: The Gathering

OMG, no video! For shame! We had some technical difficulties (read: Dan was a doofus), so there was no audio on the video. So while you could watch it, it probably wouldn't be that helpful.


OMG, no video! For shame! We had some technical difficulties (read: Dan was a doofus), so there was no audio on the video. So while you could watch it, it probably wouldn't be that helpful. Sorry!

But here's what we did:

This class was where we finally started putting everything together to work on an actual site: Beek and Brooke's Bloody Bash. This is my annual Halloween party and an easy target for a fun little demo site.

First we downloaded an HTML5 Boilerplate template from http://html5boilerplate.com/ that we used as a base. This is a great template that includes a lot of little helpers that help your site perform well, as well as look good on older browsers.

Once we had the template downloaded, we took a look at our comps (Download the folder of comps) and started building the site out. We created a one page scroller site that has four sections: The main landing section, a What section, a Where section, and a Pics section.

We used a smooth scroll jQuery plugin to make the page scroll smoothly when a navigation item is clicked. Then we added a second set of navigation links that slides in from the side when we scroll past a certain point and the main menu was no longer visible. A marquee that fades between images and/or content was added to the main section along with a Facebook widget. In the Where section we added a Google map. Finally a gallery was created that loads the images in a popup modal view that isolates it from the content and includes its own navigation for looking at the pictures. All of these effects were achieved using very little hand-written javascript.

Download the site and take a look at the script.js and main.css to see how we got there.

This week we'll be doing a lot of styling as we have a guest speaker, Chris Cech, who will show us how he flushes out a design. Once it's completed, we'll apply it to our site. If we get far enough, we may have a fun homework assignment! See you tonight!

Similar posts

Get notified on new marketing insights

Be the first to know about new B2B SaaS Marketing insights to build or refine your marketing function with the tools and knowledge of today’s industry.