One advanced lecture deck per week, each with real images, worked examples and a studio task.
Week 1
This 36-slide lecture introduces the course, its 12-week learning path, four assessment tasks, and the Week 1 foundations of document structure, semantic HTML, audiences, headings, landmarks, links, images and source records.
Week 2
This 30-slide lecture works through landmarks, heading hierarchy, lists, figures and meaningful link text with real markup examples, showing how a page reads as a document before any CSS is applied.
Week 3
This 28-slide lecture covers letterform anatomy, serif vs sans-serif choice, type scale and line length, WCAG-referenced contrast, and the print-to-screen history from Gutenberg's press through Linotype to web fonts.
Week 4
This 30-slide lecture compares normal flow, flexbox and grid, works through container queries and a reading-column vs multi-column layout, and diagnoses three named layout bugs with DevTools.
Week 5
This 27-slide lecture builds a restrained colour system with the real WCAG luminance/contrast formula worked against brand tokens, then covers colour-blind-safe palettes, responsive images (srcset/picture) and an alt-text decision tree.
Week 6
This 29-slide lecture works mobile-first through media queries, content-driven breakpoints, fluid layout, flexbox/grid and container queries, clamp() typography, and small-screen navigation without hiding essential content.
Week 7
This 30-slide lecture builds accessible forms and interactive widgets with real ARIA patterns — labels, fieldset/legend, focus order, :focus-visible, error handling, live regions, disclosure and modal focus-trap — plus a keyboard test protocol.
Week 8
This 28-slide lecture works through a practical, WCAG 2.2-referenced audit covering heading structure, colour contrast, focus visibility, text alternatives and motion settings, plus severity triage and a studio audit brief.
Week 9
This 30-slide lecture plans information architecture for a small multi-page site — navigation systems, breadcrumbs, sitemaps and reusable page templates — so structure holds together as content grows.
Week 10
This 27-slide lecture runs lightweight usability methods (five-second test, first-click test, think-aloud), an observation template and severity triage, then turns a specific observed moment into a justified revision.
Week 11
This 30-slide lecture checks assets, image formats and compression, loading strategy, metadata and Open Graph tags, and Core Web Vitals (LCP/INP/CLS) via Lighthouse, against a consolidated pre-publish checklist.
Week 12
This 30-slide lecture presents the final site, explains the design system's decisions, and reflects on the testing and revision evidence gathered across the course.