Objective:

Choose one layout below. Write the semantic HTML and valid, cross-browser friendly CSS to match the layout comp you choose.

Resources:

Download resources for all weeks

Note: I forgot to include the “back to top” arrow in the resources. Feel free to choose one from a site like iconfinder.

Layout 1A: Fluid Column

1A: 1 column, centered
This is a 1-page vertical design. As the browser resizes, the content should stay centered.

The colored backgrounds should fill the browser’s width regardless of size.

The text lines should never be longer than 700px wide.

There should be no horizontal scroll bars on windows wider than 400px.

 

Layout 1B: Fixed Column

1B: 1 column, left aligned

This is a 1-page vertical design. As the browser resizes, the page should stay centered.

The body of the page should be a fixed width of 880px.

Horizontal scrollbars are allowed only on windows narrower than 880px.


 

Grading points for all Challenges

  • Valid HTML
  • Semantic HTML
  • Concise HTML
  • Valid CSS
  • Organized CSS
  • Concise CSS
  • Appearance matches the mockup and specs
  • Looks good in: modern Chrome, modern Firefox, Microsoft Edge

Extra credit

complete all challenges for the week.