Identificação
Resumo
A aula 10 fecha o bloco de front-end. CSS moderno entra em escala: CSS Variables com tematização (claro/escuro), Flexbox e Grid para layout, mobile-first com clamp(), transitions performáticas animando apenas transform e opacity. A organização ganha BEM (.card__title, .card--featured) — convenções que tornam o CSS legível por toda a equipe.
No JS, salto de nível: ES Modules nativos no browser (<script type="module">), destructuring/spread/rest, optional chaining, classes ES, closures, persistência com localStorage, envio de forms com FormData + fetch() e delegação de eventos. Tudo aplicado ao projeto integrador.
Objetivos de aprendizagem
- OA-1Aplicar CSS Variables com escopo dinâmico (tematização claro/escuro via atributo
data-theme). - OA-2Compor layouts com Flexbox e Grid responsivos seguindo a abordagem mobile-first.
- OA-3Estruturar CSS com BEM em componentes reutilizáveis (
block__element--modifier). - OA-4Usar ES Modules nativos no browser (
<script type="module">,import/export). - OA-5Manipular dados com destructuring/spread, classes ES e closures.
- OA-6Persistir preferências do usuário com
localStoragee enviar formulários viaFormData+fetch().
Pré-requisitos
- Aula 7 concluída: SSR com EJS, partials e DOM funcionando no projeto.
- Aula 8 concluída: pelo menos 1 interação dinâmica com
fetch()+ estados loading/empty/error. - Aula 9 concluída: suite de testes por camada e workflow de CI verdes — a refatoração visual de hoje não pode quebrá-los.
- Repositório com
public/css/epublic/js/servidos porexpress.static.
Cronograma do dia
📚 Bloco 1 · Autoestudo
08h00 — 10h00Estudo individual orientado pelo material da aula 10.
- Leitura completa do Material da Aula 10 (CSS Variables, Grid/Flex, BEM, ESM, localStorage, FormData).
- Identificar 5 componentes visuais reaproveitáveis no projeto (ex.: card, badge, botão, modal, navbar) e nomeá-los em BEM.
- Mapear os breakpoints que o projeto vai suportar (mobile, tablet, desktop) e quais ajustes cada um exige.
- Caderno de bordo: anotar 1 dúvida sobre BEM e 1 sobre ESM.
🎓 Bloco 2 · Instrução PE — Aula em metodologia ativa
10h00 — 12h00Encontro síncrono com o professor especialista. 15 minutos de daily seguidos de 1h45 de aula em live-coding.
- 10h00 — 10h15 · Daily: os 5 componentes e os breakpoints trazidos do autoestudo.
- 10h15 — 12h00 · CSS Variables + tematização, Grid/Flex, mobile-first, transitions, BEM, ESM, classes ES, localStorage e FormData.
🍴 Intervalo · Almoço
12h00 — 14h00Janela livre.
🛠️ Bloco 3 · Desenvolvimento do projeto
14h00 — 16h00Janela de trabalho da equipe sobre o projeto integrador.
- Refatorar o CSS principal para usar CSS Variables + BEM + Grid em pelo menos 1 página.
- Adicionar tema escuro com toggle visível na navbar; persistir a preferência via
localStorage. - Reorganizar os scripts client-side em ES Modules com
<script type="module">. - Abrir Merge Request
feat(ui): design system + tema escurocom print/gif do toggle até as 16h00.
Detalhamento da instrução PE (10h00 — 12h00)
10h15
DailyDaily de abertura
Cada aluno apresenta, em 1 minuto, um dos 5 componentes mapeados e como ele será nomeado em BEM (ex.: .card, .card__title, .card--featured).
10h30
CodingCSS Variables + tematização
Live-coding: declarar variáveis no :root e sobrescrever em [data-theme="dark"]. Toggle no JS troca o atributo no <html> e o tema responde inteiro de uma vez.
10h50
CodingGrid 12 colunas + Flexbox em nav
Pair programming: construir um layout principal com Grid de 12 colunas (template-areas) e a navbar interna com Flexbox. Discussão sobre quando preferir um ou outro.
11h05
TalkMobile-first + clamp()
Por que começar pelo menor breakpoint e adicionar media queries só para cima. Demo de tipografia fluida com clamp(): tamanho cresce suave entre mobile e desktop sem múltiplas media queries.
11h20
CodingTransitions performáticas
Por que animar transform e opacity em vez de top/width (compositor da GPU vs reflow). Live-coding de um hover com transição suave e medição no DevTools (Performance).
11h35
AtivaBEM aplicado a componente real
Em duplas: pegar um componente desorganizado do projeto e refatorar para BEM (.card, .card__title, .card--featured). Code review cruzado entre 2 duplas.
11h50
CodingESM + classes + localStorage + FormData
Live-coding rápido: <script type="module">, import/export, classe ThemeManager com localStorage, e envio de form via FormData + fetch() reutilizando o endpoint dual da aula 8.
12h00
AtivaSíntese
Debate-relâmpago: "BEM vs utility-first". Cada aluno escreve 1 frase de fechamento e o professor anuncia que a aula 11 fecha o módulo mergulhando na infraestrutura de redes.
Estratégias de metodologia ativa
- Redesign coletivo de um componente — turma escolhe um componente desalinhado do próprio projeto e o reconstrói em BEM + Variables + Grid em quadro/editor compartilhado.
- Code review cruzado de BEM — duplas trocam o CSS refatorado e marcam violações de nomenclatura antes do professor revisar; aprendizagem por leitura.
- Debate "BEM vs utility-first" — discussão guiada com argumentos de ambos os lados antes de o professor sintetizar quando cada abordagem cabe melhor.
Recursos e ferramentas
| Categoria | Recurso | Uso |
|---|---|---|
| Slides | slides/slide-lesson-10.html | Exposição na instrução PE |
| Material | materials/lesson-10-material.html | Autoestudo |
| Browser | DevTools — abas Computed e Layout | Inspeção de cascata, grid e responsividade |
| Repositório | public/css/ | Variables, BEM, Grid, transitions |
| Repositório | public/js/ | ESM, classes, localStorage, FormData |
| Backend | src/controllers/ + src/services/ | Endpoint dual da aula 8 reusado para FormData |
Verificação de aprendizagem
- CR-1CSS Variables aplicadas com tema escuro funcional via toggle visível na navbar.
- CR-2Layout principal usando Grid + Flexbox responsivo seguindo abordagem mobile-first.
- CR-3Pelo menos 1 componente refatorado em padrão BEM (
block__element--modifier). - CR-4ESM no browser em uso (
<script type="module">+import/exportentre arquivos). - CR-5Merge Request
feat(ui): design system + tema escuroaberto até as 16h00, com preferência de tema persistida vialocalStorage.
Aluno que sair às 16h sem tema escuro persistido ou sem ao menos 1 componente em BEM está em débito técnico para o fechamento do módulo — e a suite de testes da aula 9 deve continuar verde após a refatoração visual.
Conexão com a aula 11
Toda a stack está pronta e protegida: banco, back TypeScript em 6 camadas, SSR com EJS, fetch, testes com CI verde e front profissional. A aula 11 fecha o módulo olhando para baixo da nossa stack: a infraestrutura de redes — TCP/IP, DNS, HTTPS+TLS, CDN, cache HTTP e padrões de tolerância a falhas — que sustenta tudo em produção.
- Os assets do design system criado hoje (CSS, JS, imagens) são os primeiros candidatos a cache e CDN na próxima aula.
- O tema persistido em
localStoragefunciona sem rede — separar o que depende defetch()do que não depende prepara a discussão de resiliência.
Antes das 8h do próximo dia: rodar dig no domínio do projeto, ler o material da aula 11 e mapear quais respostas do back-end fazem sentido cachear (e por quanto tempo).
