Capstone reference and explained rubric

Open the reference only after your first complete attempt. Run the reference site — download the course ZIP (Extract it and follow the included setup instructions for capstone/reference/index.html.); use your editor to inspect capstone/reference/index.html and styles.css. It is one acceptable design, not a pixel-matching target.

Why the reference is organized this way

The header provides a clear brand and a wrapping list of destinations. A visible skip link goes to main. The hero uses one h1 and a figure; events use h2 for the collection and h3 for each article. The event-grid wrapper separates layout from the section’s introductory text. That lets Grid align cards without accidentally putting the heading in a column.

The static page always contains all three events. Its ids and data-category values do not require JavaScript and do not create an interaction by themselves. Dates use time with datetime values while remaining readable. The arrival facts are directly visible; the optional break-area detail uses a native disclosure.

The practice form shows the boundary honestly. Labels name controls, the email hint adds description, and required/type=email provide native checks. Missing name attributes deliberately keep typed values out of the submitted entry list. The local result page reports a practice check, never a booking. Real collection would need a separate service and privacy/security decisions.

CSS begins with shared colors and readable defaults, then adds box sizes, flexible media, form spacing, Flexbox navigation, Grid containers, and the wide-screen media query. The underlying narrow layout remains useful without the query. A clear focus outline and content wrapping preserve interaction under stress. No fixed event-card height is required.

Rubric Total 100 points

• Meaningful structure and accurate fictional content: 20. 8 for logical headings/landmarks, 8 for complete event and arrival details, 4 for unique identifiers and coherent source order.
• Navigation and media alternatives: 15. 6 for working descriptive links and skip destination, 5 for useful alt/caption, 4 for correctly resolving local assets.
• Honest usable practice form: 20. 7 for visible associated labels and grouping, 5 for native constraints and hints, 8 for no-data local behavior and clear no-registration wording.
• CSS reasoning and responsive layout: 25. 6 for maintainable selectors and box model, 6 for appropriate Flexbox/Grid, 8 for reflow and text growth, 5 for typography/contrast/focus.
• Evidence and explanation: 20. 8 for actual keyboard/resize/form checks, 5 for a reproduced bug and targeted fix, 4 for portable folder checks, 3 for explicit remaining gaps.

A suggested completion threshold is 80/100, with critical issues repaired regardless of total score. Critical issues include unreachable navigation or controls, clipped essential information, missing accessible names or associated visible labels, real data sent unexpectedly, or false booking claims. This rubric is an instructional proposal and has not been validated in a human pilot.

Compare by behavior

If your page uses a different palette or spacing, assess contrast and usability rather than similarity. If you chose different layout rules, show they handle the same long-title and narrow-screen tests. If your code is shorter, explain which rules it does not need. If your code is longer, check for copied declarations that no longer match anything.

Example diagnosis

Symptom: card columns disappear after a refactor. Evidence: the parent has class event-grid, but the CSS selector is .events-grid. Repair: correct the selector. Retest: the expected columns return at the wide breakpoint and one-column layout remains below it. This explanation distinguishes a selector mismatch from a browser-cache guess.

Return to the brief