Convert Final Mockup to HTML/CSS

Wed, Dec 8, 2010


Use what we've learned with HTML and CSS to convert our mockup to code.


  1. Open up and finish mockup-2.png if you haven't

  2. Transfer all of the content in the mockup to the appropriate named div in your HTML

  3. Start adding padding to the divs (and subtracting the value from the width property)


5Updated "index.html" file in your png-to-html folder
3New file looks like the mockup
2Clean code and markup