# 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