Download this project with source code samples
Objectives
At the end of this lesson, you will be able to:
- Apply the CSS box model to position and size XHTML elements
- Place divs inside of other divs
Instructions
- Make a red div that is 100% wide and 50 pixels tall.
- Make a white div that is 100% wide with no specified height.
- Inside of this white div, make a gray div that is 600 pixels wide and centered in the screen. Hint: remember to set margin:auto; in order to make the gray div centered.
- Make this gray giv 300 pixels tall.
- Make a blue div underneath the white div that is 100% wide and 100 pixels tall.
Screenshot
More screenshots and source code for this project are available when you purchase the curriculum.
Rubric
| Component | Possible Points | Score |
| Everything in the assignment is rendered properly in the browser. | 12 | |
| Total Score | 12 |