Trilha Front-end 2026

Um roteiro honesto para sair do zero a um front-end empregável. A regra de ouro: fundamentos antes de framework. Quem pula essa parte vira refém da ferramenta e trava quando algo foge do tutorial.

Como usar esta trilha: faça uma etapa por vez, construindo o projeto sugerido antes de avançar. Saber a teoria não conta — construir conta.

Etapa 1 — Fundamentos da Web (3-5 semanas)

O alicerce que nunca sai de moda.

Como a web funciona: HTTP, DNS, navegador, cliente/servidor
HTML semântico e acessibilidade básica
CSS: box model, Flexbox, Grid, responsividade, Container Queries

Projeto: uma landing page responsiva de verdade, sem framework, publicada na web.

Recursos:

MDN Web Docs — a referência oficial da web (em português)
The Odin Project — currículo gratuito e completo
web.dev — guias do time do Chrome (HTML, CSS, acessibilidade)
Kevin Powell (YouTube) — o melhor pra CSS

Etapa 2 — JavaScript de verdade (6-8 semanas)

Aqui mora a diferença entre quem “mexe com site” e quem programa.

Tipos, funções, escopo, closures, this
DOM e eventos
Assíncrono: Promises, async/await, fetch
ES Modules e recursos modernos (ES2025)

Projeto: um app que consome uma API pública (ex: clima, filmes) com estados de carregando/erro.

Recursos:

javascript.info — o guia moderno e profundo de JS
freeCodeCamp — exercícios práticos, gratuito e em português
MDN — Guia de JavaScript

Etapa 3 — TypeScript + Framework (8-10 semanas)

Com a base firme, acelere com as ferramentas do mercado.

TypeScript essencial (hoje padrão de mercado)
Um framework: React, Vue ou Svelte (React tem mais vagas)
Gerência de estado, componentes, roteamento
Consumo de APIs (REST e GraphQL)

Projeto: um app com várias telas, autenticação e dados reais.

Recursos:

TypeScript Handbook — doc oficial
React — documentação oficial (nova) — excelente, com exercícios
roadmap.sh/frontend — mapa visual de tudo que existe

Etapa 4 — Qualidade, Performance e Deploy (4 semanas)

O que separa o júnior do pleno.

Testes (unitário e de componente — Vitest, Testing Library)
Performance e Core Web Vitals (LCP, CLS, INP)
Build, Git e deploy
Noções de SEO e acessibilidade avançada

Projeto final: publique algo seu no ar (Vercel, Netlify ou DigitalOcean) e compartilhe no GitHub. Veja o tutorial de deploy.

Recursos:

web.dev — Performance — medir e otimizar
PageSpeed Insights — ferramenta de medição real
Frontend Masters — cursos aprofundados (pago, referência)

Depois da trilha

Você está pronto para a carreira de Front-end Developer. Próximos passos: aprofundar em um framework, estudar design systems, ou expandir para full-stack aprendendo back-end.

Dica de builder: um portfólio com 3 projetos reais no ar vale mais que 30 certificados. Construa em público.