Timed exercises are an excellent way to test web development skills. While its good to spend time in craft, design and detail, sometimes work calls for quick, under-the-gun performance, and exercises are a good way of doing a “skills gutcheck”.
This exercise presents a review of Mr. & Mrs. Smith. The movie is one of my favourite guilty pleasures, and I thought the review format would make an interesting challenge for my first year students. It is presented here for anyone looking to test their skills. Resources include media, content and (once you are finished) a solution key.
Directions
Download review.zip and uncompress it. Inside you will find several files; individual links to each file are also provided here:
- review.docx, a review of the movie Mr. & Mrs. Smith
- pitt-jolie-large.jpg, the movie’s promotional poster.
- gunfight-in-the-department-store.jpg, a frame from the film.
- sample.jpg, a screenshot of the page you are attempting to recreate in this exercise.
Using review.doc as a source for body copy, create an HTML document, adding appropriate markup to the content. Apply CSS in a linked stylesheet to make the web page appear as close as possible to review.png.
Apply the following additions and changes:
- You will need to crop, resize and optimize the images before insertion. The final HTML document should be no more than 110K in total file size, including the images, stylesheet and text content.
- Link every movie mentioned, with the exception of Mr. & Mrs. Smith, to appropriate web resources.
- Link the asterisk in the body text to the footnote at the bottom of the page.
- You will need to create the stars for the review rating. The stars are not bitmap or SVG graphics.
- Extra challenge: make the page responsive.
Typography
The headline is set in Adobe GaramondPro: note that the film title in the document is real text, not an image. The body text is set in Helvetica.
Conditions
- This is an open-book exercise: you can consult any online resource you wish.
- The final web page should validate as HTML5 or XHTML 1.0 Strict.
- The exercise has a 100 minute time limit.
When You Are Done
Download review-final.zip, uncompress it, and compare your work to the solution provided.
I hope you enjoy the review exercise: if you have any questions or feedback, feel free to contribute in the comments below.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/ENRadj
