Problem Set 1: PSD to CSS/HTML

In this exercise, you will be given a layered photoshop file (a common format used by many web designers), and you will need to build a cross-browser compatible HTML/CSS markup.

Please be sure your mark up works well on IE6, IE7 and Firefox on Windows. If you have access to a Mac, also check Safari.

Before diving into coding, we ask you to think about the overall structure of the page and build the CSS blocks in a meanful and easy to maintain way.

For sample code, you can view page source of the following sites:

• www.newcircleconsulting.com
• www.progressci.com

Javascript and stylesheet code can also be retrieve by pasting the path to your browser.

Suggested deliverable structure:

• /images/
• /index.html
• /inc/style.css

Compress all together, then submit.

CSS tutorial: http://www.html.net/tutorials/css/

Firefox extension: The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. Download here.