front-end-aline

Roadmap de HTML, CSS e JavaScript (Do Básico ao Avançado)

HTML – Todas as Tags e Conceitos Avançados

1. Estrutura Básica – html, head, body, title, meta
2. Textos – h1-h6, p, strong, em, mark, small, del, ins, sub, sup
3. Listas – ul, ol, li, dl, dt, dd
4. Links e Navegação – a, target, rel
5. Imagens e Multimídia – img, audio, video, source
6. Tabelas – table, tr, td, th, thead, tbody, tfoot, colspan, rowspan
7. Formulários – form, input, label, button, select, option, textarea
8. Elementos Semânticos – header, nav, section, article, aside, footer, main, figure, figcaption
9. Outros Elementos – iframe, script, noscript, details, summary
10. Exercícios Práticos – Aplicação das tags essenciais
11. Novos Elementos HTML5 – canvas, progress, meter, time, output
12. Formulários Avançados – input types (date, range, color), pattern, required, autocomplete
13. Microdata e Schema.org – Estruturação de dados para SEO avançado
14. APIs do HTML5 – localStorage, sessionStorage, geolocation, drag & drop, history API
15. Acessibilidade (A11Y) – aria-label, role, tabindex, alt

CSS – Todas as Propriedades e Recursos Avançados

16. Seletores – elemento, classe, id, agrupamento
17. Cores e Fundos – color, background-color, background-image
18. Tipografia – font-size, font-family, text-align, line-height
19. Box Model – margin, padding, border, width, height
20. Display e Posicionamento – display, position, top, right, left, bottom
21. Flexbox – display: flex, justify-content, align-items, flex-wrap
22. Grid Layout – display: grid, grid-template-rows, grid-template-columns
23. Animações e Transições – transition, animation, keyframes
24. Pseudo-classes e Pseudo-elementos – :hover, :focus, ::before, ::after
25. Exercícios Práticos – Aplicação das propriedades CSS
26. CSS Variables (Custom Properties) – --var, var(--name)
27. CSS Grid Avançado – grid-template-areas, grid-auto-flow, minmax()
28. Flexbox Avançado – flex-grow, flex-shrink, flex-basis, align-self
29. Media Queries Avançadas – max-width, min-width, prefers-color-scheme
30. Dark Mode com CSS – @media (prefers-color-scheme: dark)
31. SASS/SCSS – Uso de pré-processadores CSS
32. Design Responsivo Profundo – clamp(), aspect-ratio, object-fit
33. CSS Avançado para Performance – Evitar reflows e repaints

JavaScript – Todas as Funcionalidades e Conceitos Avançados

34. Sintaxe Básica – var, let, const, string, number, boolean
35. Manipulação do DOM – document.querySelector, innerHTML, classList
36. Eventos – onclick, onmouseover, onkeydown
37. Funções – function, arrow function
38. Condicionais e Loops – if, else, switch, for, while
39. Arrays e Objetos – array, object, push, pop, map, filter
40. Manipulação de Formulários – submit, preventDefault
41. APIs e Fetch – fetch, then, async, await
42. LocalStorage e Sessão – localStorage, sessionStorage
43. Exercícios Práticos – Projetos com JavaScript
44. ES6+ Features – let, const, arrow functions, template literals, destructuring
45. Programação Assíncrona – async/await, Promises, fetch API
46. Manipulação Avançada do DOM – MutationObserver, IntersectionObserver
47. Event Delegation e Bubbling – Otimização de eventos com event.target
48. WebSockets e Tempo Real – Comunicação bidirecional via WebSockets`
49. Service Workers e PWA – Criando aplicações offline com cache
50. Webpack e Modularização – Importação dinâmica de arquivos JS
51. Testes Automatizados – Jest e Cypress para testes frontend
52. Otimização de Performance – Debounce, Throttle, Lazy Loading`
53. Manipulação de Banco de Dados com IndexedDB – Armazenamento local eficiente