DEV-412 · Spring 2026
Frontend Systems
HTML semantics, layout, accessibility, and maintainable CSS — for developers who ship interfaces, not tutorials.
| Instructor | Dana Okoro · dana@phenduka.co.zw |
|---|---|
| Schedule | Tuesdays & Thursdays, 6:30–9:00 PM · 14 April – 4 June 2026 |
| Location | Phenduka School, Room 3.12 · 44 Kwame Nkrumah Avenue, Harare |
| Prerequisites | Comfort with HTML/CSS basics and Git. One shipped project (any stack). |
| Office hours | Wednesdays 5–6 PM, same room — book via calendar link in cohort Slack |
Policies
- Two absences allowed without penalty. Notify Dana before session if you will miss.
- Late work accepted up to 48 hours with a short note. After that, credit at instructor discretion.
- Cohort Slack is for questions and peer review — not for sharing paid course materials outside the group.
- Accessibility is graded: every assignment must include keyboard path and one screen-reader check note.
Week 1
Document structure & semantics
14–16 April
Topics
- Landmarks, headings, lists — when a
<div>is wrong - Forms: labels, fieldsets, validation messages that assistive tech can find
- Reading: WHATWG HTML spec (selected sections), MDN accessibility tree overview
Deliverable
Markup audit of a provided broken page — written report + corrected HTML (due 20 April).
Week 2
Layout without frameworks
21–23 April
Topics
- Flexbox for components; grid for page regions
- Intrinsic sizing,
min(), container queries intro - Exercise: rebuild a three-region dashboard shell from a Figma PDF
Deliverable
Responsive article layout — no Bootstrap, no Tailwind (due 27 April).
Week 3
CSS architecture
28–30 April
Topics
- Specificity, layers, and when BEM still helps
- Design tokens without a 400-variable system
- Refactoring a 1,200-line stylesheet in pairs
Deliverable
CSS refactor proposal for last week's layout — before/after diff (due 4 May).
Week 4
Accessibility in practice
5–7 May
Topics
- WCAG 2.2 AA — focus order, contrast, motion preferences
- Live testing with VoiceOver and NVDA (lab machines provided)
- Guest: Miriam Chen, Ministry of Health digital accessibility lead (Thursday)
Deliverable
Accessibility report on a cohort peer's Week 2 submission (due 11 May).
Week 5
Performance & perceived speed
12–14 May
Topics
- Critical path, font loading, image formats
- Lighthouse without gaming the score
- Case: slow council planning portal — real trace review (Harare CBD)
Deliverable
Performance memo — three fixes with estimated impact (due 18 May).
Week 6
Components & progressive enhancement
19–21 May
Topics
- Dialogs, tabs, disclosures — native first
- When to add JavaScript and how to keep no-JS fallbacks
- Build a filterable table that works without JS
Deliverable
Accessible component pair — enhanced and baseline versions (due 25 May).
Week 7
Integration week
26–28 May
Topics
- Working with design files and handoff friction
- Code review workshop — cohort reviews in groups of three
- Capstone project kickoff
Deliverable
Capstone proposal — one page, scope and accessibility goals (due 28 May).
Week 8
Capstone presentations
2–4 June
Topics
- 10-minute demos + 5-minute Q&A each
- Peer feedback forms
- Course retrospective
Deliverable
Capstone site — deployed static URL, README with a11y notes (due 4 June, 5 PM).
Materials
- Laptop with Node 20+ and Git installed
- Phenduka Slack invite (sent first week)
- Optional: Resilient Web Design (Clarke) — free online
- Browser: latest Firefox or Chrome; Safari for a11y lab day