CSS

TL;DR

A linguagem de estilo da web — cascade, box model, layout (Flexbox, Grid, Subgrid), responsividade (container queries), design tokens (custom properties, dark mode), seletores modernos (:has(), nesting), animações, arquitetura de estilos e utility-first (Tailwind). A marcação vive em HTML.

Trilha — 13 notas, 3 fases

Iniciado

• 01 — O modelo mental do CSS — cascade, especificidade, herança, box model, stacking context
• 02 — Unidades, cores e tipografia — rem/em/px/svh, oklch, clamp(), font-display
• 03 — Flexbox — eixos, flex-grow/shrink/basis, gap, patterns de navbar/card
• 04 — CSS Grid — fr/repeat/minmax, auto-fit vs auto-fill, template-areas, subgrid

Adepto

• 05 — Especificidade, cascade e @layer — algoritmo completo, :is()/:where(), @layer, isolamento de terceiros
• 06 — Design responsivo — mobile-first, container queries, prefers-reduced-motion, logical properties
• 07 — Custom properties e design tokens — escopo DOM, tokens semânticos, @property animável, dark mode
• 08 — Seletores modernos — :has() parent selector, :is()/:where(), :not(), CSS nesting
• 09 — Animações e transitions — transition vs @keyframes, GPU-only props, prefers-reduced-motion, @property

Magus

• 10 — Tailwind CSS 4 — utility-first, v4 engine Rust, @theme, group/peer, dark mode
• 11 — Arquitetura de estilos — CSS Modules, styled-components, vanilla-extract, ITCSS
• 12 — Performance CSS — critical CSS, contain, content-visibility, CLS, Core Web Vitals
• 13 — CSS em entrevista — mapa mental, top 10 perguntas, armadilhas clássicas, checklist

Veja também

• HTML · React · Tooling e Build