Trilha · Iniciante
CSS
Layout, Flexbox, Grid e responsividade: da folha em branco à interface que se comporta em qualquer tela.
26 lições em ordem de estudo
Começando
- 01O que é CSSCSS é a camada que decide como o HTML aparece: o que é uma regra, como o navegador casa seletor com elemento e por que a ordem importa.testado
- 02Incluir CSSAs três formas de ligar CSS a uma página HTML, qual delas vence quando as três aparecem juntas e por que o link no head continua sendo a resposta.testado
Cascata e herança
- 03Seletores e cascataAprenda a encontrar elementos com seletores CSS e entenda como a cascata escolhe a regra vencedora, com uma vitrine testada no navegador.testado
- 04EspecificidadeComo o navegador conta o peso de cada seletor em três colunas, o que !important realmente faz e como sair da guerra de especificidade sem gambiarra.testado
- 05Pseudo-classesA diferença entre os dois-pontos e os quatro: estados como :hover e :focus, posição com :nth-child e conteúdo criado com ::before e ::after.testado
- 06:has()Como estilizar o pai a partir do que ele contém, com card, formulário inválido e menu aberto — mais o custo real do seletor, medido no navegador.testado
Valores e unidades
- 07UnidadesQuando cada unidade muda de valor, por que em acumula dentro de listas aninhadas e qual usar em fonte, espaçamento e largura sem quebrar o zoom.testado
- 08CoresComo escrever cor em CSS, o que muda entre hsl e oklch quando você clareia um tom e como montar uma paleta que não desbota no meio da escala.testado
- 09Variáveis CSS: custom properties na práticaComo declarar uma variável no :root, ler com var(), trocar o tema inteiro num seletor só e por que ela herda em vez de sumir no build.testado
Box model
- 10Box modelEntenda content, padding, border e margin, compare content-box com border-box e corrija um cartão que transborda com medidas reais do navegador.testado
- 11overflowO que fazer com o conteúdo que não cabe na caixa: rolagem, corte, reticências no texto e a barra que faz o layout inteiro pular para o lado.testado
- 12Fundo, borda e sombraComo pintar o fundo com cor, imagem e gradiente, arredondar cantos sem deformar e usar sombra para criar profundidade, com cada cor medida no pixel.testado
Layout
- 13displayO que cada valor de display muda em largura, altura e quebra de linha, por que padding em inline não empurra nada e o que none faz que hidden não faz.testado
- 14position no CSS: relative, absolute, fixed e stickyEm relação a quem cada posição se ancora, por que o absolute às vezes sobe até o body e as três condições que fazem o sticky realmente grudar.testado
- 15CentralizarCentralizar na horizontal, na vertical e nos dois eixos com margin auto, Flexbox, Grid, position e transform — e qual escolher em cada situação.testado
Flexbox
- 16FlexboxAprenda container, itens, eixos, gap, flex e wrap criando uma prateleira de livros, com posições e transbordamento medidos no navegador.testado
- 17AlinhamentoComo distribuir e alinhar itens nos dois eixos, a diferença entre align-items e align-content, e o gap que aposentou a margem entre os filhos.testado
- 18flex-grow, flex-shrink e flex-basis: dividir o espaçoComo a sobra e a falta de espaço são repartidas entre os itens, o que flex: 1 realmente expande e por que flex-basis vence width numa linha flex.testado
Grid
- 19CSS GridComo montar uma grade de verdade: definir colunas e linhas, repartir o espaço com fr e posicionar um item pelo número da linha, sem contar no dedo.testado
- 20grid-template-areasComo montar header, sidebar, conteúdo e rodapé com um desenho em texto e reorganizar tudo no celular trocando só três linhas de CSS.testado
- 21auto-fit e minmax()A linha de CSS que faz os cards se reorganizarem sozinhos em qualquer largura, e a diferença entre auto-fit e auto-fill que muda o resultado final.testado
Responsividade
- 22Media queriesComo escrever breakpoints que nascem do conteúdo, a sintaxe de intervalo com width >= 48rem e as consultas que não têm nada a ver com largura.testado
- 23Container queriesComo fazer um card mudar de layout pela largura do contêiner e não da tela, com container-type, @container e as unidades cqw, cqi e cqb.testado
Texto e movimento
- 24TipografiaComo escolher a pilha de fontes, acertar line-height e medida de linha, e montar uma escala tipográfica que cresce sozinha com clamp().testado
- 25transition e transformComo mover, girar e escalar sem afetar o layout, e como animar essa mudança com transition — incluindo quais propriedades são baratas de animar.testado
- 26animation e @keyframesComo escrever uma animação em keyframes, controlar repetição, direção e preenchimento, e encadear várias sem depender de setTimeout no JavaScript.testado