Learn CSS properly — the language, the cascade, the layout algorithms — build a complete, documented design system with it, then put it up against Bootstrap, Material, UIkit and Tailwind.
Forty modules of pure CSS, no frameworks, no shortcuts. You finish Part 1 with a polished, responsive, accessible design system and component library you understand line by line, with the ability to explain why any declaration wins or loses. You style your own project throughout — FotoBlog (supplied in legacy and modern versions) is the reference you inspect and audit, never the thing you clone.
Part 2 puts four frameworks beside your design system and asks: whose design system should this project have — yours, or theirs? Every framework class is traced back to the CSS it generates, nothing is measured by opinion, and the course ends with a weighted, evidence-based architecture decision you can defend.
65 modules in two parts. Each phase builds on the one before it.
The rendering pipeline, syntax, selectors, the cascade, specificity, and inheritance.
The box model, normal flow, units, colour, and typography.
A spacing scale, custom properties, and your own documented design tokens.
Positioning, stacking contexts, Flexbox, Grid, choosing between them, and intrinsic layout patterns.
Mobile-first, fluid typography, container queries, and logical properties.
Components, forms, states, motion, images, modern selectors, and cascade layers.
DevTools, systematic debugging, AI-assisted debugging, CSS architecture, resets, and accessibility.
The FotoBlog audit lab, refactoring, and your documented design system.
Why frameworks exist, and verifying versions and documentation before trusting a framework (or an AI’s answer about one).
The component and utility model, layout, forms, and theming your variant.
Material 3 as a design system, the Beer CSS implementation, and theming.
Attribute-driven components, a full numeric accessibility audit, and customising.
Utility-first thinking, the v4 build, layout and variants, design tokens, and Tailwind vs custom CSS.
The framework comparison lab, a FotoBlog component built five ways, and accessibility and performance across frameworks.
Your weighted architecture decision, safe migration, and reviewing AI-generated framework code.
Your final project: five implementations, measured, and a decision you can defend.
A documented design system and component library built from your own project, defensible declaration by declaration — working from 320px to 2560px, at 200% zoom, with a keyboard, in greyscale, and without JavaScript. Then the same project in five implementations (vanilla + 4 frameworks), measured on payload, markup size, restyle cost, accessibility and your own experience, with a written, defensible frontend architecture decision.
R 1,500/month
Billed monthly for as long as you're enrolled — once you've completed the course, billing stops.