Learning path
CSS concepts from basics to advanced
Follow this sequence to master CSS. Jump into any concept to view details or open its visualizer.
Start with foundations, then progress through layout, responsiveness, effects, motion, architecture, and Houdini. Each card links to the concept’s dedicated page and visualizer (where available).
foundation
Selectors & Specificity
Understand how selectors target elements and how specificity resolves conflicts.
Cascade & Inheritance
Dive deep into the cascade layers, inheritance rules, and how importance is calculated.
Box Model
Visualize content, padding, border, and margin with live adjustments.
Display Modes
Inline, block, inline-block, table, and flow-root behaviors and their layout effects.
Positioning
Static, relative, absolute, sticky, and fixed positioning with stacking context examples.
Flexbox Visualizer
Interactive flex playground for axes, alignment, wrapping, and gaps.
Responsive Design
Fluid design systems built with constraints, clamps, and progressive enhancement.
Media Queries
Craft media queries for viewport, accessibility preferences, and device capabilities.
Typography Lab
Experiment with font-size, line-height, letter-spacing, and rhythm.
Colors & Gradients
HSL, LCH, and gradient design with live color wheel and stops.
Borders & Shapes
Rounded corners, outlines, border-images, and creative shape utilities.
Shadows Playground
Soft shadows, inner glows, and layered elevation tokens.
Transitions
Ease functions, durations, and choreographing micro-interactions.
CSS Animations + Keyframes
Author keyframes, iteration modes, and timing with live preview.
CSS Variables (Custom Properties)
Design tokens and live theming with cascading custom properties.
Functions (calc, min, max, clamp)
Compose responsive formulas with calc(), clamp(), min(), and max().
Units (px, em, rem, vw, vh, fr, %)
Choose the right units for sizing, spacing, and layout grids.
Accessibility in CSS
Inclusive styling with focus states, reduced motion, and readable contrast.
CSS Debugging Tools
DevTools workflows for inspecting cascade, grid/flex overlays, and performance.
intermediate
Floats & Clearfix
Legacy layout tool with modern containment and clearfix recipes.
Grid Visualizer
Design explicit and implicit grids with repeat(), minmax(), and auto-fit/auto-fill.
Multi-Column Layout
Newspaper-like flows with columns, spanning, and balancing strategies.
Container Queries
Component-driven responsiveness using container size instead of viewport.
Fonts & Variable Fonts
Load, optimize, and animate variable fonts with axis sliders.
Backgrounds & Parallax
Layer multiple backgrounds, blend modes, and subtle parallax illusions.
Filters & Effects
Blur, hue-rotate, and backdrops to build glassmorphism and neon glows.
Print Styling
Craft paged media rules, margins, and print-friendly color strategies.
advanced
Clip-path & Masking
Reveal content with clip-path polygons, SVG masks, and gradient masks.
3D Transforms & Perspective
Rotate, skew, and manage perspective to create layered depth.
Motion Path (offset-path)
Animate elements along arbitrary paths with offset-path and offset-rotate.
Browser Rendering Pipeline
Understand style, layout, paint, and composite stages for predictable UI.
Reflow, Repaint & Compositing
Minimize layout thrash with batching, will-change, and compositor-only animations.
GPU Acceleration
Trigger GPU-accelerated paths safely while avoiding memory pitfalls.
CSS Architecture (BEM, OOCSS, SMACSS)
Structure scalable CSS systems with naming, layering, and composition.
Houdini API — Paint Worklet
Generate procedural backgrounds with Paint Worklets and custom properties.
Houdini API — Typed OM
Interact with CSS values as typed objects for safer runtime styling.
Houdini API — Layout API
Author custom layout algorithms that participate in normal flow.