FlexBox Photo Blog Layout Exercise

In this exercise, you will make a photo blog home page. Please download the starter files and the screenshots files.

There are three sections to this page: a header, a main area, and a footer.

The font used thoughout is the Google font Old Standard TT.

Mark Distribution

Header / Footer: 20%
Small, Medium, Large: 50%
Extra-Large: 30%

Bonus Task: 20%

Header / Footer

The header and footer look and behave almost the same way: the only difference is that the footer does not have the site name (light). In the header, the site name box will take 1/3, while the nav element will take 2/3. It will look like this at full width:

menu full size

As the page width decreases, the header area will arrange itself like this:

menu small

In the footer, make the menu take the full width of the page (the screenshot is showing a small slice of the MAIN area, so you get a better idea of how the footer behaves in relation to it).

You do not have to make the items into actual links. Just focus on getting the layout correct.

Main Area

The main area consists of 30 articles. Each article has an h2, an image in a DIV, and a single paragraph.

There are four responsive states: small, medium, large, and extra-large. Click on any of the screenshots for a bigger view, or consult the screenshot files you downloaded from the top of this page.


small layout


medium layout


Extra Large

Extra Large Layout


Bonus Task

For a 20% bonus, figure out how to add light grey background to alternating rows of articles, starting with the second row, without using classes or adding to the HTML.

Do not add the striping in single column view. Add it once the articles have rows of two, three, or four articles each.

Obviously, the striping must change with the responsive breakpoints.

row striping


All images in this exercise are from Flickr, with creative commons licensing. Attributions are here.