25 Variations

Level 1 (1-5)

Limited to: Only use HTML, and the following elements

  • p
  • br
  •  

    • Goals: 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? What happens to the poem when you have to scroll to read it all?

    1
    2
    3
    4
    5

    Level 2 (6-10)

    Limited to: Only use HTML, in addition to the elements allowed in Level 1, we may use the following elements:

  • div
  • span
  • h1, h2, h3, h4, h5, h6
  • strong
  • em
  • ol, ul, li
  • a

    • Goals: Focus on presenting the text in various hierarchies & sacles using only HTML

    6
    7
    8
    9
    10

    Level 3 (11-15)

    Limited to: HTML & CSS, in addition to the elements allowed in Level 1 & 2, we may use the following elements:

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

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

    11
    12
    13
    14
    15

    Level 4 (16-20)

    Limited to: HTML & CSS, in addition to the elements allowed in Level 1 & 2, we may use the following elements:

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

    • Goals: Focus on typography using CSS. Experiment with hierarchy and scale.

    16
    17
    18
    19
    20

    Level 5 (21-24)

    Limited to: HTML & CSS, in addition to the elements allowed in Level 1 & 2, we may use the following elements:

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

    • Goals: Do something you haven't done before. Use colors. Test the limits of what you can do. Experiment with new CSS properties (including animations, if you want). You might also consider how your website is read on a screen reader.

    21
    22
    23
    24
    25