Intermediate Projects
Prerequisites: Level 2 — Intermediate
Build these using forms and validation, accessibility, SEO, responsive images, and the interactive elements from Level 2.
1. Accessible Registration Form
A multi-section sign-up form with fieldsets, correct autocomplete
tokens, built-in validation (required, pattern, min/max), hints linked
with aria-describedby, and a summary of errors. Test it with only the
keyboard and with a screen reader.
2. Blog Article Template
An article page with proper landmarks, a heading outline, a skip link,
responsive picture images, a figure with a caption, meta tags, Open
Graph tags, a canonical link, and Article structured data in JSON-LD.
Check it with the On-Page SEO Checker.
3. FAQ and Product Page
A product page with an image gallery using srcset, a specifications
table with row and column headers, an FAQ built from details elements,
and a "size guide" in a dialog or popover.
4. Multilingual Landing Page
The same landing page in two languages (one of them right-to-left, such as
Arabic or Hebrew) with correct lang, dir, and hreflang links between
the versions.