Mockup of a simple responsive design
Part of the Exercises & Quizzes Reading List

This 100-minute exercise tests basic web development tasks, including markup, typography, and (optionally) responsive design. Your goal is to recreate the design shown above; I’ve provided a 4MB .zip file that includes a .psd and .jpg mockup of the original, together with a copy of the background image: a photograph by Jörn Guntermann, used with permission.

When you’re done, download my solution, also provided as a .zip file, and compare your work against it. Students in my classes have the option to send me a copy of their work for feedback.

Instructions

  • You have a time limit of 100 minutes once you start the exercise.
  • Download the resources file, which contains a PhotoShop mockup, a JPEG version of the same, and the background image.
  • The exercise is open-book: you can consult any resources you like as you work, including this blog.
  • Create your CSS as an embedded style sheet on the page.
  • All text on the page is in the Oxygen typeface, available from Google Web Fonts. The icons in the top left corner are from IcoMoon. The body text is the second verse of the 1933 song Stormy Weather.
  • The result should be valid code: my version is HTML5, but XHTML would work equally well.

Stretch Goals

After getting the basic look and feel of the page correct, there are several further goals you can attempt if you are still under the 100 minute mark:

When you're done, download the solutions file to compare your work with mine. Of course, there are many possible responsive designs: the important thing is to have your desktop version look like the mockup as much as possible.

Good luck!

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.