HTML projects: build readable records and honest forms

Last updated: 5 Oct 20265 min read

project

An HTML project should prove that its document, links, controls, and text alternatives make sense before visual polish or client-side enhancement. These seven projects separate read-only records from forms that need a real server.

Start with a readable record

Build the receipt index first. Move to the dashboard when its source order and numbers remain intelligible without CSS. The multilingual case page adds a different text-direction problem. The incident evidence page adds a table, captions, and a descriptive transcript; it should still explain the case if media never loads.

Then handle a decision

The receipt review form shows a bounded state-changing POST. The inspection intake form adds file and field constraints. The error response project asks what the server sends back when those constraints fail. Do not present any of these forms as a working service until the routes, persistence, permission checks, request protection, and tests exist.

<main>
  <h1>Inspection I-47 project checklist</h1>
  <ol>
    <li>Read the page with styles and scripts disabled.</li>
    <li>Follow every link and label by keyboard.</li>
    <li>Submit an empty form, then repair one field.</li>
    <li>Check media alternatives and narrow-screen order.</li>
  </ol>
</main>

Cost and verification

Static markup is cheap. Asset delivery, content revisions, and server behavior are not. For each project, record which paths and files are illustrative, then replace them with working resources before public use. A passing HTML parser check cannot prove correct focus movement, spoken table associations, upload handling, or print layout. Use a real browser and assistive technology for those final checks. Keep the CSS and JavaScript layers separate so a structural mistake is not hidden by presentation.

Common Mistakes

Do not call a static form a completed transaction.
Do not use a diagram, clip, or color as the only evidence of a result.
Do not add a second page that repeats the same browser contract without a new testable decision.

Connected lessons

html