Skip to content
BranchesTags

Latest commit

 

History

8 Commits

Folders and files

NameName
Last commit message
Last commit date
.github
.github
 
 
images
images
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
lychee.toml
lychee.toml
 
 

Repository files navigation

Guia Dev Brasil

Guia de JavaScript

🎯 O guia para alavancar a sua carreira

JavaScript é a linguagem que roda em todo navegador, no servidor com Node.js, em apps mobile com React Native e até em modelos de IA no navegador — é a base de praticamente toda vaga de front-end, back-end Node e full stack no Brasil. Este guia reúne trilhas, cursos, livros, canais, ferramentas e comunidades para quem está começando do zero até quem já sabe o básico e quer dominar a linguagem antes de partir para frameworks ou para o TypeScript. Os recursos em português e gratuitos vêm primeiro em cada seção, e todo link foi verificado. Use-o como apoio para os seus estudos, no seu ritmo, e não como uma lista que precisa ser vencida de uma vez.

Siga nas redes sociais para acompanhar mais conteúdos:
Discord Badge Youtube Badge

⚠️ Aviso importante

Antes de tudo você pode me ajudar e colaborar, deu bastante trabalho fazer esse repositório e organizar para fazer seu estudo ou trabalho melhor, portanto você pode me ajudar das seguintes maneiras:

💡 Nossa proposta

A proposta deste guia é dar uma ideia sobre o atual panorama e guiá-lo se você estiver confuso sobre qual será o seu próximo aprendizado, sem influenciar você a seguir os 'hypes' e 'trends' do momento. Acreditamos que com um maior conhecimento das diferentes estruturas e soluções disponíveis poderá escolher a ferramenta que melhor se aplica às suas demandas. E lembre-se, 'hypes' e 'trends' nem sempre são as melhores opções.

🔰 Para quem está começando agora

Não se assuste com a quantidade de conteúdo apresentado neste guia. Acredito que quem está começando pode usá-lo não como um objetivo, mas como um apoio para os estudos. Neste momento, dê enfoque no que te dá produtividade e o restante marque como Ver depois. Ao passo que seu conhecimento se torna mais amplo, a tendência é este guia fazer mais sentido e ficar fácil de ser assimilado. Bons estudos e entre em contato sempre que quiser! 👊

🚨 Colabore

  • Abra Pull Requests com atualizações
  • Discuta ideias em Issues
  • Compartilhe o repositório com a sua comunidade

🌍 Tradução

Se você deseja acompanhar esse repositório em outro idioma que não seja o Português Brasileiro, você pode optar pelas escolhas de idiomas abaixo, você também pode colaborar com a tradução para outros idiomas e a correções de possíveis erros ortográficos, a comunidade agradece.

Guia Extenso de Programação・English — Click Here
Guia Extenso de Programação・Spanish — Click Here
Guia Extenso de Programação・Chinese — Click Here
Guia Extenso de Programação・Hindi — Click Here
Guia Extenso de Programação・Arabic — Click Here
Guia Extenso de Programação・French — Click Here
Guia Extenso de Programação・Italian — Click Here
Guia Extenso de Programação・Korean — Click Here
Guia Extenso de Programação・Russian — Click Here
Guia Extenso de Programação・German — Click Here
Guia Extenso de Programação・Japanese — Click Here

📚 ÍNDICE

🗺️ Roadmap

Trilha resumida (siga na ordem; cada etapa tem recursos nas seções abaixo):

  1. Base — o que é JavaScript, onde roda, como abrir o console do navegador e rodar node no terminal. HTML e CSS básicos ajudam desde o início.
  2. Sintaxe e lógica — variáveis (let/const), tipos primitivos, operadores, condicionais, laços, funções e escopo.
  3. Estruturas de dados — arrays e seus métodos (map, filter, reduce), objetos, Map/Set, JSON, destructuring e spread.
  4. DOM e eventos — selecionar elementos, reagir a cliques e formulários, manipular a página, fetch para consumir APIs.
  5. Assincronismo — event loop, callbacks, Promise, async/await, tratamento de erros.
  6. JavaScript moderno — módulos ES, classes, protótipos, closures, this, iteradores/geradores, recursos do ES2020+.
  7. Ecossistema — Node.js e npm, Git, ESLint/Prettier, testes com Vitest/Jest, bundlers (Vite), DevTools.
  8. Aplicação — um framework de front-end (React ou Vue), uma API com Node (Express/Fastify/Hono), TypeScript e deploy.

Por onde começar:

  1. Entenda o que é JavaScript lendo Primeiros passos com JavaScript na MDN, em português.
  2. Instale o ambiente: Node.js (versão LTS) e o Visual Studio Code. Abra o console do navegador (F12) — ele já roda JavaScript.
  3. Faça um curso completo em português: o Curso de JavaScript e ECMAScript do Curso em Vídeo ou o Curso de JavaScript do Matheus Battisti.
  4. Pratique com exercícios corrigidos no freeCodeCamp em português — centenas de desafios e certificado gratuito.
  5. Aprofunde com leitura: o Guia JavaScript da MDN e o livro gratuito JavaScript Eloquente (ou o javascript.info em inglês).
  6. Construa 30 projetinhos com o JavaScript30 e os Mini Projetos do Fernando Leonid.
  7. Resolva desafios todo dia: Codewars e JSchallenger.
  8. Publique um projeto no GitHub a partir de um design do Frontend Mentor — é o seu primeiro item de portfólio.

Seu primeiro programa em 30 segundos:

mkdir ola-js && cd ola-js
node --version        # confirme que o Node.js está instalado
// ola.js
function saudacao(nome) {
  return `Olá, ${nome}!`;
}
console.log(saudacao("Guia Dev Brasil"));
node ola.js           # executa no terminal

No navegador, o mesmo código funciona dentro de uma tag <script> — ou colado direto no console (F12).

📖 Documentação oficial

🔤 Sites e cursos para aprender JavaScript

Cursos para aprender JavaScript em Português

Cursos para aprender JavaScript em Inglês

📚 Livros

🎥 Canais no Youtube

Canais em Português

  • Curso em Vídeo — Canal do Gustavo Guanabara: JavaScript, HTML, CSS, Python e lógica, tudo gratuito.
  • Rodrigo Branas — JavaScript, Node, Clean Code e arquitetura com um dos professores mais respeitados do Brasil.
  • Erick Wendel — Node.js e JavaScript avançado: internals, performance, streams e projetos ao vivo.
  • Roger Melo | JavaScript — Canal dedicado a JavaScript puro, com explicações profundas de fundamentos.
  • Matheus Battisti — Hora de Codar — Cursos gratuitos de JavaScript, React, Node e mais, sempre atualizados.
  • Felipe Rocha • Full Stack Club — Cursos para iniciantes e dicas de carreira em JavaScript.
  • Mayk Brito — Educador da Rocketseat: JavaScript e web para quem está começando, com projetos guiados.
  • Rocketseat — Eventos, aulas e projetos em JavaScript, React e Node.
  • Filipe Deschamps — Programação explicada com clareza rara; muitos vídeos de JavaScript e Node.
  • Dev em Dobro — Os irmãos Lucas e Guilherme: JavaScript, React e carreira para iniciantes.
  • Código Fonte TV — Notícias e explicações sobre tecnologias, com vários vídeos sobre JavaScript e seu ecossistema.
  • Willian Justen — JavaScript moderno, React e carreira front-end.
  • Otávio Miranda — Cursos longos e detalhados de JavaScript, TypeScript e Node.
  • Bonieky Lacerda — Aulas de JavaScript e web do criador da B7Web.
  • Dev Aprender | Jhonatan de Souza — Cursos completos gratuitos de JavaScript e desenvolvimento web.
  • Sujeito Programador — JavaScript, React, React Native e Node em projetos práticos.
  • Loiane Groner — JavaScript, TypeScript, Angular e estruturas de dados.
  • Mario Souto — Dev Soutinho — Front-end e JavaScript com foco em quem está começando a carreira.
  • CFBCursos — Cursos gratuitos e objetivos de JavaScript, HTML, CSS e mais.
  • Programação Web — Cursos completos de JavaScript e desenvolvimento web.
  • Fabio Akita — Não é só JavaScript, mas ensina a pensar como engenheiro — assista antes de escolher framework.

Canais em Inglês

  • freeCodeCamp.org — Cursos completos e gratuitos de JavaScript com horas de duração.
  • Traversy Media — Crash courses e projetos de JavaScript e web.
  • Web Dev Simplified — Conceitos de JavaScript explicados de forma simples, com exemplos curtos.
  • Fireship — Vídeos rápidos e densos sobre JavaScript, frameworks e novidades do ecossistema.
  • Net Ninja — Playlists organizadas de JavaScript moderno e frameworks.
  • Programming with Mosh — Tutoriais claros de JavaScript para iniciantes.
  • Academind — Maximilian Schwarzmüller ensinando JavaScript e frameworks.
  • Bro Code — Cursos completos gratuitos, incluindo um JavaScript Full Course.
  • SuperSimpleDev — Cursos longos e didáticos de JavaScript e HTML/CSS para iniciantes.
  • Syntax — Wes Bos e Scott Tolinski falando de JavaScript e web moderna.
  • Jack Herrington — JavaScript, TypeScript e React com profundidade de engenheiro sênior.
  • Akshay Saini — Namaste JavaScript: como a linguagem funciona por dentro.

📰 Sites, blogs e newsletters

🎙️ Podcasts

  • Hipsters Ponto Tech — Podcast da Alura sobre tecnologia, com vários episódios sobre JavaScript e front-end.
  • Compilado do Código Fonte TV — Resumo semanal das notícias de tecnologia e programação, em português.
  • DEVNAESTRADA — Acervo do podcast clássico de front-end e JavaScript do Brasil (Eduardo Matos, Emilio Aiolfi e Willian Martins).
  • JS Party (Changelog) — Podcast semanal sobre JavaScript e a web, com convidados do ecossistema.
  • Syntax — Um dos podcasts de web dev mais ouvidos do mundo; JavaScript é o tema central.
  • JavaScript Jabber — Podcast veterano com discussões técnicas e entrevistas.
  • Front-End Fire — Notícias semanais de front-end e JavaScript.

🛠️ Ferramentas

Executar, empacotar e testar

  • Node.js — O runtime que executa JavaScript fora do navegador. Instale a versão LTS.
  • nvm — Gerencie várias versões do Node.js na mesma máquina.
  • Bun — Runtime, bundler, gerenciador de pacotes e test runner em uma só ferramenta, muito rápido.
  • Deno — Runtime JavaScript/TypeScript seguro por padrão, com TypeScript nativo e compatível com Node.
  • pnpm — Gerenciador de pacotes rápido e econômico em disco, compatível com o npm.
  • npm Docs — Documentação oficial do npm: package.json, scripts, publicação de pacotes.
  • Vite — O bundler/dev server padrão do front-end moderno: rápido e sem configuração.
  • Rolldown — Bundler em Rust que está substituindo o Rollup dentro do Vite.
  • esbuild — Bundler e minificador extremamente rápido, escrito em Go.
  • webpack — O bundler clássico; ainda presente em muitos projetos legados.
  • Babel — Transpila JavaScript moderno para versões antigas dos navegadores.
  • Vitest — Test runner moderno e rápido, integrado ao Vite, com API compatível com Jest.
  • Jest — Framework de testes mais usado do ecossistema.
  • Playwright — Testes end-to-end no navegador, mantido pela Microsoft.
  • TypeScript — JavaScript com tipos estáticos — o próximo passo natural depois deste guia.

Qualidade de código, editor e depuração

  • Visual Studio Code — O editor mais usado para JavaScript, com IntelliSense e depurador nativos.
  • WebStorm — IDE da JetBrains para JavaScript/TypeScript, gratuita para uso não comercial.
  • ESLint — O linter padrão do JavaScript: encontra erros e impõe padrões de código.
  • Prettier — Formatador de código opinativo — acaba com discussões de estilo.
  • Biome — Linter + formatador em Rust, alternativa rápida a ESLint + Prettier.
  • Oxc — Parser, linter e ferramentas JavaScript em Rust, de alta performance.
  • JSDoc — Documente e tipe seu JavaScript com comentários que o editor entende.
  • Chrome DevTools — Depurar o JavaScript — Guia oficial (em português) de breakpoints, console e depuração no Chrome.
  • Firefox DevTools — Documentação das ferramentas de desenvolvedor do Firefox.
  • MDN — O que deu errado? Resolvendo problemas no JavaScript — Primeiro guia de depuração para iniciantes, em português.

Playgrounds e visualizadores

  • StackBlitz — Ambiente Node.js completo no navegador; roda projetos com npm sem instalar nada.
  • CodeSandbox — Sandboxes de front-end e Node compartilháveis por link.
  • JSFiddle — Playground clássico de HTML/CSS/JS para testar e compartilhar trechos.
  • RunJS — Playground JavaScript de desktop que mostra o resultado de cada linha.
  • JS Visualizer 9000 — Visualize a call stack, a fila de tarefas e o event loop enquanto o código roda.
  • Loupe — A visualização clássica do event loop do JavaScript, de Philip Roberts.
  • Python Tutor — JavaScript — Executa seu código passo a passo mostrando memória e escopo.
  • regex101 — Teste expressões regulares com explicação passo a passo (modo ECMAScript).
  • Bundlephobia — Descubra quanto cada pacote npm vai pesar no seu bundle.
  • npm trends — Compare downloads de pacotes npm ao longo do tempo antes de escolher uma biblioteca.

Bibliotecas e frameworks

  • React (PT-BR) — A biblioteca de interfaces mais usada do mercado, com documentação em português.
  • Vue.js (PT-BR) — Framework progressivo com curva suave, documentação traduzida.
  • Angular — Framework completo do Google, muito usado em empresas brasileiras.
  • Svelte — Compila componentes para JavaScript puro, sem runtime pesado.
  • Next.js — Framework React para aplicações completas com renderização no servidor.
  • Astro — Framework para sites focados em conteúdo, enviando o mínimo de JavaScript.
  • Express — O framework web minimalista mais usado do Node.js.
  • Fastify — Framework Node.js focado em performance e baixo overhead.
  • Hono — Framework web leve baseado em Web Standards, roda em Node, Bun, Deno e edge.
  • NestJS — Framework Node.js estruturado, muito comum em vagas de back-end no Brasil.
  • React Native — Apps nativos para iOS e Android com JavaScript e React.
  • Electron — Aplicativos desktop com JavaScript, HTML e CSS (VS Code é feito com ele).
  • Three.js — Gráficos 3D no navegador com WebGL.
  • D3.js — A biblioteca de visualização de dados mais poderosa da web.
  • Chart.js — Gráficos simples e bonitos com poucas linhas.
  • Axios — Cliente HTTP baseado em Promises para navegador e Node.
  • Zod — Validação de dados com esquemas — essencial em APIs e formulários.
  • Motion — Biblioteca de animação para JavaScript e React (antigo Framer Motion).
  • htmx — Interatividade com atributos HTML, escrevendo pouco JavaScript.

🧪 Projetos práticos e desafios

🤖 IA na prática

JavaScript é a linguagem em que os assistentes de IA mais foram treinados — eles escrevem JS muito bem, e isso é ao mesmo tempo uma vantagem e uma armadilha para quem está aprendendo. Use a IA como tutor e revisor, não como piloto automático.

Para aprender

  • Cole um erro do console (ex.: TypeError: Cannot read properties of undefined (reading 'map')) junto com o trecho de código e peça: "explique a causa, mostre como reproduzir e duas formas de corrigir".
  • Peça para explicar um conceito com um exemplo executável: closures, this, event loop, Promise vs async/await. Depois rode o exemplo no JS Visualizer 9000 ou no console para confirmar.
  • Peça exercícios com gabarito sobre o tópico que está estudando (métodos de array, destructuring, fetch), resolva antes de olhar a resposta.
  • Peça para reescrever um código seu com var e callbacks em JavaScript moderno (const, arrow functions, async/await) e explicar cada mudança.
  • Use o MDN AI Help: ele responde citando a documentação, o que reduz invenções.

Para trabalhar

  • Use GitHub Copilot, Cursor, Claude Code ou Gemini CLI para: escrever testes com Vitest/Jest, migrar código de jQuery ou callbacks para JavaScript moderno, gerar JSDoc, criar scripts Node de automação e revisar pull requests.
  • Depois de cada sugestão aceita, rode o linter (npx eslint .) e os testes. Se a IA sugeriu uma dependência npm, confira no npm trends se ela existe, está mantida e é a que você precisa.
  • Peça sempre a versão-alvo: "Node 24, módulos ES, sem TypeScript". Sem isso a IA mistura require com import e APIs de versões diferentes.

Limites e boas práticas

  • A IA inventa métodos e pacotes (Array.prototype.unique(), bibliotecas que não existem) e confunde APIs de navegador com as do Node. Confirme na MDN e na documentação do Node.
  • Ela tende a gerar código "que funciona" ignorando try/catch, validação de entrada e casos de borda (null, array vazio, NaN). Peça explicitamente por tratamento de erros.
  • Cuidado com innerHTML com dados do usuário e eval: a IA sugere isso com frequência, e são portas para XSS.
  • Não cole código proprietário, segredos (.env, tokens) ou dados de clientes em ferramentas sem a política da sua empresa.
  • Entenda o que você aceita: em entrevista e em produção, o código é seu.

JavaScript é a linguagem das aplicações com IA. As principais bibliotecas para chamar LLMs, montar agentes e até rodar modelos no navegador são JavaScript/TypeScript-first:

💼 Carreira e vagas

JavaScript aparece na grande maioria das vagas de front-end, em todas as de Node.js e em quase todas de full stack e mobile (React Native) no Brasil. Dica: nos repositórios de vagas do GitHub abaixo, pesquise por "JavaScript", "Node" ou "React" nas issues abertas.

👥 Comunidades

🎓 Certificações

Não existe certificação oficial de JavaScript — nem do TC39, nem da Ecma. As certificações JSNAD/JSNSD da OpenJS Foundation foram descontinuadas. Empregadores avaliam projetos publicados e domínio prático; os certificados abaixo ajudam no currículo, mas não substituem portfólio.

🚨 Como contribuir

Achou um link quebrado, um curso novo ou uma ferramenta que merece estar aqui? Abra uma issue usando os templates do repositório ou envie um pull request. Critérios: link funcionando, conteúdo legal e gratuito ou claramente marcado como pago, com uma linha de descrição. Detalhes em CONTRIBUTING.md.

📄 Licença

Este projeto está sob a licença MIT. Feito com 💙 por Arthur Coutinho (@arthurspk) e pela comunidade do Guia Dev Brasil.

💙 Apoie o projeto

Dê uma ⭐ neste repositório e no guia principal, compartilhe com quem está começando e siga o projeto nas redes:

GitHub LinkedIn X (Twitter) Instagram Facebook

About

Guia de JavaScript: trilhas, cursos, livros, canais, ferramentas e comunidades para você entrar e evoluir na área.

github.com/arthurspk/guiadevbrasil

Topics

brasilecmascriptestudosfrontendguiaguiadevbrasiljavascriptjsroadmapweb

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing
Activity

Stars

69 stars

Watchers

4 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors