Medusa

The Journal of Jellyfish Studies

Volume No.2

Ink illustration of a Sea Nettle jellyfish (Chrysaora quinquecirrha)
Chrysaora quinquecirrhaPatrice Stephens-Bourgeault
Part of the Exercises & Quizzes Reading List

While many of my 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 .

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.

Challenges

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.
  • 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.

Resources

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