CSS Tutorial: Box Model, Flexbox, Grid & Animations, Visually

See the box, then the page. Visual CSS chapters — box model, position, pseudo-classes, pseudo-elements, transitions, animation, Flexbox and its surprises, Grid, selectors, and units — each with a playground.

What you will learn

  • Box model, box-sizing, and margin collapse
  • Position, containing blocks, and stacking contexts
  • Pseudo-classes and pseudo-elements
  • Transitions and keyframe animation
  • Flexbox, the min-width trap, and the results that look like bugs
  • Grid tracks, auto-fit, and named areas
  • Selectors, combinators, and specificity
  • px, rem, em, %, vw, ch, and clamp()
  • Backgrounds, borders, and gradient patterns
  • Shapes with border-radius, clip-path, and conic-gradient
  • Shadows, filters, blend modes, and backdrop-filter

How it works

Move the picture, read the declaration it writes, then fix a small stylesheet until the check passes.

Chapters

More courses

  • Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
  • Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
  • React from open source with patterns — Patterns extracted from Material UI, Radix, React Aria, React Hook Form, Redux Toolkit, TanStack, and Next.js — not slides about hooks.
  • Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
  • System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
  • Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
  • Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
  • Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
  • Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
  • Docker — What an image is, why layers cache, and how containers find each other on a network.
  • Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.