Add study notes: 22 areas documented by Diego IA

study/html-css.md

@@ -0,0 +1,62 @@
+# HTML & CSS — Estudo
+
+_Fonte: project-based-learning_
+
+---
+
+## 📚 Recursos Estudados
+
+| Tutorial | Conceito |
+|----------|----------|
+| [Loading Screen](https://medium.freecodecamp.org/how-to-build-a-delightful-loading-screen-in-5-minutes-847991da509f) | Animações CSS, UX |
+| [HTML Calculator](https://medium.freecodecamp.org/how-to-build-an-html-calculator-app-from-scratch-using-javascript-4454b8714b98) | DOM manipulation, CSS Grid |
+| [Snake Game](https://www.freecodecamp.org/news/think-like-a-programmer-how-to-build-snake-using-only-javascript-html-and-css-7b1479c3339e/) | 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
+
+- [x] CSS Moderno (Grid, Flexbox, Container Queries)
+- [x] Animações e Transições
+- [x] Responsividade Mobile-first
+- [x] Acessibilidade Web
+- [ ] Email templates responsivos
+- [ ] Componentes reutilizáveis