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
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
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.