Bring your HTML skills together.

A final project with real page relationships, not a checklist of isolated tags.

Your brief: a community workshop website

Create three connected pages: an event introduction, a useful schedule, and an inclusive registration prototype. Use invented details and images you own or have permission to use.

Milestones: 0/5. Complete the plan, milestones, and written rubric. This is a self-reviewed project, not an independently verified certification.

Allow about 3–5 hours. Your project autosaves separately from lesson completion and quiz mastery.

1. Plan and milestones

Audience, page purposes, and navigation plan (at least 40 characters)Plan the audience and pages — Create a fictional community workshop site. Explain who it serves, what each page answers, and how readers reach registration.Build three connected documents — Give every page its own title, language, main region, heading outline, and working navigation to the other pages.Explain the event and its schedule — Add an informative figure and useful alternative text to the home page. Build a schedule table with a caption and associated headers.Design an inclusive registration form — Include labeled name and email fields, grouped session choices, help text, and native validation. This is a front-end prototype: do not collect real personal data.Test and document your review — Download all three HTML files into one folder. Test every link, keyboard navigation, 200% zoom, missing images, and form errors. Record evidence against the rubric.

2. Build the pages

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Community workshop — Community Workshop</title>
  <style>body{font:1rem/1.6 system-ui;max-width:60rem;margin:auto;padding:1rem}nav{display:flex;gap:1rem;flex-wrap:wrap}img{max-width:100%;height:auto}input,button{font:inherit}label{display:block}</style>
</head>
<body>
  <a href="#main">Skip to main content</a>
  <nav aria-label="Primary">
    <a href="index.html">About the event</a>
    <a href="schedule.html">Schedule</a>
    <a href="register.html">Registration</a>
  </nav>
  <main id="main">
    <h1>Community workshop</h1>
    <!-- Explain who the event is for, where it is, and why to attend. -->
    <!-- Add an informative figure using an image you own, with alt and a caption. -->
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Community workshop — Community Workshop</title>
  <style>body{font:1rem/1.6 system-ui;max-width:60rem;margin:auto;padding:1rem}nav{display:flex;gap:1rem;flex-wrap:wrap}img{max-width:100%;height:auto}input,button{font:inherit}label{display:block}</style>
</head>
<body>
  <a href="#main">Skip to main content</a>
  <nav aria-label="Primary">
    <a href="index.html">About the event</a>
    <a href="schedule.html">Schedule</a>
    <a href="register.html">Registration</a>
  </nav>
  <main id="main">
    <h1>Community workshop</h1>
    <!-- Explain who the event is for, where it is, and why to attend. -->
    <!-- Add an informative figure using an image you own, with alt and a caption. -->
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run index.html in new window

50,000 characters per file. Preview shows the selected page in a sandbox; scripts and submissions are disabled. To test navigation, download each file into the same folder, add your image files, and open index.html locally. Never enter real personal data into this prototype.

3. Check structure and relationships

Checks look at page identity, real navigation targets, table headers, and label relationships. They do not replace a human assessment of content, visual design, or accessibility.

4. Evidence-based review

Write at least 20 characters of concrete evidence for each criterion. Describe what you tested and what remains uncertain; checking boxes alone is not evidence.

Useful content — Can another person find the event's purpose, time, location, and registration instructions? Record what you asked them to find and what happened.Connected pages — Open each downloaded page and test every navigation link in both directions. Record the filenames and any repairs.Meaningful structure — Inspect the outline and landmarks, then read the page without styling. Explain a semantic choice and an alternative you rejected.Usable without a pointer — Describe the Tab/Shift+Tab sequence, focus visibility, label activation, image alternatives, and zoom behavior. Report any checks you could not perform.Understandable data and forms — Explain which row and column identify a schedule cell, and test empty and malformed form inputs. State what a real server must validate.

Loading saved work…

Return to the final assessment · Course contents and mastery

← HTML course