Nearly a year ago, I started working on the very first Weapons of Mass Creation website. It’s creator, Jeff Finley, is someone I’ve looked up to through his work and creativity at Go Media. I decided to reach out to Jeff, offering my services to help him build the html & css templates for the site. It’s now a year later and when Jeff approached me again to be apart of the WMC Fest team, I was more than happy to donate my services again.

The initial step of building out the front-end of this site was to acquire all the assets I needed in order to start building a framework. Jeff supplied me with a Photoshop file (very nicely organized), along with several other assets I requested (a favicon and apple touch icon). After spending some time building out guide lines and slicing images, I was ready to dive into the HTML & CSS of the site.

The starting point for the HTML, began with Paul Irish’s HTML5 Boiler Plate, a solid HTML5 framework that is a great quick-start to any new site. When I’m building a site like this, I jump back and forth between the HTML and CSS quite a bit, working my way from the header of the site to the footer. I like to work my way down the page, making sure each section of the site is being displayed correctly and functioning in a multitude of browsers before moving on to the next section. Once one template is finished, it can be duplicated and used as a starting point for any additional templates of the site.

After completing the HTML & CSS, it was important to make sure the site was consistent across a variety of browsers. Thankfully there were no major issues and the minor ones that did pop up (lack of CSS3 support in some of the older browsers) were quickly solved by adding browser specific classes, targeted by conditional comments. After this the last step was to add in the jQuery slider for the lineups and adding in @font-face to handle the fonts in the headlines of the blog posts.