Capstone: your first artifact

Before you begin

By the end, you can…

• Combine HTML, CSS, and JavaScript into one page
• Test the page like a user, not an author
• Publish it somewhere real

01 / Understand

Your first artifact is proof, not perfection

The capstone combines everything: a meaningful page built from semantic HTML, styled with deliberate CSS, and given one genuine behavior with JavaScript. Its job is to work for a real person, not to win a design award.

Testing like a user means completing the task the way a visitor would: keyboard, touch, zoomed text, slow network. Watch for moments where you, the author, would know what to do but a stranger would not.

02 / Apply

Ship it

Choose the smallest real purpose: introduce yourself, collect a note, compare two options, or share a resource list. Build the core task first, then style it, then add the behavior.

Publish on any free static host, send the link to one person, and ask them to complete the task without coaching. Your notes on what surprised you are part of the artifact.

const releaseChecks = [
  "Core task works without JavaScript",
  "Keyboard can complete the task",
  "200% zoom still reads well",
  "A real person completes it uncoached"
];

03 / Make

Your studio task

Make — Publish your artifact and test it with a real person.

1. Choose one small, real purpose for the page.
2. Build the HTML core first, then CSS, then one behavior.
3. Run the release checks above.
4. Publish, share the URL with one person, and write down what surprised you.

04 / Check

Knowledge check