README.md

PSD-to-HTML: Engine Labs Homepage

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

Task

Download assets from here: http://bit.ly/1mt2ELk

• Turn the blank index.html file into the Engine Labs homepage based on a mock image

Steps

• Mockup to recreate
  • Look at the mockup JPG in the root directory: Engine Labs Home.jpg
• Sections
  • spans the width of the page (100%)
  • have a more narrow (960px), centered subsection where the content goes
• Images for the icons and background have been provided for you in the /img folder
• Font is Google's Source Sans Pro. Take a look at all the weight and style options.
• Colors:
  • dark blue #003047
  • light gray #EDEDED
  • medium blue #01527D
  • white #FFFFFF
  • black #000000

Tips

• Don't forget to declare your site's CSS and any additional required resources in the header of the document

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

• Work top to bottom
• Break the page into vertically-stacking sections
  for example, create header, hero image, quote, features, etc

Use classes effectively

• Name classes by function of a particular element rather than content inside it
• 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

• Great resource for CSS tutorials and guidelines: http://css-tricks.com/
• Great resource for web stuff in general, including CSS and HTML: http://www.html5rocks.com/en/
• Absolute positioning and floats.
• Sprite Cow: working with css and sprite styles
• Reseting styles: Use a reset.css for cross-browser harmony. Skeleton, Bootstrap, HTML5Boilerplate and YUI have reset files/components.
• Use SASS without a framework (ie, no Rails, just HTML, JS and SASS). With a single file, go to the folder where you're saving your style files. Create a scss and css files with the same name (ie, style.css and style.scss. In the terminal sass --watch style.scss:style.css. More help sass --help