Quick Check-Up

There is an endless list of new things to learn in web development. But you’ve pushed through most of the fundamentals so far (with one or two notable exceptions). In these three short codepen exercises, I ask you to add some basic html markup to raw text, and then style that markup with two different, specific audiences in mind (in essence, the workflow of most web development work).

While I’m not grading these, I’d love to have a look at them and talk about them with you: Send me a link to your pen!


  • The unadorned text is available as a gist here:

Two audiences

After you’ve added the basic HTML elements on codepen, style this text with an eye towards an older, less adventurous readership. That means (very broadly):

  1. larger type;
  2. higher contrast;
  3. adhere to conventional styling norms.

Now fork that pen (the fork button is in the lower right-hand side of the codepen.io editor). Without seriously altering the HTML, change the CSS so that the document might better appeal to a younger, more unconventional readership. In this case (broadly speaking):

  1. a less predictable layout;
  2. more variation in presentation;
  3. more imaginative use of conventions (italics, bold, highlights, margins, etc.);

Understood differently, your first stylesheet should be predictable and allow your reader to get to the content without much trouble, while the second stylesheet should grab your readers' attention – and hold onto it.

Using only basic CSS and HTML, what might that mean?

  • More links to related content sprinkled throughout the text;
  • A consistent, but more varied color palette (ex: a dark background with neon or pastel foreground colors);
  • Use of more than one typeface;
  • Use of non-serifed typefaces (e.g., Helvetica instead of Times);
  • Margins and line-heights that vary throughout the text;
  • More frequent, more graphic quotes.

This second, less conservative style sheet is a real challenge: How can you create variation on a page when CSS seems to want to style everything the same? E.g., a <p> is always the same, isn’t it?

At first, you won’t be able to make things too varied in your second style sheet, but give it a try, and when you’ve done what you can, check out the next little tutorial on a new feature for us in both HTML and CSS: the class. With classes, suddenly everything becomes more flexible! Before you learn about classes, though, give the above exercise a try.