# Track 2: build and host a web app

**Final artifact:** a small static web app or paper-and-local prototype that solves one information or workflow problem, plus a test report.

**Outcomes:** Students plan a usable page, write or assemble HTML/CSS/JavaScript, test with representative tasks, explain hosting, and document limits. Publishing is optional and requires school approval.

**90-minute setup:** Download the local starter in [artifacts/web-app](../artifacts/web-app/), open `index.html` in a browser, and print the test table. Use one shared folder or USB copy. No network, account, or personal data is required.

## Sessions

1. **User and task.** Choose a narrow problem such as a club schedule, repair checklist, or resource finder. Middle school teams storyboard three screens. High school teams write two user stories and a success measure. Checkpoint: problem statement and sketch.
2. **Page structure and content.** Build a local page with headings, links, labels, and a clear action. Middle school edits a provided starter folder. High school adds semantic structure and a content source note. Checkpoint: first local build.
3. **Interaction and data boundaries.** Add one simple interaction, such as filtering a list or showing a checklist. Do not collect names or contact information. Middle school uses a teacher-provided script and tests two inputs. High school explains state, invalid input, and what the app does not store. Checkpoint: interaction test table.
4. **Accessibility and responsive layout.** Test keyboard focus, text size, contrast, and a narrow viewport. Middle school uses a paper device matrix. High school fixes at least two issues and records before/after evidence. Checkpoint: accessibility checklist.
5. **Hosting model.** Read the [GitHub Pages quickstart](https://docs.github.com/en/pages/quickstart) and draw the path from files to a live page. Middle school presents the path with cards. High school compares approved hosting with local-only delivery and identifies who controls changes. Checkpoint: deployment decision note.
6. **Demo and repair.** A partner team follows two tasks without coaching. Teams fix the largest failure, present the app or paper equivalent, and state one security, privacy, or maintenance limit. Checkpoint: demo, test report, and handoff README.

## Starter worksheet

| Test task | Expected result | Observed result | Change |
|---|---|---|---|
| | | | |
| | | | |
| | | | |

**Track rubric emphasis:** Build or plan, evidence and iteration, and communication count twice. A strong project works locally, uses a small scope, names its data boundary, and can be handed to another team.