Engenharia do CSS Moderno: guia visual

Section role: esta apresentação apoia a Seção 3 ('A Engenharia do CSS Moderno') enquanto o professor sistematiza os conceitos e introduz novas ferramentas, utilizando os resultados do desafio anterior como ponto de partida. Slide outline: (1) Título — 'Superando Limites: A Engenharia do CSS Moderno'; (2) Do Desafio à Solução: Layouts Flexíveis — bullets: recapitula brevemente o problema de layouts fixos, apresenta a necessidade de Flexbox/Grid como solução para alinhamento (referenciando o 'desafio da interface adaptável' da Seção 2); (3) Flexbox em Ação: Alinhando Itens — bullets: visual que compara floats versus 'display: flex', exemplos visuais de 'flex-direction: row' e 'column', com vocabulário como 'main-axis' e 'cross-axis'; (4) CSS Grid: O Layout Estrutural — bullets: visual de uma grade 2x2, exemplo de sintaxe 'grid-template-columns: 1fr 1fr', comparativo visual entre Flexbox (uma dimensão) e Grid (duas dimensões); (5) Design Responsivo: As Media Queries — bullets: o que são 'breakpoints', sintaxe de um exemplo '@media (max-width: 768px)', visual de um site adaptando-se em diferentes telas; (6) CSS com Superpoderes: Pré-processadores (SASS) — bullets: o que é SASS, benefícios (variáveis, aninhamento), exemplo de 'variáveis SASS' comparado ao CSS puro; (7) Acelerando o Desenvolvimento: Frameworks — bullets: introdução a Bootstrap e Tailwind, o que são 'kits de ferramentas', como agilizam o projeto; (8) Recapitulando as Ferramentas Modernas — bullets: resume Flexbox, Grid, Media Queries, SASS e Frameworks, reforçando quando usar cada um. Closing slide: 'Qual dessas ferramentas você acredita que resolveria melhor o problema do layout da nossa loja virtual?' — convida à reflexão e prepara para a avaliação da Seção 4.