OpenClaw Diego
63 lines
2.0 KiB
Markdown
63 lines
2.0 KiB
Markdown
# 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
|