Choose an existing poem. It should be written by someone else, not something you generate on your own. As a general rule, the poem should be able to fit on approximately one printed page (no epic poems).

You will be making 15 formal variations using this poem—3 compositions for each of 5 phases. Each variation will be a separate web page. For each variation, you will focus on changing the poem’s form through shifts in composition, typography, hierarchy, scale, and pacing. The poem’s content must remain intact throughout all 15 of the variations.

This will be our most technically restricting project but is a good one to start with. The idea is to iterate and experiment within the limitations. This will help to develop muscle memory and strategies for working within our folders, text-editor, and browser.

Level 1

Use HTML only; In addition to the required html, head, title, and body elements, you can use any of the following HTML elements:

  • p
  • br

Focus on breaking up the text in different ways. How does the poem usually look? What happens if you present it more spaced out? More condensed? In a specific shape or form?

Level 2

Use HTML only; In addition to the elements allowed in Level 1, you can use any of the following HTML elements:

  • div
  • h1, h2, h3, h4, h5, h6
  • strong
  • em
  • big
  • small
  • ol
  • ul
  • li

Focus on presenting the text in different hierarchies and scales using only HTML.

Level 3

Use both HTML and CSS; Use only the HTML allowed in Levels 1 and 2; Use the following CSS properties:

  • padding
  • margin
  • border
  • height, width
  • position
  • top, right, bottom, left
  • display
  • float
  • color

Focus on positioning elements using CSS. Experiment with space and possibly try a very tall page or a very wide page.

Level 4

Use both HTML and CSS; Use only the HTML allowed in Levels 1 and 2; In addition to the CSS properties allowed in Level 3, you can use any of the following CSS properties:

  • font-family
  • font-weight
  • font-size
  • text-align
  • line-height
  • letter-spacing
  • text-transform

Focus on typography using CSS. Experiment with hierarchy and scale.

Level 5

Use both HTML and CSS.

Use any HTML element (except for img, iframe, and links to external sites). Background images can be used.

Use any CSS property, including animation.

Explore. Bring in new elements and visual treatments.


Consider implementing some kind of navigation system for your poem iterations.

Poem Sources


*This project was adapted from Laurel Schwulst's "25 Variations" assignment.