Lights of an alien city in a crater

Like some of the , this piece is designed to challenge web designer students. The illustrated article - a short piece written on the discovery of the two thousandth planet outside our solar system - uses the CSS Shapes module and for the ideal layout conditions, although it’s entirely possible to complete it using more traditional methods.

Sample image from the complete Exoplent 2K exerciseInstructions: using the Markdown content provided, create a valid HTML5 page that duplicates, as closely as possible, the web page shown in the screenshot exo-screen.jpg. Use your best judgement to make the page fully responsive; use if possible. The following should be noted:

  • The typeface used for the headings is Moon, which is freely available. You will need to convert and embed this font in an appropriate method.
  • The rest of the page is set in Avenir, with fallbacks provided to the closest matching common typefaces.
  • The background of the essay is #222, while the page background is black; the text color is white.
  • You will need two images: Miridian VI and Occupied. You’ll need a bitmap editor to make changes to the images.

You will need to make the following changes to the page:

  1. Link the words “Mimas” and “James Web Space Telescope” in the article to appropriate resources on the web. The links should have the appearance of examples shown in the screenshot.
  2. Provide appropriate definitions for the words SETI and COROT. This text should not appear on the web page by default, but should be available to the user.
  3. The images will need to be edited and optimized appropriately before inclusion in the page.

Time: You have 120 minutes to complete and submit this work.

When you are done: Compare your work to the example at Codepen.

Images by Bill Lile, licensed under a Creative Commons Attribution NonCommercial license

Enjoy this piece? I invite you to follow me at to learn more.
Check out the CodePen demo for this article at