HTML Study Projects

Guided projects that combine several chapters at once — larger than the lab examples, still hand-written HTML. Each project lists the chapters it exercises and the standards it must satisfy.

Project 1: A personal portfolio page

Chapters: 1, 2, 3, 9, 11. A single page with complete metadata, full landmarks, a heading outline, and a project list.

Requirements: unique title and description; skip link; nav as a list; exactly one main; alt text on every image; valid at validator.w3.org.

Project 2: A product listing with figures

Chapters: 3, 5, 9. Three product cards as articles, each with a figure, caption, and description list of specs.

Requirements: article vs section decided deliberately; responsive images with width/height; dl for name-value specs.

Project 3: A multi-step survey form

Chapters: 7, 8. A paginated form with radio groups, selects, validation, and an accessible error summary.

Requirements: every field labeled; fieldset/legend groups; constraint validation with custom messages; GET for the preview step, POST for submit.

Project 4: A data report page

Chapters: 3, 6, 14. A report with two scoped tables (one with colspan groups and tfoot totals), figures, and lazy-loaded images.

Requirements: caption and scope on every table; no layout tables; Lighthouse CLS under 0.1.

Project 5: A documentation page

Chapters: 3, 4, 9, 12. Long-form text with inline code semantics, a sticky fragment-link table of contents, and a details-based FAQ.

Requirements: code/kbd/samp used correctly; fragment navigation with stable ids; details/summary FAQ — no JavaScript.

Project 6: An HTML email template

Chapters: 6, 15. A one-table email with inline styles that renders in Gmail, Outlook, and Apple Mail.

Requirements: role="presentation" tables; inline styles only; no scripts; absolute image URLs.

How to work. Type every tag by hand, validate at validator.w3.org, and audit with Lighthouse before calling a project done. Compare your result with the lab examples — same rules, bigger scale.