Trilha prática de frontend: HTML/CSS, JavaScript, React, consumo de API e deploy. Foco em construir interfaces reais, não só assistir aulas.
Mapa mental do roadmap
HTML semânticoestrutura e acessibilidade
HTML semântico e um topico essencial da fase "Fundamentos web" do Roadmap Frontend em 6 meses, focado em estrutura e acessibilidade. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
CSS modernoflex, grid, variáveis
CSS moderno e um topico essencial da fase "Fundamentos web" do Roadmap Frontend em 6 meses, focado em flex, grid, variáveis. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Responsivomobile-first
Responsivo e um topico essencial da fase "Fundamentos web" do Roadmap Frontend em 6 meses, focado em mobile-first. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Git + GitHubcommits e PRs
Git + GitHub e um topico essencial da fase "Fundamentos web" do Roadmap Frontend em 6 meses, focado em commits e PRs. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
JS modernoES6+, módulos
JS moderno e um topico essencial da fase "JavaScript" do Roadmap Frontend em 6 meses, focado em ES6+, módulos. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
DOM e eventosinteratividade
DOM e eventos e um topico essencial da fase "JavaScript" do Roadmap Frontend em 6 meses, focado em interatividade. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Fetch / asyncAPIs HTTP
Fetch / async e um topico essencial da fase "JavaScript" do Roadmap Frontend em 6 meses, focado em APIs HTTP. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
TypeScript básicotipos no dia a dia
TypeScript básico e um topico essencial da fase "JavaScript" do Roadmap Frontend em 6 meses, focado em tipos no dia a dia. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Reactcomponentes e estado
React e um topico essencial da fase "Framework UI" do Roadmap Frontend em 6 meses, focado em componentes e estado. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
RoteamentoSPA / Next básico
Roteamento e um topico essencial da fase "Framework UI" do Roadmap Frontend em 6 meses, focado em SPA / Next básico. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Estado globalContext ou Zustand
Estado global e um topico essencial da fase "Framework UI" do Roadmap Frontend em 6 meses, focado em Context ou Zustand. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Testes de UIVitest / Testing Library
Testes de UI e um topico essencial da fase "Framework UI" do Roadmap Frontend em 6 meses, focado em Vitest / Testing Library. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Build e otimizaçãoVite / Next
Build e otimização e um topico essencial da fase "Produção" do Roadmap Frontend em 6 meses, focado em Vite / Next. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
DeployVercel / Netlify / Pages
Deploy e um topico essencial da fase "Produção" do Roadmap Frontend em 6 meses, focado em Vercel / Netlify / Pages. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
A11y e performanceLighthouse
A11y e performance e um topico essencial da fase "Produção" do Roadmap Frontend em 6 meses, focado em Lighthouse. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Design systemcomponentes reutilizáveis
Design system e um topico essencial da fase "Produção" do Roadmap Frontend em 6 meses, focado em componentes reutilizáveis. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Detalhamento por fase
1 Fase 1 - Fundamentos web
Objetivo da fase: consolidar o aprendizado pratico de fundamentos web.
HTML semântico - estrutura e acessibilidadeessencial
HTML semântico e um topico essencial da fase "Fundamentos web" do Roadmap Frontend em 6 meses, focado em estrutura e acessibilidade. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
CSS moderno - flex, grid, variáveisessencial
CSS moderno e um topico essencial da fase "Fundamentos web" do Roadmap Frontend em 6 meses, focado em flex, grid, variáveis. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Responsivo - mobile-firstessencial
Responsivo e um topico essencial da fase "Fundamentos web" do Roadmap Frontend em 6 meses, focado em mobile-first. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Git + GitHub - commits e PRsessencial
Git + GitHub e um topico essencial da fase "Fundamentos web" do Roadmap Frontend em 6 meses, focado em commits e PRs. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
2 Fase 2 - JavaScript
Objetivo da fase: consolidar o aprendizado pratico de javascript.
JS moderno - ES6+, módulosessencial
JS moderno e um topico essencial da fase "JavaScript" do Roadmap Frontend em 6 meses, focado em ES6+, módulos. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
DOM e eventos - interatividadeessencial
DOM e eventos e um topico essencial da fase "JavaScript" do Roadmap Frontend em 6 meses, focado em interatividade. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Fetch / async - APIs HTTPessencial
Fetch / async e um topico essencial da fase "JavaScript" do Roadmap Frontend em 6 meses, focado em APIs HTTP. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
TypeScript básico - tipos no dia a diaopcional
TypeScript básico e um topico essencial da fase "JavaScript" do Roadmap Frontend em 6 meses, focado em tipos no dia a dia. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
3 Fase 3 - Framework UI
Objetivo da fase: consolidar o aprendizado pratico de framework ui.
React - componentes e estadoessencial
React e um topico essencial da fase "Framework UI" do Roadmap Frontend em 6 meses, focado em componentes e estado. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Roteamento - SPA / Next básicoessencial
Roteamento e um topico essencial da fase "Framework UI" do Roadmap Frontend em 6 meses, focado em SPA / Next básico. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Estado global - Context ou Zustandopcional
Estado global e um topico essencial da fase "Framework UI" do Roadmap Frontend em 6 meses, focado em Context ou Zustand. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Testes de UI - Vitest / Testing Libraryopcional
Testes de UI e um topico essencial da fase "Framework UI" do Roadmap Frontend em 6 meses, focado em Vitest / Testing Library. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
4 Fase 4 - Produção
Objetivo da fase: consolidar o aprendizado pratico de produção.
Build e otimização - Vite / Nextessencial
Build e otimização e um topico essencial da fase "Produção" do Roadmap Frontend em 6 meses, focado em Vite / Next. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Deploy - Vercel / Netlify / Pagesessencial
Deploy e um topico essencial da fase "Produção" do Roadmap Frontend em 6 meses, focado em Vercel / Netlify / Pages. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
A11y e performance - Lighthouseessencial
A11y e performance e um topico essencial da fase "Produção" do Roadmap Frontend em 6 meses, focado em Lighthouse. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Design system - componentes reutilizáveisopcional
Design system e um topico essencial da fase "Produção" do Roadmap Frontend em 6 meses, focado em componentes reutilizáveis. Para dominar este conceito, recomenda-se criar um projeto pratico no GitHub e testar implementacoes reais.
Perguntas frequentes
Quanto tempo leva para concluir o Roadmap Frontend em 6 meses?
O tempo estimado e de ~6 meses, dependendo da dedicacao diaria e pratica constante.
Por onde comecar do zero absoluto?
Inicie pela Fase 1 pelos nos marcados como essenciais antes de avancar para topicos avancados.
Como usar este roadmap
- Siga as fases na ordem — pular fundamentos cria buracos difíceis de fechar depois.
- Cada nó essencial precisa de um artefato: repo, deploy, checklist marcado ou demo.
- Ajuste o ritmo à sua rotina; a métrica é entrega, não data no calendário.
- Volte aos nós opcionais quando o núcleo estiver sólido.