While many of my student’s final sites last semester were excellent, I did note a little weakness in typography and layout. Like everything in a two-year, two-lessons-per-week curriculum, there are some subjects I can’t address deeply in class, although I do provide extensive reading lists.
To address this gap, I’ve made the exercise you can see above: a cover for a fictional scientific journal featuring a wonderful illustration of a Sea Nettle jellyfish by Laurent M. Bourgeault. The goal of the exercise is to replicate the cover using HTML & CSS.
This exercise is deliberately designed to challenge your skills, so there is no upper time limit: you should feel free to work on the exercise a little bit at a time. I’ve provided a CodePen of the completed cover; you can switch to Editor view on CodePen for clues and assistance if you wish. I’ll also write a blog post explaining the code in the near future.
A few important points to note:
- There are no bitmaps aside from the Sea Nymph illustration on the cover: all text remains real text.
- Semantics are important, and should be reflected in the markup you use.
- Accessibility and reading order are paramount: that is, you should keep the text in your page in the logical order it would be read on the cover.
You will need the following to complete the work:
- The illustration caption text (which reads “Chrysaora quinquecirrha, Patrice Stephens-Bourgeault”) is set in Jane Austen.
- The illustration of the Sea Nettle Jellyfish.
- The “Journal of Jellyfish Studies” and “May 2014” text is in Aspira by Durotype, a demo of which you can download from myFonts as an OTF or webfonts package. (You will need to create a free myFonts account first)
- All other text is in Pesaro by Hoftype; again, you can download the Light version of the font from myFonts.
Suggested Stretch Goals
If you can, make the cover responsive, as is the version above.
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/tqDJB