During Aquent Gymnasium's Coding for Designers, the instructor often encouraged us to expand on and practice ideas presented in the class. One assignment was to code the home page for a restaurant website based on a Photoshop comp. Not only did we practice creating pixel perfect CSS, we also learned and experimented with Twitter Bootstrap and Google Web Fonts.
The extra credit assignment for this assignment was to invent our own restaurant and design a Photoshop comp for the desktop version of the home page. Then we had to code the website utilizing Twitter Bootstrap and Google Fonts.
Inventing a restaurant
Considering the current trends in gourmet food trailers, locally sourced food and healthy eating, it seems natural that the next step should be a food trailer selling fruit. It would be an on-the-go food, but should be fancier than just a banana, so the fruit would be presented in a cone--a fancy waffle cone.
Designing a Photoshop comp
This is the Photoshop comp I designed for my pretend restaurant "Fruity Cone".
Coding the home page
By examining all the elements and layers in the Photoshop comp I was able to recreate the page using HTML and CSS in jsbin.
I used Google Web Fonts to bring in Source Sans Pro and Open Sans and Twitter Bootstrap for layout support. After researching cool CSS3 tricks like shadows and the border radius I utilized the handy site CSS3Gen.com to create some nice box effects.
View the home page I created and the code I wrote based on the comp: Fruity Cone website.