Comparativo visual: CSS puro, Bootstrap e Tailwind CSS

Função da seção: esta apresentação dará suporte visual ao professor enquanto ele formaliza os conceitos de layouts baseados em componentes e utilitários, consolidando o aprendizado prático do desafio do 'Enigma dos Blocos de Código' da Seção 2 e reforçando o vocabulário chave. Esquema dos slides: (1) Título — 'Bootstrap vs. Tailwind CSS: A Agilidade no Layout'; (2) O Desafio do CSS Puro — bullets: recriar um botão responsivo simples, código CSS puro para exemplo, imagem do resultado; (3) Bootstrap: Componentes Prontos — bullets: como o Bootstrap simplifica (exemplo do botão), código HTML com classes Bootstrap ('btn', 'btn-primary'), imagem do resultado; (4) Tailwind CSS: Utilitários Atômicos — bullets: como o Tailwind oferece flexibilidade (exemplo do botão), código HTML com classes Tailwind ('bg-blue-500', 'text-white', 'p-2', 'rounded'), imagem do resultado; (5) Grid System — bullets: explicação visual de como a tela é dividida em colunas em ambos, classes de grid (ex: 'col-md-6', 'grid-cols-2'); (6) Flexbox e Responsividade — bullets: como Flexbox alinha elementos, o papel dos breakpoints (ex: 'md:', 'lg:') para mobile-first; (7) Filosofias: Utility-First e Mobile-First — bullets: definição de cada filosofia e como elas se manifestam nos frameworks; (8) Conclusão e Reflexão — slide de fechamento: 'Quando usar cada framework?' — prepara os alunos para a Seção 4.

Lara da Teachy