Choose an existing poem. It should be written by someone else — someone who is not yourself and someone you do not know on a personal level. As a general rule, the poem should also be able to fit on approximately one printed page (no epic poems).
You will be making 25 formal variations using this poem. Each variation will be a separate webpage. 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 25 variations.
Restrictions
Only use HTML (no CSS of any kind)
In addition to the required html, head, title, and body elements, you can use any of the following HTML elements:
pbr& n b s p ; (but without spaces) to equal a visible space.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?
Restrictions
Only use HTML (no CSS of any kind)
In addition to the elements allowed in Level 1, use any of the following HTML elements:
divspanh1, h2, h3, h4, h5, h6strongemol, ul, lia (Do not link to external sites, but you can link to parts of your poem using an attribute to assign an id)& n b s p ; (but without spaces) to equal a visible space.Goals
Focus on presenting the text in different hierarchies and scales using only HTML.
Restrictions
Use both HTML and CSS
Only use the HTML allowed in Levels 1 and 2.
paddingbordermarginpositiondisplayfloattop, right, bottom, leftheight, widthGoals
Focus on positioning elements using CSS. Experiment with space and possibly try a very tall page or a very wide page.
Restrictions
Use both HTML and CSS
Only use the HTML allowed in Levels 1 and 2
font-stylefont-weightfont-sizefont-familytext-alignline-heightletter-spacingtext-transformGoals
Focus on typography using CSS. Experiment with hierarchy and scale.
Restrictions
Use both HTML and CSS
Use any HTML element (except for img, iframe, and a via linking to external sites. This is a purely typographic project, so no external images, links, or other assets should be used.)
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).
Now that you’ve made at least a first pass on the 25 Variations, please create a navigation system for them. Your navigation system should be both a landing page and some sort of consistent device on each page. (Optionally, you can also have some sort of “cover page” for each Level, describing the constraints and what was allowed in each Level.)
This project is an iterative exploration of typography through HTML and CSS. Since you’ll be making 25 variations on the same text, no one single representation of the poem is important than any other. This should allow you ample room for visual experimentation. You should aim to have a variety of visual treatments that responds to the poem’s content. Additionally, by the end of the project, you will better understand the differences between HTML and CSS and see how each can be used in semantic and visual expression.