Pular para o conteúdo
af aprenda frontend
módulo 00 início

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.

plaintext
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.