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.
- Entrega do Projeto — integração, auditoria e publicação do produto construído nas cinco sprints anteriores.
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 final de cada capítulo você entrega uma sprint do MB Finanças: primeiro a interface, depois o comportamento no navegador, a versão React, a integração autenticada e os testes. No Capítulo 6 você audita e publica um produto completo, capaz de consumir tanto a API oficial local quanto qualquer implementação compatível feita na trilha Back-end.
Ver o mesmo problema resolvido de formas cada vez mais sofisticadas — CLI, DOM manual, componentes React, aplicação autenticada e integração por contrato — é uma das melhores formas de sentir o quanto você evoluiu. Se uma sprint anterior bloquear você, baixe o pacote sprint-N-materials correspondente para retomar do zero; a solução de referência fica separada, em reference-solution/, para consulta posterior.
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.