2.1 Homework: Layout Challenges

You are provided with a PDF of "grey box" drawings. You must create HTML and CSS layouts for each of the layouts. Place each layout in a folder inside of 02../your_name/day1_hw/. You will need an HTML and CSS file for each layout (keep things organized).

The PDF may be viewed here

The PDF included "gray box" drawings of page layouts that are increasingly difficult to achieve using CSS. These are intended to be used after introducing students to the basics of float and clear. These exercises are meant to help you explore the basics and practice to develop a better intuitive sense for how float and clear work.

If you'd like, use the first two layouts as sample layouts to work through in a demonstration to explain the basics to the class. If used this way, I still recommend asking the students to repeat those two when they start their own work, as this will validate to them that they are building an understanding and still be useful practice before they work on the harder examples.

Please also note that we are not providing finished HTML and CSS for these exercises. We've found that HTML and CSS style can vary considerably from person to person, so please feel free to take your own approach to these quick layout wireframes.

Submission

Please submit your work via a pull request on Github. Submit as much as you have completed by midnight.