Choose one piece of text and use the HTML only to create 2 different versions. In these 2 versions, try organizing the text based on your own understanding and express it differently. Think about how the hierarchy and the layout of the text can change the experience of reading when scrolling through it.

In the first version, only use elements like <p>, <br>, <hr>,  ; to space out the text.

In the second version, display the text using elements we’ve learned so far as much as you can, such as <h1> - <h6>, <p>, <ul>, <ol>, <em>, <strong>, etc.

References:
HTML elements reference (MDN)
htmlreference.io
HTML: A good basis for accessibility

Create 20 separate webpages of a poem using HTML & CSS. For each variation, you will focus on changing the poem's form through shifts in composition, typography, hierarchy, scale, and pacing. Version 1-8 should be HTML only. Use both HTML & CSS in version 9-16. In version 17-20, use CSS flexbox and grid to experiment more ways of layout.
✳ This project is inspired by Laurel Schwulst’s 25 Variations

a. HTML only (1-8)
Try displaying the profile both in conventional and unconventional ways. Explore more HTML elements that you’re curious about (<table>, <form>, <pre>, etc.). What are the default appearance and function of different elements? What happens when you break the sentences up, place them more condensed or more expanded and distant?
✳ Make sure to use these tags at least once (not necessarily at the same time):
    <ul> <ol> <table> <form> <pre>

b. CSS text styles & positioning (9-16)
Try observing how the vibe of the poem is changed by adding CSS to it, and keep that in mind while making design decisions. In the first 4 pages, focus on text decorations and typography ideas. In the last 4 pages, keep exploring on the layout and spacing using CSS positioning.

c. CSS flexbox & grid (17-20)
Experiment with the modern ways of doing css layout — flexbox and grid. Consider the whole page’s layout in a larger scale. How is it different when the sentences become boxed and grids? Are there any different sections? tabs? areas?

References:
"Text Only" channel by Josh Osborne

Try to use HTML & CSS to draw some simple shapes, then to experiment on the animations, basic user interactions, and media query. Think of the browser as a frame and a window, and explore the possibilities that can happen in it.

a. (In class drawing)
Create a still life drawing using HTML & CSS. For the first week, focus on the shape, color, and positioning. Then create some dynamics by adding CSS trasnsitions and animations to your drawing. Think about time and cycles of the movements. For the second week, add user interactions such as hover and click. Basic JavaScript (clicks) will be involved in this week.
✳ This project is inspired by Laurel Schwulst’s Coding from Life

Window Observing
Choose a window in your life and observe it. What can you see? and what is absent? What is still and what is changing? Maybe try to find some different prescriptive, too. How would you describe this experience? Create a representation of the window and it can be in any forms (photo, video, drawing, writing...) and think about how you would translate it into a digital version.

b. (will be synchronized with pt.a)
Create a translation of the window you ovserved using media query. As the user resizing the browser or switching between desktop and mobile, the content in the browser should be changing. The translation can be abstract, realistic, or imaginary. Think about these questions while making it: What do you think is on the other side of the window? What can or can’t be seen through a window? Is there a reflection? Is it big or small? open or closed?

Choose a specific website (i.e. Wikipedia, New York Times) and create a bookmarklet or extension that meaningfully alters the experience of browsing the website using JavaScript. Your extension could be intended for use on your chosen website, or on all websites. Try to modify the elements in the original website in ways like replace, add, remove, scale, distort, etc.
✳ This project is inspired by Sacha Portis's Para-Site

In the end of the project, display it to your classmates with the chosen website, and create an homepage for your extension. Include the name, description, screenshots, and download link in your homepage.

In this project, create an interactive tour to bring an offline site online. Use your own visual strategy to represent the site, and use your own narrative to guide the audience though this space. Imagine how the users can experience it, and so that determines the navigation system. The tour should at lease have no less than 3 different scenes. If the tour is linear, how the scenes change through time? If it’s non-linear, how one scene relates to another?
✳ This project is inspired by Rosa McElheny's Tour