winnab / ga-psd-html-engine-labs

Convert the Engine Labs PSD to HTML/CSS

PSD-to-HTML: Engine Labs Homepage

Difficulty Level: Easy
Technologies/skills used: HTML, CSS

Task

• Turn the index.html file into the Engine Labs homepage
• Match the Engine Labs mockup (psd or jpg) as closely as you can

Assets

• Images for the icons and background have been provided for you in the /img folder
• Each section spans the width of the page (100%) and has a more narrow (960px), centered subsection where the content goes

Tips

• Don't forget to declare your site's CSS file in the header
• Before you start to code, look over the requirements and quickly sketch an approach

Keep it simple

• Try this without using a grid framework like Skeleton or Bootstrap.
• Once you feel confident hand-coding, investigate a grid framework and see how much time it saves you.

Create structure systematically

• Start building the page from the top and continue down
• Break the page into vertically-stacking sections--for example, create header, hero image, quote, features, etc

Use classes effectively

• Come up with class names that describe the function of a particular element rather than describing the content inside it.
• Creating functional classes lets you style elements quickly when they need to serve a common purpose.
• For instance, for a div that needs to be noticable, naming it .callout rather than .side-of-story-color-background-designer-quote means you don't have to restrict the content inside to quotations from designers--and you can easily use the class name elsewhere in the site.

Resources

• Absolute positioning and floats.
• Sprite Cow: working with css and sprite images
• Reseting styles: Use a reset.css for cross-browser harmony. Skeleton and YUI both have reset files.