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.
663,032+ codders inscritos nestes cursos
804 lições681 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ções
- Clone da Página do Instagram | Projeto Front-EndSó html16 lições
- Clone da página de login da Netflix | Projeto front-endSó html19 lições1 desafios
- Slider | Projeto de front-endSó html23 lições1 desafios
O que você recebe
Tudo o que você vai usar para aprender a programar
Learn by Doing
Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.
playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test #1
Test #2
Test #3
Input
"Alex"
Output
"Hello, Coddy! Alex"
Build Your Coding Streak
Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.
12 days streak
Return tomorrow to keep your streak!
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
Double or Nothing
Day 5 of 7
Streak Freeze
2 left
Code Anywhere, Anytime
Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.
7
250
5
Variables
CONTINUE
4.9
Rating
You're Not Alone in This
Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!
Challenger LeagueTop 7 advance
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Promotion zoneEvery way to learn
Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.
Intro to Variables
Audio
A variable is a named container that stores a value you can reference later in your program.
In Python, you create one by writing the name, an equals sign, then the value you want to store.
The value can change over time - reassigning the name simply points it to a new value.
1xSarah
Prove Your Skills
Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.
Certificate of CompletionThis certifies thatJohn Doehas successfully completedPython Fundamentals
Python Fundamentals
DateJan 2026
Add to 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.
