Desenvolvedor Frontend
Do zero absoluto ao frontend de produção. Você começa sem nunca ter programado — lógica, terminal e Git — passa pela base da web (HTML, CSS, layout responsivo), aprende a construir interfaces de verdade com JavaScript e React, tipa tudo com TypeScript, e então entra no que separa um junior pronto pro mercado: formulários sérios, server state, Next.js, testes, performance, acessibilidade a fundo, segurança e deploy na edge. Sete projetos no caminho e a IA como par de programação desde cedo. Você termina com portfólio e código rodando em produção.
// ao concluir, você consegue
Ao terminar, você constrói e faz deploy de aplicações web completas: interfaces acessíveis e responsivas em React + TypeScript, com formulários validados ponta a ponta, server state gerenciado, renderização no servidor com Next.js, cobertura de testes, orçamento de performance, e hardening de segurança — tudo versionado no Git e publicado na edge. Sai pronto pra uma vaga de frontend junior.
// criado por
// currículo
- →Trilha
Programação do Zero
Ponto de partida pra quem nunca programou: pensamento computacional, lógica e o primeiro contato com código.
- →Projeto
Primeiro projeto: a lógica na prática
Um build pequeno logo após o primeiro código, pra fixar variáveis, condicionais e funções sem framework nenhum.
- →Trilha
Terminal para Devs
O terminal é onde o dev vive. Comandos essenciais em qualquer ambiente unix — base pra rodar projetos, ferramentas e deploy.
- →Trilha
Git
Controle de versão do zero ao avançado. Obrigatório em qualquer time e pré-requisito pra colaboração, portfólio e deploy.
- →Trilha
HTML
A estrutura de toda página web: HTML semântico, formulários e as bases de acessibilidade desde o começo.
- →Trilha
CSS Fundamentos: a Base que Tudo Sustenta
A base do estilo: seletores, box model, cascata, unidades e tipografia — o que sustenta qualquer layout.
- →Projeto
Seu primeiro site no ar
Um mini currículo online só com HTML e CSS, pra consolidar semântica e estilo antes de complicar.
- →Trilha
CSS Layout: Position, Flexbox e Grid Aprofundados
Colocar as coisas onde você quer: Position, Flexbox, Grid e responsividade — o layout que funciona no celular e no desktop.
- →Trilha
Frontend
O coração da trilha: JavaScript no browser, ferramentas, React, state e hooks, formulários e fetch, Tailwind, rotas SPA e acessibilidade. Aqui a web fica interativa.
- →Projeto
Landing Page Responsiva
Uma landing de produto impecável no mobile e no desktop com Tailwind — consolida estilização moderna e responsividade.
- →Projeto
Quiz em React
Um quiz com pontuação e tela de resultado: fixa componentes, estado e a lógica de UI em React.
- →Projeto
Clima Agora
Consuma uma API pública real e renderize os dados — o padrão fetch + estado + loading que aparece em toda app de verdade.
- →Trilha
React do Zero: Componentes, Estado e Hooks
O aprofundamento específico de React entre o generalismo da trilha `frontend` e a tipagem da `typescript`. JSX, componentes, props, estado, formulários, acessibilidade, efeitos, fetch, refs, Custom Hooks, Context, reducer, arquitetura e debugging - com 5 projetos pra consolidar.
- →Trilha
TypeScript
Tipagem estática logo depois de JavaScript, com a linguagem fresca na cabeça. TypeScript é o jeito padrão de escrever frontend no mercado.
- →Trilha
Form Libraries: React Hook Form + Zod
Formulários de produção: React Hook Form pra performance e Zod pra validação com type-safety ponta a ponta. Onde o `<form>` básico não escala.
- →Trilha
TanStack Query: server state na prática
Server state — a maior parte do estado de uma app real. Queries, mutations, cache, invalidação e optimistic updates com TanStack Query.
- →Projeto
Dashboard Analítico
Um painel com gráficos e métricas em React, juntando organização de estado, dados do servidor e atenção à performance.
- →Trilha
Next.js e Meta-frameworks
Meta-frameworks React: App Router, Server Components, Server Actions e streaming SSR. Sai da SPA pura pro frontend full-stack com SEO.
- →Trilha
Testing Frontend: Vitest, Testing Library, Playwright
Entregar com confiança: Vitest pra unit, Testing Library pra componentes, Playwright pra E2E e testes de acessibilidade em CI.
- →Trilha
Performance Web: Core Web Vitals, bundle, imagens, CDN e CI
Core Web Vitals a fundo, bundle analysis, otimização de imagens e fontes, cache e budgets em CI. Performance é arquitetura, não ajuste do fim.
- →Trilha
Acessibilidade Web: Interfaces para todas as pessoas
A11y além do introdutório: WCAG na prática, ARIA, teclado e foco, leitor de tela e auditoria automatizada. Produto usável por todas as pessoas.
- →Projeto
Auditoria de Acessibilidade Web
Escolha um fluxo real, corrija as barreiras e entregue um relatório com testes manuais e automatizados — a11y como prática, não teoria.
- →Trilha
Seguranca Frontend: XSS, CSRF, CSP, CORS, storage seguro e supply chain
Escrever frontend sem abrir brechas: XSS, CSRF, CORS, CSP, storage seguro e supply chain. As vulnerabilidades que acontecem no browser e no bundle.
- →Trilha
Edge Deploy Frontend: build, runtime, Cloudflare Workers, Vercel Edge, image opt, preview envs, atomic deploys
Pra onde o código vai depois do build: runtime edge, ISR, otimização na edge, preview por PR e deploy atômico. Sua app no ar de verdade.
- →Trilha
Engenharia assistida por IA: Claude Code, Cursor, Copilot, audit, testes e refactor
IA como par de programação: dividir tarefas, revisar código gerado, saber quando não usar e manter PRs limpos. Skill essencial do dev moderno.