All courses Frontend Foundations

AI-Powered CSS: From the Cascade to Design Systems

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.

Self-Paced · AI Tutor Guided

Register for this course Download brochure (PDF)

About this course

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.

Course curriculum

65 modules in two parts. Each phase builds on the one before it.

  1. Part 1 · CSS from the Cascade to Design Systems

  2. The Language Modules 1–7

    The rendering pipeline, syntax, selectors, the cascade, specificity, and inheritance.

  3. Boxes & Measurements Modules 8–12

    The box model, normal flow, units, colour, and typography.

  4. Systems Modules 13–15

    A spacing scale, custom properties, and your own documented design tokens.

  5. Layout Modules 16–21

    Positioning, stacking contexts, Flexbox, Grid, choosing between them, and intrinsic layout patterns.

  6. Responsive Modules 22–25

    Mobile-first, fluid typography, container queries, and logical properties.

  7. Components & Interaction Modules 26–31

    Components, forms, states, motion, images, modern selectors, and cascade layers.

  8. Craft & Quality Modules 32–37

    DevTools, systematic debugging, AI-assisted debugging, CSS architecture, resets, and accessibility.

  9. Consolidation Modules 38–40

    The FotoBlog audit lab, refactoring, and your documented design system.

  1. Part 2 · CSS Frameworks: Compare, Migrate, Decide

  2. Framework Foundations Modules 41–43

    Why frameworks exist, and verifying versions and documentation before trusting a framework (or an AI’s answer about one).

  3. Bootstrap Modules 44–47

    The component and utility model, layout, forms, and theming your variant.

  4. Material Modules 48–50

    Material 3 as a design system, the Beer CSS implementation, and theming.

  5. UIkit Modules 51–53

    Attribute-driven components, a full numeric accessibility audit, and customising.

  6. Tailwind Modules 54–58

    Utility-first thinking, the v4 build, layout and variants, design tokens, and Tailwind vs custom CSS.

  7. Measurement & Judgement Modules 59–61

    The framework comparison lab, a FotoBlog component built five ways, and accessibility and performance across frameworks.

  8. Decision & Migration Modules 62–64

    Your weighted architecture decision, safe migration, and reviewing AI-generated framework code.

  9. Capstone Module 65

    Your final project: five implementations, measured, and a decision you can defend.

Your final project

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.

Who this course is for

  • Developers who can write CSS but can’t always explain why it did that.
  • Anyone who learned a framework first and never learned the language underneath.
  • Designers moving into frontend who want a system, not a stylesheet.
  • Developers who’ve used Bootstrap or Tailwind by copying examples and want to actually understand them.
  • Anyone who has to justify a technology choice to a client, a team or a reviewer.

What you will need

  • A computer, a modern browser, and VS Code with Live Server.
  • A project of your own with at least four pages of real content (the HTML course’s project is ideal).
  • Basic HTML — take AI-Powered HTML & Frontend Web Development first if you don’t have it.
  • Git and Node.js for Part 2 (for the Tailwind build).

Register for this course

Already have a bLMs account? Use the same email and password, and we’ll add this course to it. Fields marked * are required.

At least 8 characters. You’ll use it to sign in to bLMs.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

By registering you agree to our privacy policy.