HTML/CSS · Foundations
Semantic HTML & CSS Systems
Build resilient layouts with modern CSS, design tokens, and accessible markup aimed at production codebases.
6 weeks · 42 hours · Blended — studio evenings · Tue & Thu · 18:30–21:00 GMT
From £195 GBP · Certificate on completion
Overview
You will translate interface specs into maintainable HTML/CSS modules, practise fluid typography, and document decisions your future self will thank you for. The programme blends short instructor demos with pair exercises so you ship a small pattern library by the final week.
What you work through
- Design-token driven theming with CSS custom properties
- ARIA patterns for navigation, dialogs, and live regions
- Responsive grids using subgrid where supported, graceful fallbacks elsewhere
- Linting stack: stylelint + axe paired with manual keyboard sweeps
- Storybook-style documentation for each component
- Peer review checkpoints mirroring Hyper Sys Academy rubric language
- Print and high-contrast variants for public-sector adjacent briefs
Outcomes
- Ship a documented component set with accessibility notes per pattern
- Explain trade-offs between utility-first and token-first styling on your team
- Hand off CSS that fits an existing deployment pipeline without rework
Lead contact
Morgan Ellis
Former design-systems lead for a UK civic tech collective; now curriculum designer for Hyper Sys Academy.
Practical questions
Do I need a design background?
No, but you should be comfortable reading a short creative brief. We focus on implementation fidelity, not illustration.
Is Figma included?
We reference shared Figma files for structure only; a licence is not bundled in the course fee.
What is not covered?
We do not teach brand strategy or advanced motion design — only the interface build layer.
Participant notes
The week on focus order for mega-menus finally made our audit backlog shrink. Morgan’s rubric for “done” matched how our tech lead reviews PRs.
Clear pacing, though I wanted one more session on container queries — still, the token worksheet is now our team default.
Ready to talk scope? Request information — we respond within two business days for general enquiries. See Money-Back Policy for cooling-off terms.