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!