CSS

Give your pages some style

CSS turns a raw document into a polished interface. Selectors, the box model, Flexbox, Grid and responsive design, then animations and CSS architecture: this track covers everything you need to style with method.

Foundations

Beginner - the basics, step by step

• Linking CSS to a pageDiscover what CSS is, how to connect it to an HTML page, and how to write your very first rule.
• Basic selectors and colorsLearn to target elements precisely with element, class and id selectors, then apply colors to them.
• The box modelUnderstand how every element is a box made of content, padding, border and margin, and master box-sizing.
• Text and fontsPick a font with font-family, then adjust the size, weight and line spacing for text that is pleasant to read.
• First layoutsTell block elements apart from inline elements and learn the classic techniques for centering an element.

Progression

Intermediate - build real things

• Cascade, specificity, and inheritanceLearn to predict which CSS rule wins using specificity, and leverage inheritance to write less code.
• Flexbox: axes, justify/align, gap, flex-growMaster Flexbox's two axes to align, center, and distribute your elements in everyday layouts.
• Grid: columns, rows, areasBuild galleries and complete page layouts with CSS Grid's columns, rows, and named areas.
• Positioning: relative, absolute, fixed, sticky, z-indexAnchor badges, headers, and modals exactly where you want them with CSS positions and a well-managed z-index scale.
• Responsive design: media queries, relative unitsAdapt your interfaces to every screen size with the mobile-first approach, media queries, and the rem, %, and vw units.

Advanced

Proficient - advanced patterns and performance

• CSS variables and the calc/clamp functionsMaster custom properties, how they resolve at runtime within the cascade, and the calc() and clamp() functions for fluid interfaces.
• Transitions and animations: @keyframes, transform, timingAnimate on the compositor with transform and opacity, structure your @keyframes, and respect users' motion preferences.
• Modern selectors: :has, :is, :where, advanced :nth-childLeverage the recent functional pseudo-classes to select based on content, group selectors without inflating specificity, and target complex patterns.
• CSS architecture: BEM, utility-first, file organizationCompare BEM and the utility-first approach, their real trade-offs in a team, and structure your files with cascade layers.
• Container queries and CSS nestingMake your components responsive to their container rather than the viewport, and structure your stylesheets with native nesting.

Mastery

Expert - architecture, internals and edge cases

• The rendering pipeline: reflow, repaint, compositingUnderstand the four phases of browser rendering so you know exactly which CSS properties are expensive and how will-change works under the hood.
• Cascade layers (@layer) and @scopeMaster the two new cascade criteria - layers and scope proximity - to architect your styles without specificity wars.
• Colors and advanced functions: oklch, color-mix, min/maxLeverage perceptual color spaces, relative color syntax and typed math functions to build design systems the browser computes for you.
• Expert grids: subgrid, auto-fit and minmaxBuild self-adapting grids without media queries and align nested components on the parent's tracks with subgrid.
• Modern interactions: scroll-snap, view transitionsOrchestrate magnetic scrolling, browser-animated state transitions and rigorous respect for prefers-reduced-motion.