Front-end Web Development
Assignment for Week 3
A designer has given you a mockup and assets, and wants you to write the HTML and CSS:
Here are some tips for putting the site together:
- The three main sections need to be floated.
- The background color behind both sidebars, and the background of the page, are detailed in the mockup.
- You'll need to apply padding to each section, which means you'll be setting their widths to slightly less than is specified in the mockup.
- Each Stooge should have an appropriate class name.
- The pictures of the Three Stooges can be put inside
<figure> elements, for semantic reasons, and also because it provides some default margin, and a place to add a class that will float each Stooge to the left or right.
- You can get three paragraphs of dummy text from the Lorem Ipsum generator. Make sure to surround each one in a
<p> tag.
- You'll need to surround the three sections in a container element to achieve the darker background color. Since floated sections don't add height to their containers, you'll need to add a clearfix hack. Google "micro clearfix hack" and copy the CSS from the first result into your stylesheet. You can then apply the
cf class to the container.
- The element containing the three main sections also needs to be centered. You can do this by applying a
margin of 0 auto to it, and setting its width to the grand total width of all three sections plus their padding.
- Remember to get rid of the default space made by the
<body> element - if it's not already the section container.
- If
<body> is the section container, what can you style to make the area surrounding it a different color?
Solution
