Capstone Build a usable community events site

Create a static Harbor Together site that a first-time visitor can understand and use. Work from your own module 09 files, or start from a clean folder if you want a stronger independent challenge. Do not open the reference solution until you have made and tested your first complete attempt.

Provisional time: 4–6 hours, unpiloted. The target is a working, explainable artifact, not visual imitation.

The fictional content brief

Harbor Together runs three sample events: Garden morning on 7 November 2026 at 10:00, Repair café on 14 November at 14:00, and Story circle on 21 November at 11:00. Use the fictional descriptions from the lessons or write equally clear invented ones. The garden has a wide paved route and seated tasks; the community room has a step-free entrance and a quiet break area. Label all event and venue information as fictional learning content.

Visitors need to find dates, places, what to expect, and arrival information. They should be able to move directly to events or arrival details, understand the illustration without seeing it, and use the page without a mouse. A practice form lets them try native field validation with invented data and an honest result page. There are no real registrations.

Required artifact

1. A portable folder with index.html, styles.css, practice-result.html, and an assets folder. Use relative paths.
2. One clear page h1, meaningful h2/h3 hierarchy, header/nav/main/footer, and distinct event articles.
3. Three event cards with readable dates, useful descriptions, and explicit place/access information. Use unique ids and preserve the handoff identifiers below.
4. Descriptive navigation links and a working skip link. Native details/summary may contain the optional break-area answer.
5. The original garden illustration with useful alt, intrinsic dimensions, and a nearby caption. Use no unlicensed or remote assets.
6. Visible labels, required invented name/email, optional question, category choice, fieldset/legend, and a clear practice-only notice. Keep controls unnamed and the action local, so field values are not sent.
7. A wrapping Flexbox navigation and a Grid card layout that is usable at narrow widths and gains columns only when space permits. Allow text and controls to grow.
8. Readable typography, measured color contrast, underlined or otherwise clearly distinguishable links, and visible keyboard focus.
9. A release note recording actual checks, at least one bug diagnosis and fix, and remaining gaps. Do not claim unrun tests.

Milestone 1 The content works without styling

Write the outline and content first. Read the page in source order. Confirm each event is understandable, links have destinations, and labels associate with controls. Test the local practice result before adding visual polish. If the page implies a real booking, correct the wording now.

Milestone 2 Add the smallest useful layout

Link the CSS and establish body text, colors, a bounded container, flexible image sizing, and the box-sizing convention. Add Flexbox to the header and Grid to the cards. Keep one column as the default, then select a content-based breakpoint for more columns. Stress the layout with a long event title rather than designing only for the shortest text.

Milestone 3 Prove the important behavior

Check at a narrow viewport, a wide viewport, and an intermediate width. Try 200% zoom and keyboard navigation, inspect focus, and test empty, malformed, and valid invented form entries. Confirm the result URL contains no typed control values. Open the copied folder in a fresh location to catch path dependencies. If an environment prevents a check, record the exact gap instead of passing it.

Deliver and explain

Give your teacher or reviewer the folder and release note, or retain them locally for self-study. Do not publish as part of this task. Explain one semantic choice, one selector conflict, the reason for your layout systems, and the difference between format validation and real submission. A reviewer should be able to follow those explanations against your code.

Stable connections to the next course

Use ids garden-morning, repair-cafe, and story-circle on the articles, with class="event-card" and data-category values outdoors, learning, and creative respectively. A data-* attribute holds custom information on an element without creating visible content by itself. We do not read it with code here; the next course can use it to enhance filtering. Keep the events section id="events" and the practice form id="interest-form".

Reference solution and explained rubric · Detailed JavaScript handoff