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. 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!

Filed under:

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Ready for transformation?