Trilha Web Full-Stack

Do zero ao desenvolvedor web completo: frontend, backend, APIs e ferramentas modernas.

Sequência Recomendada

flowchart LR
  HTML[HTML] --> CSS[CSS] --> JS[JavaScript Básico]
  JS --> TS[TypeScript] --> React
  React --> TanStack
  React --> NextJs[Next.js]
  TS --> Node[Node.js]
  Node --> APIs
  JS --> Vite
  Vite --> React
  Node --> Nitro

Ordem	Curso	Nível	Aulas	Pré-requisito
1	HTML	Iniciante	6	Nenhum
2	CSS	Iniciante	7	HTML
3	JavaScript Básico	Iniciante	8	HTML
4	TypeScript	Intermediário	7	JavaScript
5	React	Intermediário	8	TypeScript
6	Next.js	Avançado	6	React
7	Vite	Intermediário	4	JavaScript
8	TanStack	Avançado	5	React
9	Node.js	Intermediário	7	TypeScript
10	APIs	Intermediário	7	Node.js
11	Nitro	Intermediário	4	Node.js

Progressão por Nível

🟢 Iniciante (Fundamentos Web)

HTML → CSS → JavaScript Básico

Construa páginas estáticas, entenda o DOM, manipule eventos. Base para qualquer框架.

🟡 Intermediário (Tipagem + Frameworks)

TypeScript → React → Node.js → Vite

TypeScript traz segurança para JavaScript. React introduz componentização. Node.js abre o backend. Vite acelera o build.

🔴 Avançado (Full-Stack em Produção)

Next.js → APIs → TanStack → Nitro

Next.js une frontend e backend (SSR/SSG/API Routes). TanStack resolve estado server-side e formulários. Nitro alternativa leve para APIs.

Projetos Práticos por Etapa

HTML + CSS: Landing page responsiva (portfólio)
+ JavaScript: Calculadora, todo list, galeria dinâmica
+ TypeScript: Aplicação de clima com API externa
+ React: Dashboard com gráficos e formulários
+ Node.js + APIs: CRUD completo com banco
+ Next.js: E-commerce ou blog com SSR/ISR
+ TanStack: Aplicação real-time com cache e mutations