Prototyping 2 > Project 1

Project 1

Timeline Portrait

Brief

You will be paired up with one of your classmates. Schedule a time to chat and get to know each other.

Then, create a multi-page HTML website that showcases your classmate’s life as a timeline of key ages.

This is an HTML-focused project with minimal CSS styling. The design of this project comes from your structure, sequencing, links, headings, and content choices.

Process

Interview Your Partner

Schedule a conversation with your partner. Spend at least 20–30 minutes talking.

Ask about specific ages. Use these ages as a starting point (you can add more if you want): 1, 4, 7, 12, 16, 18

For each age, ask questions like:

  • Where were you living then?
  • What is one vivid memory from that age?
  • Was there an object, person, or place that really mattered to you then?
  • What were you worried about or excited about?
  • Ask about anything you are curious about.

Take real notes (on paper or in a doc). You will turn these in.

Concept and Structure

Your site is a portrait made of moments in time. Pick specific details from each age and turn them into a chain of pages the user can walk through, like chapters in a story. You can be abstract and poetic. Make it a little weird and surprising. (Stay away from being generic.)

Your site must have at least 7 pages (add more ages if you wish):

  • Home page
  • Age 1
  • Age 4
  • Age 7
  • Age 12
  • Age 16
  • Age 18

Create a linking structure that allows the user to navigate through the site. The experience should feel mostly linear, as if the viewer is walking forward (or backward) through a life.

HTML Requirements

Across your whole site you must use:

  • Anchor links to link from page to page (<a>)
  • Headings (<h1>, <h2>, etc.)
  • Paragraphs (<p>)
  • Images (<img>)
  • One unordered list (<ul>)
  • One ordered list (<ol>)
  • One <blockquote> with a direct quote from your partner
  • One <details> + <summary> pair to reveal additional information or a hidden story
  • Optional: include an audio snippet (<audio>) or a video clip (<video>)

You should also:

  • Give each page a meaningful title in the <title> tag
  • Keep your files organized with meaningful names (e.g., index.html, age-1.html, age-4.html, etc.)

Minimal CSS Styling

This is primarily an HTML project. However, you may use a small amount of CSS to make things clearer and less drab.

You may:

  • Change font sizes, background colors, or text colors.
  • Adjust margins/padding or text alignment.

Do not not use any CSS frameworks or templates.

No AI

This project must be created by you, not by an AI tool.

That means:

  • No AI-generated HTML, CSS, or JavaScript.
  • No AI-written text content for the pages.
  • No AI image generation for the main content.

It’s fine (and encouraged) to look up syntax or examples on Google, MDN, W3Schools, etc.

Deliverables

  • Bring your websites files to class on your laptop.
  • Process PDF
    • A photo of your interview notes.
    • A simple sketch showing your planned pages and links

Due

Thursday, January 29 at the beginning of class. (This is a very fast project to kick things off.)

If you are lost

If you are completely new to HTML, that’s totally fine!

I recommend go through these two HTML tutorials on the Codecademy website: