project-based-learning/study/html-css.md

HTML & CSS — Estudo

Fonte: project-based-learning

---

📚 Recursos Estudados

Tutorial	Conceito
Loading Screen	Animações CSS, UX
HTML Calculator	DOM manipulation, CSS Grid
Snake Game	Canvas, game loop

🎯 Aplicações para Mundo Telecom

1. Landing pages institucionais (já fizemos!)
2. Email marketing templates responsivos
3. Dashboards com CSS moderno (Grid, Flexbox)
4. Componentes reutilizáveis (cards, modais, forms)

📝 Conceitos Aprendidos

CSS Moderno

Técnica	Para que serve
Flexbox	Layouts 1D (linha/coluna)
Grid	Layouts 2D (tabelas complexas)
Custom Properties (var)	Temas, design tokens
Container Queries	Responsivo por componente
@layer	Gerenciamento de especificidade
:has()	Parent selector (finalmente!)

Animações

• @keyframes + animation: sequências complexas
• transition: micro-interações (hover, focus)
• transform: scale, rotate, translate (GPU acelerado)
• will-change: hint de performance

Responsividade

• Mobile-first: base mobile, @media pra desktop
• Fluid typography: clamp(), min(), max()
• Viewport units: dvh, svh, lvh (dynamic viewport height)

Acessibilidade

• ARIA labels, roles, live regions
• Contraste de cor (WCAG 2.1 AA/AAA)
• Navegação por teclado (tabindex, focus management)
• prefers-reduced-motion para animações

✅ Progresso

• CSS Moderno (Grid, Flexbox, Container Queries)
• Animações e Transições
• Responsividade Mobile-first
• Acessibilidade Web
• Email templates responsivos
• Componentes reutilizáveis