Like some of the previous featured exercises, 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 flexbox for the ideal layout conditions, although it’s entirely possible to complete it using more traditional methods.
Instructions: 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 Sass 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:
- 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.
- 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.
- 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 twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/RNYZwp
