Module Overview
Detailed coverage of semantic HTML, CSS fundamentals, box model, layout reasoning, accessibility basics, and developer tooling workflows. Students learn to build well-structured pages and reason about visual structure and accessibility.
Learning Objectives
- Construct semantic HTML documents with appropriate landmarks and ARIA where needed.
- Apply CSS fundamentals including selectors, specificity, box model, and positioning.
- Use browser devtools to debug layout and accessibility issues.
Lesson-by-Lesson Breakdown
Semantic HTML: headings, sections, nav, main, article, footer.
Images & media: responsive images, alt text, and best practices.
CSS selectors, cascade, specificity, and inheritance.
Box model, margin collapsing, and layout debugging.
Positioning (static, relative, absolute, fixed, sticky) and stacking contexts.
Accessibility basics and keyboard navigation testing.
Devtools deep dive: inspecting, live edits, and performance snapshots.
Hands-on Activities & Deliverables
Activities
Build a multi-page site (Home, About, Contact) that meets an accessibility checklist and includes responsive images and semantic markup.
📦 Deliverable
Hosted static site link (or ZIP) + accessibility checklist report.
Required Tools & Readings
MDN references, devtools cheatsheet, accessibility guidelines (WCAG overview).
Assessment & Rubric
- Semantic markup35%
- Layout correctness & cross-browser sanity35%
- Accessibility items met30%
Prerequisites
None.
Parent-Friendly Value
Students produce accessible, standards-compliant web pages suitable for public presentation.