Curso Completo de CSS: Dominando a Arte dos Layouts
Do zero ao nível profissional avançado. Desenvolva o modelo mental de cascata, especificidade, Box Model, Flexbox, Grid, CSS Moderno (:has, Nesting, @layer), Acessibilidade e Performance. Sem memorização decorada: aprendizado baseado em modelo mental, analogias visuais e projetos reais.
Módulo 1 — Fundamentos da Web
Como HTML, CSS e JS trabalham juntos, renderização no navegador, VS Code, DevTools, tipos de inclusão e sintaxe.
Módulo 2 — Seletores, Cascata & Especificidade
Seletores de elemento, classe, ID, atributos, combinadores, pseudoclasses, pseudoelementos, especificidade e herança.
O Cálculo da Especificidade: A Hierarquia de Pesos
Aprenda como o navegador decide qual regra vence quando há conflito de estilos.
Módulo 3 — Cores, Unidades & Valores
HEX, RGB, HSL, unidades absolutas vs relativas (em, rem), viewport (vw, vh, dvh), calc(), clamp() e Variáveis CSS.
Unidades Relativas: Por que REM é Rei da Acessibilidade
Nunca mais use PX para tamanho de fonte. Entenda como REM respeita as preferências do usuário.
Módulo 4 — Box Model & Espaçamento
Content, padding, border, margin, colapso de margens, box-sizing: border-box, limites de largura, sombras e overflow.
A Anatomia da Caixa no CSS
Domine as 4 camadas de todo elemento na web.
Módulo 5 — Texto & Tipografia Avançada
Fontes de sistema, Google Fonts, @font-face, line-height, letter-spacing, controle de overflow e performance.
Tipografia Profissional e Otimização de Fontes
Melhore a legibilidade e evite o piscar de tela (FOUT/FOIT) ao carregar fontes web.
Módulo 6 — Backgrounds, Imagens & Efeitos Visuais
Gradientes, múltiplos backgrounds, object-fit, object-position, clip-path, sombras, filtros de desfoque e máscaras.
object-fit: cover vs contain
Aprenda a controlar como imagens de usuários se adaptam a containers de tamanho fixo sem distorcer.
Módulo 7 — Fluxo, Posicionamento & Z-Index
Fluxo normal, display (block, inline, inline-block), relative, absolute, fixed, sticky, contextos de empilhamento (stacking context).
Entendendo Stacking Context e Z-Index
Por que definir z-index: 9999 nem sempre funciona e como corrigir a sobreposição de elementos.
Módulo 8 — Flexbox: Layouts Unidimensionais
Eixo principal vs transversal, justify-content, align-items, flex-wrap, gap, flex-grow, flex-shrink e flex-basis.
Modelo Mental de Flexbox: Eixo Principal e Transversal
Aprenda a controlar o alinhamento com maestria sem adivinhar propriedades.
Módulo 9 — CSS Grid: Layouts Bidimensionais
Linhas, colunas, unidades fr, minmax(), repeat(), auto-fit vs auto-fill, grid-template-areas e Subgrid.
Grid Responsivo Sem Media Queries com auto-fit e minmax()
O padrão mágico de CSS Grid para criar cards flexíveis automáticos.
Módulo 10 — Design Responsivo Moderno
Mobile First, Media Queries, Breakpoints por conteúdo, Container Queries (@container) e preferências do usuário.
Container Queries: A Revolução dos Componentes Responsivos
Aprenda a adaptar um card com base no tamanho do seu container pai, e não da tela do celular.
Módulo 11 — Formulários & Componentes de UI
Inputs, radios, checkboxes customizados, estados de foco acessíveis, cards, menus, modais e skeleton loading.
Estilização de Formulários & Estados de Foco Visíveis
Como estilizar formulários elegantes sem quebrar a acessibilidade via teclado.
Módulo 12 — Transformações & Animações 60 FPS
Transformações 2D/3D, transitions, @keyframes, timing functions, prefers-reduced-motion e performance de GPU.
Animações de Alta Performance na GPU (transform e opacity)
Evite animações travadas e lentas utilizando apenas propriedades aceleradas por hardware.
Módulo 13 — Arquitetura, Metodologias & Modo Escuro
Convenção BEM, ITCSS, Design Tokens, temas com modo claro/escuro nativo, resets e estrutura de pastas.
Metodologia BEM (Block, Element, Modifier)
Organize classes CSS de projetos gigantescos sem colisão de nomes.
Módulo 14 — CSS Moderno & Avançado (:has, Nesting, @layer)
Pseudoclasse :has() (O seletor pai), :is(), :where(), Nesting nativo, Cascade Layers (@layer) e Scroll-driven animations.
A Revolução da Pseudoclasse :has()
Selecione elementos pais com base em seus filhos usando o recurso mais aguardado do CSS moderno.
Módulo 15 — Acessibilidade em CSS (WCAG & Usabilidade)
Contraste de cores, navegação por teclado, ocultação visual acessível (.sr-only), movimento reduzido e testes.
Classe .sr-only: Ocultar para os olhos, manter para leitores
Como esconder elementos da tela sem removê-los da tecnologia assistiva.
Módulo 16 — Performance, Renderização & Core Web Vitals
Reflow, Repaint, Composição, CSS Crítico, minificação, Autoprefixer, Linters e métricas LCP/CLS/INP.
Como o Navegador Pinta a Tela (Reflow vs Repaint)
Entenda a Pipeline de Renderização para eliminar travamentos e melhorar a nota do Google PageSpeed.
Módulo 17 — Projetos Práticos Passo a Passo
Perfil pessoal, Landing Page responsiva, Dashboard administrativo, E-commerce e Biblioteca de Componentes.
Projeto Prático: Dashboard Administrativo com Modo Escuro
Construa um dashboard profissional completo do zero usando CSS Grid, Flexbox e Variáveis.
Módulo 18 — Preparação Profissional & Figma to Code
Do Figma ao código limpo, revisão de código em equipe, Git, refatoração de CSS legado e portfólio profissional.
Como Converter Designs do Figma para CSS de Alta Qualidade
Aprenda o fluxo de trabalho exato usado por desenvolvedores frontend sênior em empresas globais.