Frontend, do início ao React.
O que este curso cobre, o que você vai construir e como cada módulo se encaixa na jornada de aprendizado.
Este curso cobre os fundamentos do desenvolvimento frontend em ordem: como a web funciona, HTML, CSS, JavaScript, TypeScript, React e testes automatizados. Cada módulo constrói sobre o anterior. O resultado no final é um blog funcional — construído e reconstruído com cada tecnologia nova aprendida.
O projeto do curso
O fio condutor é um blog de artigos técnicos chamado artigo.dev. Você vai construir esse blog ao longo do curso — adicionando uma camada de tecnologia a cada módulo:
- HTML: o blog como documento — estrutura, textos, links e imagens
- CSS: o blog estilizado — layout, tipografia e modo escuro
- JavaScript: o blog interativo — curtidas, filtros e dados carregados dinamicamente
- TypeScript: o blog com tipos — os mesmos módulos JS, mas com erros detectados antes de rodar
- React: o blog como aplicação — componentes, estado e roteamento
- Testes: o blog verificado — testes unitários, de integração e ponta-a-ponta
Cada versão é independente — mas você vai ver exatamente onde cada tecnologia resolve um problema que a versão anterior não conseguia resolver.
Estrutura do curso
O curso tem oito módulos. Os primeiros três (Web, HTML, CSS) constroem o modelo mental — como o browser processa código, o que cada linguagem faz, onde cada camada começa. Os próximos quatro (JavaScript, TypeScript, React, Testes) são progressivamente mais práticos. O módulo final (Próximos passos) não ensina uma tecnologia nova — é um mapa do que existe depois.
01 — Como a web funciona → DNS, HTTP, renderização
02 — HTML → estrutura e semântica
03 — CSS → estilo e layout
04 — JavaScript → comportamento e interatividade
05 — TypeScript → tipos e segurança
06 — React → componentes e estado
07 — Testes automatizados → qualidade e confiança
08 — Próximos passos → o que aprender depois Pré-requisitos
Nenhum. O curso começa do começo.
Familiaridade básica com o computador — abrir um terminal, criar pastas, instalar programas — ajuda a partir do módulo de JavaScript. Os módulos de HTML e CSS não precisam nem de um editor de código.
Se você já programou em outra linguagem, os primeiros módulos vão ser rápidos. Se nunca programou, vá no ritmo que funcionar — os exemplos são concretos e progressivos.
Como usar o curso
Cada lição tem um resumo ao final com os pontos principais — útil para revisão. Se ficou confuso em algo, o resumo é o primeiro lugar para rever antes de voltar à lição.
Os exemplos de código são para ser executados, não só lidos. O aprendizado acontece quando você modifica o exemplo e observa o que muda — ou quando ele quebra e você entende por quê.
As lições com quiz têm perguntas ao final. Responda antes de ver a resposta — o objetivo não é acertar, é descobrir o que você ainda não entendeu.
Resumo
- O curso cobre frontend do início: Web, HTML, CSS, JavaScript, TypeScript, React e testes.
- O projeto de referência é um blog — construído e refeito com cada tecnologia nova.
- Nenhum pré-requisito técnico. Cada módulo constrói sobre o anterior.
- Execute os exemplos de código — ler não é suficiente.