Introdução
Da lógica que você já domina para a web que todo mundo usa.
Se você chegou até aqui, já passou por uma jornada e tanto: aprendeu a pensar como programador(a), escreveu TypeScript com confiança, entendeu variáveis, funções, estruturas de dados e Programação Orientada a Objetos, montou seu ambiente de desenvolvimento e construiu seu primeiro projeto real do início ao fim. Isso não é pouco — é a base sólida que a maioria de quem tenta aprender sozinho nunca chega a construir direito.
Agora começa a segunda etapa: transformar essa base em algo que roda no navegador de qualquer pessoa, em qualquer lugar do mundo, com uma interface de verdade. É aqui que a programação começa a parecer aquilo que você provavelmente imaginou quando decidiu aprender: telas, botões, dados na tela, interatividade.
O que muda a partir de agora?
No Starter, você programou em um ambiente controlado: seus programas rodavam no terminal, liam e escreviam dados no próprio processo, e você tinha controle total sobre a execução. A partir deste curso, seu código passa a rodar em um lugar muito menos controlado — o navegador de outra pessoa — e precisa lidar com coisas que o terminal nunca te obrigou a considerar: como uma página é estruturada visualmente, como o usuário interage com ela, como seu código se comunica com servidores que você não controla, e como tudo isso continua funcionando mesmo quando as coisas dão errado.
Nada do que você aprendeu no Starter fica para trás. Lógica, tipos, funções, arrays, objetos e POO continuam sendo a espinha dorsal de tudo o que você vai escrever — só que agora aplicados a um domínio novo: interfaces web.
O que você vai aprender
Este curso está organizado em seis capítulos obrigatórios, que se constroem um sobre o outro:
- Construindo Páginas Web — HTML semântico e CSS, a estrutura e a aparência de qualquer página.
- JavaScript no Navegador — como o navegador expõe o DOM, eventos e comunicação de rede, sempre em TypeScript.
- React com TypeScript — o salto de manipular HTML manualmente para pensar em interfaces como componentes reativos.
- Consumindo APIs e Autenticação — conectar seu front-end a servidores reais, com dados, erros e login de verdade.
- Introdução a Testes — a disciplina que separa quem só "faz funcionar" de quem entrega com confiança.
- Projeto Prático — um dashboard de finanças pessoais em React, publicado com uma URL real.
Depois deles, uma trilha complementar (opcional, mas recomendada) cobre código eficiente, noções de design, metodologias ágeis, uso responsável de IA no dia a dia de um júnior, e preparação para processos seletivos.
O projeto que atravessa o curso
Lá no Starter, você construiu o Rastreador de Gastos Pessoais, um CLI em TypeScript. Ele volta aqui — não como repetição, mas como evolução: ao longo dos capítulos, você vai usar o mesmo domínio (registrar gastos, categorizar, visualizar totais) para praticar cada conceito novo, até chegar ao Capítulo 6, onde ele se torna um dashboard web completo, consumindo uma API pública e publicado com uma URL real que você pode colocar no seu portfólio.
Ver o mesmo problema resolvido de formas cada vez mais sofisticadas — CLI, DOM manual, componente React, aplicação com API e testes — é uma das melhores formas de sentir o quanto você evoluiu.
Um lembrete antes de começar
Front-end tem fama de ser "visual e fácil". Não é bem assim: a dificuldade só muda de lugar. Em vez de lidar apenas com lógica pura, você vai lidar com um ambiente que reage a cliques, a tempo, a respostas de rede que podem demorar ou falhar, e a navegadores que nem sempre se comportam exatamente igual. É um tipo diferente de raciocínio — e você já tem a base de programação necessária para dominá-lo.
Vamos começar pelo começo de toda página web: o HTML e o CSS.