Publicity shot from the movie 300, showing Lena Headey as Queen Gorgo
Part of the Exercises & Quizzes Reading List

While I have several on this blog, I realized that there are no equivalent exercises. As I’m working on the CSS Off 2013 competition at the moment, which involves the recreation of a web page mockup in a limited time, I thought it was appropriate to make a similar exercise available here for students, and anyone else interested in web development.

The aim of this exercise is to replicate the design of a critique of the movie 300 I wrote several years ago as closely as possible in HTML & CSS. There are also several optional “stretch goals”.

If you’re interested, I’ve supplied two .zip files. The first, exercise.zip, contains the review, images, and a finished mockup in .png format. The second file, solution.zip, contains the completed work.

Instructions

Screenshot of the complete movie review exercise
  • There is a time limit of 120 minutes.
  • This is an open book exercise: you can use any resources you wish as references, including this blog.
  • There is no need for PhotoShop: everything you see in the mockup has been produced with HTML, CSS, and the assets as supplied to you. You can use any other combination of applications you wish to achieve the final goal.
  • Create your CSS in a separate linked style sheet.
  • Link the footnote reference in the body to the footnote at the bottom of the page.
  • Link to Maryann Johanson’s review of 300 in the body text.
  • Headings in the mockup are set in Trebuchet MS; body text is Georgia.
  • The result should be valid code.

Stretch Goals

After getting the look of the page correct, there are several further goals you can attempt if you are still under the two hour mark:

  • Link the words “Alamo”, “Rorke’s Drift” and “Thermopylae” in the body text of the page to appropriate online resources.
  • Add appropriate to the HTML.
  • Make the page responsive.
  • Add a print stylesheet.

When you’re ready to judge your work, download 300-solution.zip to compare the results.

Good luck, and I look forward to seeing your results.

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