Etapa 1
Trilha de aprendizado
Roadmap do desenvolvedor frontend
Cursos gratuitos na ordem em que um desenvolvedor front end realmente precisa deles: HTML para a estrutura, CSS para o layout, JavaScript para o comportamento, TypeScript para a segurança de tipos, React e Next.js para aplicações reais, Git para publicar e oito projetos para provar. Cada lição roda no seu navegador e todos os cursos anteriores ao passo dos projetos terminam com um certificado gratuito.
698,051+ codders inscritos nestes cursos
804 lições823 desafios3,184 perguntas de quiz
- Ideal para iniciantes
Ajuda de codificação com IA
Lições interativas e práticas
Narração em áudio em todas as lições
Questionários para testar seu conhecimento
13 certificados gratuitos ao longo da trilha
A trilha do desenvolvedor front end, passo a passo
Cada passo é um curso que já existe na Coddy. Faça na ordem ou pule direto para o que está faltando - seu progresso é salvo por curso de qualquer jeito.
- 1
- 2Etapa 2
CSS: layout e designPágina própria
Começar esta etapaIniciarSeletores, o modelo de caixa, cores e tipografia, e então flexbox, grid, layouts responsivos, transições e animação ao longo de duas seções. É neste passo que uma página começa a se parecer com as que você usa todo dia.IniciarPágina própria2 seções, em ordem - 3Etapa 3
JavaScript, a linguagem inteiraPágina própria
Começar esta etapaIniciarFundamentos, lógica e fluxo de controle, depois objetos e classes, em três seções. Trabalho de front end é trabalho de JavaScript; todo framework depois deste passo é apenas um jeito de organizá-lo, e só é legível quando a linguagem é.IniciarPágina própria3 seções, em ordem - 4Etapa 4
JavaScript no navegadorPágina própria
Começar esta etapaIniciarO DOM, eventos, busca de dados e construção de páginas interativas sem framework, e depois padrões práticos de front end. É aqui que HTML, CSS e JavaScript viram uma coisa só: uma página que responde a quem a usa.IniciarPágina própria2 seções, em ordem - 5Etapa 5
TypeScriptPágina própria
Começar esta etapaIniciarTipos, interfaces, generics e os erros do compilador como ferramenta. Quase toda base de código profissional de React é TypeScript, então ele vem logo antes do framework, e não como um apêndice.IniciarPágina própria - 6Etapa 6
React e Next.jsPágina própria
Começar esta etapaIniciarComponentes, props, estado, hooks e renderização, e então Next.js para rotas, carregamento de dados e aplicações reais. O framework que mais aparece nas vagas de front end, ensinado depois da linguagem em que ele é escrito.IniciarPágina própria2 seções, em ordem - 7Etapa 7
Git e controle de versãoPágina própria
Começar esta etapaIniciarCommits, branches, merge, resolução de conflitos e remotos. Todo trabalho de front end e todo projeto de portfólio vive em um repositório Git; aprender isso aqui significa que os projetos do próximo passo são publicados do jeito que o trabalho real é.IniciarPágina própria - 8Etapa 8
Projetos: construa o que você já viu
Começar esta etapaIniciarExercícios de flexbox e seletores, prática de DOM e métodos de array, e então construções reais: um cartão de perfil da Coddy, uma página do Instagram, uma página de login da Netflix e um slider de imagens. Cada uma é uma peça de portfólio que um recrutador consegue abrir.Iniciar8 cursos, em ordem- CSS Flexbox - O Curso CompletoSó html15 lições
- Seletores CSSSó html15 lições
- Métodos DOM do JavaScriptSó html13 lições
- Métodos de Array em JavaScriptSó javascript18 lições
- Clone de Cartão de Perfil Coddy | Projeto Front-endSó html26 lições24 desafios1 projeto
- Clone da Página do Instagram | Projeto Front-EndSó html16 lições14 desafios1 projeto
- Clone da página de login da Netflix | Projeto de front-endSó html19 lições18 desafios1 projeto
- Slider | Projeto de front-endSó html23 lições22 desafios1 projeto
O que você recebe
Tudo o que você vai usar para aprender a programar
Aprenda Fazendo
Escreva código real, consulte bancos de dados, crie sites e domine prompts de IA. Nossas lições interativas cobrem todas as habilidades que desenvolvedores modernos precisam.
playground.js
Editor de Código
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Teste #1
Teste #2
Teste #3
Entrada
"Alex"
Saída
"Hello, Coddy! Alex"
Construa Sua Sequência
Mantenha a consistência e veja seu progresso crescer! Acompanhe seu hábito diário de programação, proteja sua sequência com dias de congelamento e ganhe recompensas por aparecer todos os dias.
12 dias de sequência
Volte amanhã para manter sua sequência!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
Tudo ou Nada
Dia 5 de 7
Congelar Sequência
2 left
Onde Quiser
Leve sua jornada de programação com você! Sem configuração, sem downloads - apenas abra e comece a programar. Disponível no iOS, Android e Web com avaliações de 4.9 estrelas.
7
250
5
Variáveis
CONTINUAR
4.9
Avaliação
Você Não Está Sozinho
Compita em placares globais, convide amigos para ganhar recompensas e celebre as conquistas uns dos outros. Programar é melhor com amigos!
Liga ChallengerTop 7 avançam
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Zona de promoçãoAprenda de todas as formas
Leia, ouça, teste-se, pergunte à IA ou consulte qualquer coisa que já tenha estudado. Cada lição se adapta a você.
Introdução a variáveis
Áudio
Uma variável é um contêiner nomeado que armazena um valor que você pode referenciar depois.
Em Python, você cria uma escrevendo o nome, um sinal de igual e o valor que quer armazenar.
O valor pode mudar com o tempo - reatribuir o nome simplesmente o aponta para um novo valor.
1xSarah
Seja Certificado
Ganhe certificados para cada curso que você completar. Adicione-os ao seu perfil do LinkedIn e currículo para mostrar sua experiência em programação aos empregadores.
Certificado de ConclusãoEste certifica queJoão Silvacompletou com sucessoFundamentos de Python
Fundamentos de Python
Datajan 2026
Adicionar ao LinkedInPor que aprender front end na Coddy
- Você vê a página que está construindo. Cada lição de HTML, CSS e JavaScript é renderizada ao vivo no navegador, ao lado do seu código, então um seletor errado ou um flexbox quebrado aparece no mesmo segundo em que você escreve, e não numa captura de tela no final.
- A ordem certa, sem pular JavaScript. A maioria dos cursos de front end corre do HTML direto para um framework; esta trilha dá a JavaScript três seções inteiras antes do React, porque um framework só é legível quando a linguagem embaixo dele também é.
- Dicas de IA que leem a sua marcação e o seu código. Quando um layout quebra ou um componente não renderiza, o Bugsy olha o que você escreveu e te empurra na direção da solução sem entregar a resposta.
- Projetos que um recrutador consegue abrir. O último passo são oito construções reais - clones de páginas que você já conhece -, cada uma uma peça de portfólio compartilhável, mais um certificado gratuito para cada curso dos sete primeiros passos.
Perguntas frequentes sobre como se tornar desenvolvedor front end
Como me torno um desenvolvedor front end?
Aprenda HTML, CSS e JavaScript bem o bastante para construir uma página a partir de um arquivo em branco, acrescente TypeScript e um framework (React é a escolha segura), aprenda Git e então construa três ou quatro projetos reais sem seguir tutorial e coloque tudo no ar. É exatamente esta trilha, nesta ordem. Os projetos pesam mais que os certificados: um portfólio de front end é a única coisa que um gestor de contratação consegue avaliar em trinta segundos.
Devo aprender HTML, CSS ou JavaScript primeiro?
HTML primeiro, depois CSS, depois JavaScript - e dê a JavaScript o maior tempo. HTML leva umas duas semanas e CSS cerca de um mês até ficar confortável; JavaScript é uma linguagem de programação completa e é onde a maioria dos desenvolvedores front end autodidatas corta caminho. Esta trilha dá a ele três seções, mais uma seção sobre o DOM, antes de qualquer framework aparecer.
Preciso de TypeScript para ser desenvolvedor front end?
Para conseguir uma vaga, quase sempre: a grande maioria das bases de código profissionais de React e Next.js é escrita em TypeScript, e uma vaga que diz 'JavaScript' costuma significar TypeScript na prática. É um passo curto quando JavaScript já está firme, e por isso ele fica logo antes do React nesta trilha, em vez de ficar no fim.
React, Vue ou Angular: qual framework aprender?
React, a menos que uma vaga específica que você quer diga o contrário. Ele tem, com folga, o maior número de vagas, o maior ecossistema, e o Next.js em cima dele é o que constrói a maioria dos sites novos em produção. As ideias - componentes, estado, props, renderização - se transferem depois para Vue e Angular em uma ou duas semanas. Esta trilha ensina React e Next.js.
Quanto tempo leva para aprender front end?
Algo entre seis e nove meses, a uma hora por dia, para chegar a um nível júnior com portfólio. Nesta trilha, HTML e CSS somam seis a oito semanas, JavaScript dois a três meses, TypeScript duas semanas, React e Next.js seis semanas, e o passo dos projetos dura o tempo que você continuar construindo. O número que importa é o de projetos terminados, não o de lições terminadas.
Esta trilha cobre testes, acessibilidade ou gerenciamento de estado?
Não como cursos próprios, e preferimos dizer isso a encher a página. A marcação semântica, a base de páginas acessíveis, faz parte do passo de HTML, e o gerenciamento de estado do próprio React é coberto; um curso de testes, um trabalho mais profundo de acessibilidade e uma biblioteca de estado estão no roadmap do currículo e entram nesta trilha como novos passos quando forem lançados.
Dá para conseguir uma vaga de front end só com cursos gratuitos?
Sim, desde que os cursos produzam um portfólio - que é justamente por que esta trilha termina com oito projetos. O que as empresas filtram é uma página feita por você que elas possam abrir, um histórico no Git que mostre que foi você que fez, e uma entrevista em que você saiba explicar um layout e um componente. As três coisas saem desta trilha; nenhuma exige um bootcamp pago.
