There are few activities more effective in learning web development than making web pages (in the words of Chris Coyier, “Just Build Websites!”). However, it can sometimes be difficult to come up with new ideas for making pages; after a while, there’s a tendency to only do what you know and avoid challenges. To that end, I’ve created a series of front-end design and development exercises and quizzes, most of which can be completed in an hour. The goal of these exercises is to sharpen skills and test your abilities (under open-book conditions) against a time limit.

Development exercises include content, images, and instructions; quizzes are printed, and take 10 minutes to complete. Each exercise also comes with a finished example for comparison purposes.

Prerequisites: A background in HTML & CSS is required.

Exercises

  1. 300 Movie Review
  2. Stormy Weather
  3. Alien Life
  4. Advanced Typography and Layout Challenge
  5. Working with Design Restrictions
  6. Mr. and Mrs. Smith Review
  7. Exoplanet 2K

Quizzes

  1. Introduction
  2. XHTML Example Quiz
  3. HTML 5 Practice Quiz
  4. CSS Quiz

Photograph by Alan Wat, used under a Creative Commons Attribution 2.0 Generic license

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