The third and final web development exercise (at least for now) features challenges that include embedded fonts, captioned images, backgrounds, and a pullquote. The body copy of the exercise is a short essay I wrote on the possibilities of discovering extraterrestrial life within our own solar system, updated in late December 2013 to include recent discoveries on Europa and Mars.

This exercise requires a little more work than previous examples, so you have two hours to complete it. The page is set in Museo Sans by Jos Buivenga, which I have provided in 500 weight for normal and italic in OTF format.

You will have to convert the typeface into webfont formats* and embed it on the page. You will also have to edit a NASA image of Mars, using PhotoShop or another bitmap editor, to use behind the main heading.

Download the source files, which include the original essay in Microsoft Word format, a JPEG mockup of the final page, the original images, and Museo Sans. Along with recreating the mockup, the exercise has the following goals:

• Add appropriate markup around the term HARPS.
• Add the form at the bottom of the essay.
• Ensure that the result is valid HTML.
• Make the page completely responsive.

The form is deliberately not shown in the mockup: you will have to decide on the appropriate inputs to use. You can employ any tools you wish to complete the page.

When you’re finished, download the solutions file and compare your work: you will need to view the page from a local server in order to view the fonts correctly in a browser. Good luck!

* A greater range of Museo Sans is available from Typekit, which offers the typeface as part of a free trial. If you’re using Adobe Creative Cloud, you have free access to Typekit.

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