Do zero ao frontend avançado, uma etapa de cada vez
Um mapa honesto para aprender desenvolvimento frontend: aprenda a plataforma, escreva JavaScript e TypeScript de verdade, domine um framework e prove que sua UI funciona. Marque cada item — seu progresso fica salvo neste navegador.
Progresso total
—
carregando…
Seu nível agora
Framework dos exemplos
As 7 etapas, em ordem
Cada etapa se apoia na anterior. Expanda para ver o que aprender, o que construir e quando você está pronto para avançar.
O que aprender
O que construir
Pronto para avançar quando: Você explica layout, semântica, eventos e requisições de rede sem depender de um framework.
O que priorizar em cada nível
A rota é a mesma; o que muda é onde gastar energia. Seu nível selecionado fica destacado.
Iniciante
vocêMais: HTML, CSS, JavaScript, um framework, projetos de portfólio.
Menos: Debates de framework, bibliotecas de estado avançadas, microfrontends.
Júnior / Estágio
Mais: Formulários, integração de API, debugging, TypeScript básico, prática de entrevista.
Menos: Diagramas de arquitetura complexos.
Pleno
Mais: Ownership de feature, modelagem de estado, testes, acessibilidade, performance.
Menos: Copiar tutoriais.
Sênior
Mais: Trade-offs, system design, migrações, contratos entre times, debugging em produção.
Menos: Apps isolados de brinquedo.
Especialista
Mais: Uma área de profundidade: design systems, infra de frontend, acessibilidade ou performance.
Menos: Tentar se especializar antes de entregar UI de produto.
Projetos-âncora por etapa
Um projeto que prova cada etapa. Construa, publique e escreva uma nota de engenharia para cada um.
Fluxo de formulário acessível
Labels, validação, comportamento de teclado, layout responsivo.
Tabela de dados pesquisável
Fetch, ordenação, filtro, paginação, estado vazio.
Dashboard alimentado por API
Resposta tipada, modelo de erro, componentes reutilizáveis.
App de configurações de produto
Tabs, formulários, save otimista, aviso de alterações não salvas.
Mini fluxo de SaaS
Estados de auth, roteamento, permissões, fluxo tipo billing, testes.
Passada de performance e acessibilidade
Notas de antes/depois, auditoria de teclado, testes críticos.
Desafios de UI cronometrados
Solução explicável, edge cases, cleanup, melhorias de follow-up.
Nota de engenharia
Para cada projeto, responda a estas perguntas. É isso que separa um portfólio de uma coleção de demos — e o texto abaixo fica salvo no seu navegador.
Ferramentas na ordem certa
Aprenda o essencial primeiro. Adicione o resto quando um problema real pedir — não antes.
Primeiro
O mínimo para trabalhar com confiança.
- Editor + extensõesVS Code, formatação e lint no salvar.
- Navegador + DevToolsElements, Console, Network, Application, Lighthouse.
- Git e GitHubCommits pequenos, branches, pull requests.
- npm / pnpmInstalar, rodar scripts, entender o package.json.
- MDNDocumentação de referência da plataforma web.
Depois
Adicione conforme a necessidade aparece.
- Bundler / dev serverVite ou o build do meta-framework escolhido.
- Biblioteca de testesVitest/Jest, Testing Library, Playwright.
- Data fetching / cacheSWR, TanStack Query — depois de entender fetch.
- Design system / estilosTailwind, tokens, componentes acessíveis.
- CI e deployPipelines, previews, monitoramento básico.
Erros comuns que atrasam a evolução
Todo mundo tropeça em pelo menos um destes. Reconhecer cedo economiza meses.
- 1Aprender um framework antes de formulários, eventos e layout em CSS fazerem sentido.
- 2Buscar uma biblioteca de estado antes de entender estado local, de URL e de servidor.
- 3Construir só landing pages, sem estados de loading, erro ou vazio.
- 4Tratar TypeScript como sintaxe em vez de forma de modelar dados não confiáveis.
- 5Usar IA para gerar código que você não consegue depurar.
- 6Deixar acessibilidade para o final.
- 7Escrever testes só depois que o código já ficou emaranhado.
- 8Estudar system design antes de construir UI suficiente para ter opinião própria.
- 9Trocar de framework toda vez que uma novidade bomba.
Plano de estudo de 12 meses
Uma referência de ritmo, não um prazo rígido. Ajuste ao seu tempo disponível — o importante é a ordem e os entregáveis.
Semanas 1–4
Navegador, HTML, CSS, JavaScript básico
Entregável: Formulário responsivo e widget com API.
Semanas 5–8
JavaScript avançado e comportamento do DOM
Entregável: Tabela pesquisável, busca com debounce, estado persistido.
Semanas 9–12
TypeScript e fundamentos de framework
Entregável: Componentes tipados e fluxo de formulário.
Meses 4–5
Arquitetura de aplicação
Entregável: App multi-página com roteamento, estados de auth, dados de API e tratamento de erro.
Mês 6
Passada de qualidade
Entregável: Testes, correções de acessibilidade, notas de performance, portfólio publicado.
Meses 7–12
Entrevistas e profundidade
Entregável: Prática de entrevista, system design, projetos mais fortes, exploração de especialização.
Áreas de entrevista para praticar
Comece por questões rápidas de cada área, depois UI coding real e só então system design.
JavaScript
closures · event loopArrays, objetos, promises, closures, timers, event loop, DOM.
CSS
flex · grid · z-indexLayout, responsividade, especificidade, posicionamento, estados acessíveis.
Framework
reactReact: estado local vs. context, efeitos e cleanup, keys em listas, formulários controlados, memoização quando medida, error boundaries.
depende do frameworkAPIs
REST · status · retryREST, status codes, paginação, cache, retries, estados de erro.
TypeScript
unions · genericsProps de componente, unions, generics, narrowing, dados de API.
UI coding
tabs · autocompleteFormulários, tabelas, autocomplete, tabs, carousel, file explorer.
System design
data flow · failureFluxo de dados, fronteiras de componente, performance, acessibilidade, modos de falha.