Artigo original escrito por Jessica Wilkins
Artigo original: 40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS
Traduzido e adaptado por Daniel Rosa

A melhor maneira de aprender uma nova linguagem de programação é criando projetos.

Eu criei uma lista de 40 projetos de tutoriais adequados para iniciantes em JavaScript puro, React e TypeScript.

Meu conselho para os tutoriais é assistir os vídeos, criar os projetos, dividi-los em partes e reconstruí-los à sua maneira. Experimente adicionar novos recursos ou usar métodos diferentes.

Isso testará se você realmente aprendeu os conceitos ou não.

Você pode clicar em qualquer um dos projetos listados abaixo para ir para essa seção no artigo (todos os tutoriais estão em inglês).

Projetos em JavaScript puro

  1. Como criar um trocador de cores
  2. Como criar um contador
  3. Como criar um carrossel de revisões
  4. Como criar uma navbar responsiva
  5. Como criar uma sidebar
  6. Como criar um modal
  7. Como criar uma página de perguntas frequentes
  8. Como criar uma página de menu de restaurante
  9. Como criar um segundo plano de vídeo
  10. Como criar uma barra de navegação com rolagem
  11. Como criar guias que exibem conteúdos diferentes
  12. Como criar um relógio de contagem regressiva
  13. Como criar seu próprio Lorem ipsum
  14. Como criar uma lista de compras
  15. Como criar um slider de imagens
  16. Como criar um jogo de pedra, papel e tesoura
  17. Como criar o jogo do Genius
  18. Como criar um jogo de plataforma
  19. Como criar o Doodle Jump
  20. Como criar o Flappy Bird
  21. Como criar um jogo de memória
  22. Como criar um jogo de Whack-a-mole
  23. Como criar um jogo de Ligue 4
  24. Como criar o jogo da cobrinha
  25. Como criar o jogo do Space Invaders
  26. Como criar o jogo do Frogger
  27. Como criar o jogo de Tetris

Projetos em React

  1. Como criar um jogo da velha usando React Hooks
  2. Como criar um jogo de Tetris usando React Hooks
  3. Como criar um app de lembrete de aniversários
  4. Como criar uma página de viagens
  5. Como criar um accordion
  6. Como criar guias para uma página de portfólio
  7. Como criar um slider de revisões
  8. Como criar um gerador de cores
  9. Como criar uma página de menu de pagamentos do Stripe
  10. Como criar uma página de carrinho de compras
  11. Como criar uma página de busca de coquetéis

Projetos em TypeScript

  1. Como criar um app de perguntas e respostas com React e TypeScript
  2. Como criar o jogo de Arkanoid com TypeScript

Projetos em JavaScript puro

Se você ainda não aprendeu os fundamentos de JavaScript, eu sugiro assistir este curso antes de seguir com os projetos.

Muitas das imagens abaixo são tiradas daqui.

Como criar um trocador de cores

color-flipper

Neste tutorial de John Smilga, você aprenderá a criar um trocador de cores para um fundo de tela aleatório. É um bom projeto para começar a trabalhar com o DOM.

No artigo de Leonardo Maldonado sobre a importância de aprender sobre o DOM, ele diz:

Ao manipular o DOM, você tem infinitas possibilidades. Você pode criar aplicações que atualizam os dados sem precisar atualizar a página. Além disso, você pode criar aplicações que são personalizáveis pelo usuário e mudar o layout da página sem atualizá-la.

Conceitos importantes tratados nesse tutorial:

  • arrays
  • document.getElementById()
  • document.querySelector()
  • addEventListener()
  • document.body.style.backgroundColor
  • Math.floor()
  • Math.random()
  • array.length

Antes de começar, sugiro assistir a introdução, onde John analisa como acessar os arquivos de configuração para todos os projetos dele.

Como criar um contador

counter

Neste tutorial de John Smilga, você aprenderá a criar um contador e a escrever as condições que alteram a cor com base em números positivos ou negativos que são exibidos.

Esse projeto dará a você mais trabalhos práticos com o DOM e você poderá usar esse contador simples em outros projetos, como um relógio pomodoro.

Conceitos importantes tratados nesse tutorial:

  • document.querySelectorAll()
  • forEach()
  • addEventListener()
  • currentTarget property
  • classList
  • textContent

Como criar um carrossel de revisões

reviews

Neste tutorial, você aprenderá a criar um carrossel de revisões com um botão que gera revisões aleatórias.

É um bom recurso para se ter em um site de comércio eletrônico para exibir revisões de clientes ou em um portfólio pessoal para exibir as revisões de seus clientes.

Conceitos importantes tratados nesse tutorial:

  • objetos
  • DOMContentLoaded
  • addEventListener()
  • array.length
  • textContent

Como criar uma navbar responsiva

navbar-1

Neste tutorial, você aprenderá a criar uma navbar responsiva que mostrará o menu de hambúrguer para dispositivos menores.

Aprender a desenvolver sites da web responsivos é uma parte importante de ser um desenvolvedor para a web. Esse é um recurso popular usado por vários sites da web.

Conceitos importantes tratados nesse tutorial:

  • document.querySelector()
  • addEventListener()
  • classList.toggle()

Como criar uma sidebar

sidebar

Neste tutorial, você aprenderá a criar uma sidebar com animações.

Este é um recurso interessante de se adicionar ao site da web pessoal.

Conceitos importantes tratados nesse tutorial:

  • document.querySelector()
  • addEventListener()
  • classList.toggle()
  • classList.remove()

Como criar um modal

modal

Neste tutorial, você aprenderá a criar uma janela de modal, que é usada nos sites da web para fazer com que os usuários façam ou vejam algo específico.

Um bom exemplo de uma janela de modal seria quando um usuário faz alterações em um site sem salvá-las e tenta ir para outra página. Você pode criar uma janela de modal que avise que ele deve salvar as alterações para evitar que as informações sejam perdidas.

Conceitos importantes tratados nesse tutorial:

  • document.querySelector()
  • addEventListener()
  • classList.add()
  • classList.remove()

Como criar uma página de perguntas frequentes

FAQ-section

Neste tutorial, você aprenderá a criar uma página de perguntas frequentes que informa os usuários sobre uma empresa e orienta o tráfego para o site da web por meio de resultados de buscas orgânicas.

Conceitos importantes tratados nesse tutorial:

  • document.querySelectorAll()
  • addEventListener()
  • forEach()
  • classList.remove()
  • classList.toggle()

Como criar uma página de menu de restaurante

menu

Neste tutorial, você aprenderá a fazer uma página de menu de restaurante que filtra os diferentes menus de alimentos. É um projeto divertido, que ensinará você sobre as funções de ordem superior, como map, reduce e filter.

No artigo de Yazeed Bzadough sobre funções de ordem superior, ele diz:

o maior benefícios das funções de ordem superior é sua grande capacidade de reutilização.

Conceitos importantes tratados nesse tutorial:

  • arrays
  • objetos
  • forEach()
  • DOMContentLoaded
  • map, reduce e filter
  • innerHTML
  • método includes

Como criar um segundo plano de vídeo

video-1

Neste tutorial, você aprenderá a fazer um segundo plano de vídeo com um recurso de reprodução e pausa.  Este é um recurso comum encontrado em diversos sites da web.

Conceitos importantes tratados nesse tutorial:

  • document.querySelector()
  • addEventListener()
  • classList.contains()
  • classList.add()
  • classList.remove()
  • play()
  • pause()

Como criar uma barra de navegação com rolagem

scroll-page

Neste tutorial, você aprenderá a criar uma navbar que desce junto com a rolagem e se mantém em uma posição fixa a uma certa altura.

Este é um recurso popular encontrado em vários sites da web profissionais.

Conceitos importantes tratados nesse tutorial:

  • document.getElementById()
  • getFullYear()
  • getBoundingClientRect()
  • método slice
  • window.scrollTo()

Como criar guias que exibem conteúdos diferentes

tabs

Neste tutorial, você aprenderá a criar guias que exibem conteúdos diferentes, o que é útil ao criar aplicações de página única (SPAs).

Conceitos importantes tratados nesse tutorial:

  • classList.add()
  • classList.remove()
  • forEach()
  • addEventListener()

Como criar um relógio de contagem regressiva

countdown

Neste tutorial, você aprenderá a criar um relógio de contagem regressiva, que pode ser usado quando um novo produto estiver chegando ou uma liquidação estiver prestes a terminar em um site de comércio eletrônico.

Conceitos importantes tratados nesse tutorial:

  • getFullYear()
  • getMonth()
  • getDate()
  • Math.floor()
  • setInterval()
  • clearInterval()

Como criar seu próprio Lorem ipsum

lorem-ipsum

Neste tutorial, você aprenderá como criar seu prórpio gerador de Lorem ipsum .

Lorem ipsum é o texto de placeholder mais comum para sites da web. Este é um projeto divertido para exibir sua criatividade e criar seu próprio texto.

Conceitos importantes tratados nesse tutorial:

  • parseInt()
  • Math.floor()
  • Math.random()
  • isNaN()
  • método slice
  • event.preventDefault()

Como criar uma lista de compras

grocery-list

Neste tutorial, você aprenderá a atualizar e excluir itens de uma lista de compras e criará uma aplicação simples com CRUD (Criar, Ler, Atualizar e Excluir).

O CRUD tem uma função importante no desenvolvimento de aplicações full stack. Sem ele, você não poderia fazer coisas como editar ou excluir publicações em sua plataforma de mídias sociais favoritas.

Conceitos importantes tratados nesse tutorial:

  • DOMContentLoaded
  • new Date()
  • createAttribute()
  • setAttributeNode()
  • appendChild()
  • filter()
  • map()

Como criar um slider de imagens

image-slider

Neste tutorial, você aprenderá a criar um slider de imagens que pode ser adicionado a qualquer site da web.

Conceitos importantes tratados nesse tutorial:

  • querySelectorAll()
  • addEventListener()
  • forEach()
  • instruções if/else

Como criar um jogo de pedra, papel e tesoura

rock-paper-scissors

Neste tutorial, Tenzin ensinará você a criar um jogo de pedra, papel e tesoura. Esse é um projeto divertido, que dará a você mais trabalhos práticos com o DOM.

Conceitos importantes tratados nesse tutorial:

  • addEventListener()
  • Math.floor()
  • Math.random()
  • instruções switch

Como criar o jogo do Genius

simon-game

Neste tutorial, Beau Carnes ensinará você a criar o clássico jogo do Genius (Simon, em inglês). Este é um bom projeto, que fará você pensar sobre os diversos componentes por trás do jogo e sobre como criar cada uma dessas funcionalidades.

Conceitos importantes tratados nesse tutorial:

  • querySelector()
  • addEventListener()
  • setInterval()
  • clearInterval()
  • setTimeout()
  • play()
  • Math.floor()
  • Math.random()

Como criar um jogo de plataforma

platformer-game

Neste tutorial, Frank Poth ensinará você a criar um jogo de plataforma. Este projeto apresentará a você os princípios da Programação Orientada a Objetos e ao padrão de software conhecido como Model, View, Controller (MVC).

Conceitos importantes tratados nesse tutorial:

  • a palavra-chave this
  • laços for
  • instruções switch
  • princípios de POO
  • padrão MVC
  • API do Canvas

Como criar o Doodle Jump e o Flappy Bird

doodle-jump

Nesta série de vídeos, Ania Kubow ensinará você a criar o Doodle Jump e o Flappy Bird.

Criar jogos é uma maneira divertida de aprender mais sobre o JavaScript e trata de diversos métodos do JavaScript populares.

Conceitos importantes tratados nesse tutorial:

  • createElement()
  • forEach()
  • setInterval()
  • clearInterval()
  • removeChild()
  • appendChild()
  • addEventListener()
  • removeEventListener()

Como criar sete jogos clássicos com Ania Kubow

7-js-games

Você se divertirá muito criando sete jogos neste curso de Ania Kubow:

  1. Jogo da memória
  2. Whack-a-mole
  3. Liga 4
  4. Cobrinha
  5. Space Invaders
  6. Frogger
  7. Tetris

Conceitos importantes tratados nesse tutorial:

  • laços for
  • evento onclick
  • arrow functions
  • sort()
  • pop()
  • unshift()
  • push()
  • indexOf()
  • includes()
  • splice()
  • concat()

Projetos em React

Se você ainda não está familiarizado com os fundamentos de React, sugiro fazer este curso antes de começar com os projetos.

Como criar o jogo da velha usando React Hooks

tic-tac-game-1

Neste artigo do freeCodeCamp, Per Harald Borgen fala sobre o tutorial de jogo da velha no Scrimba, orientado por Thomas Weibenfalk. Você pode ver o curso em vídeo no canal do YouTube do Scrimba.

Este é um bom projeto para começar a se familiarizar com o básico em React e para trabalhar com hooks.

Conceitos importantes tratados nesse tutorial:

  • useState()
  • import/export
  • JSX

Como criar um jogo de Tetris usando React Hooks

react-tetris-1

Neste tutorial, Thomas Weibenfalk ensinará você a criar um jogo de Tetris usando React Hooks e componentes estilizados.

Conceitos importantes tratados nesse tutorial:

  • useState()
  • useEffect()
  • useRef()
  • useCallback()
  • componentes estilizados

Como criar um app de lembretes de aniversário

brithday-app
Imagem retirada de https://react-projects.netlify.app/

Neste curso de John Smilga, você aprenderá a criar uma aplicação de lembretes de aniversário. É um bom projeto para começar a se familiarizar com o básico em React e para trabalhar com hooks.

Também sugiro assistir ao vídeo de John sobre os arquivos de inicialização para este projeto.

Conceitos importantes tratados nesse tutorial:

  • useState()
  • import/export
  • JSX
  • map()

Como criar uma página de viagens

tours-page
Imagem retirada de https://react-projects.netlify.app/

Neste tutorial, você aprenderá a criar uma página de viagens onde o usuário pode excluir as viagens pelas quais ele não se interessar.

Isso dará a você a prática com React hooks e com o padrão async/await.

Conceitos importantes tratados nesse tutorial:

  • instrução try...catch
  • padrão async/await
  • useEffect()
  • useState()

Como criar um menu de accordion

accordion-react
Imagem retirada de https://react-projects.netlify.app/

Neste tutorial, você aprenderá a criar um menu accordion de perguntas e respostas. Esses menus podem ser úteis para revelar conteúdo aos usuários de maneira progressiva.

Conceitos importantes tratados nesse tutorial:

  • ícones do React
  • useState()
  • map()

Como criar guias para uma página de portfólio

tabs-portfolio-page-react
Imagem retirada de https://react-projects.netlify.app/

Neste tutorial, você aprenderá a criar guias para uma página de portfólio de ensaio. Guias são úteis quando você quiser exibir conteúdos diferentes em aplicações de página única (SPAs).

Conceitos importantes tratados nesse tutorial:

  • padrão async/await
  • ícones do React
  • useEffect()
  • useState()

Como criar um slider de revisões

react-slider
Imagem retirada de https://react-projects.netlify.app/

Neste tutorial, você aprenderá a criar um slider de revisões que alterna para uma nova revisão depois de alguns segundos.

Esse é um recurso interessante e que você pode incorporar a um site de comércio eletrônico ou a um portfólio.

Conceitos importantes tratados nesse tutorial:

  • ícones do React
  • useEffect()
  • useState()
  • map()

Como criar um gerador de cores

react-color-generator
Imagem retirada de https://react-projects.netlify.app/

Neste tutorial, você aprenderá a criar um gerador de cores. Esse é um bom projeto para continuar a prática de trabalho com hooks e com setTimeout.

Conceitos importantes tratados nesse tutorial:

  • setTimeout()
  • clearTimeout()
  • useEffect()
  • useState()
  • instrução try...catch
  • event.preventDefault()

Como criar uma página de menu de pagamento do Stripe

stripe-page
Imagem retirada de https://react-projects.netlify.app/

Neste tutorial, você aprenderá a criar uma página de menu de pagamento do Stripe. Esse projeto dará a você uma boa prática sobre como criar uma página de entrada (landing page) de um produto usando componentes do React.

Conceitos importantes tratados nesse tutorial:

  • ícones do React
  • useRef()
  • useEffect()
  • useState()
  • useContext()

Como criar uma página de carrinho de compras

shopping-cart-page
Imagem retirada de https://react-projects.netlify.app/

Neste tutorial, você aprenderá a criar uma página de carrinho de compras que atualiza e exclui itens. Esse projeto também será uma boa apresentação ao hook useReducer.

Conceitos importantes tratados nesse tutorial:

  • map()
  • filter()
  • elementos <svg>
  • useReducer()
  • useContext()

Como criar uma página de busca de coquetéis

cocktails-page
Imagem retirada de https://react-projects.netlify.app/

Neste tutorial, você aprenderá a criar uma página de busca de coquetéis. Esse projeto dará a você uma apresentação sobre como usar o router do React.

O router do React dá a você a capacidade de criar uma navegação para seu site da web e alterar visualizações de componentes diferentes, como uma página Sobre ou uma página de contato.

Conceitos importantes tratados nesse tutorial:

  • <Router>
  • <Switch>
  • useCallback()
  • useContext()
  • useEffect()
  • useState()

Projetos em TypeScript

Se você não conhece o TypeScript, sugiro assistir este curso antes de seguir com os próximos projetos.

Como criar um app de perguntas e respostas com React e TypeScript

quiz-app

Neste tutorial, Thomas Weibenfalk ensinará você a criar um app de perguntas e respostas com React e TypeScript. É uma boa oportunidade para praticar o básico de TypeScript.

Conceitos importantes tratados nesse tutorial:

  • React.FC
  • componentes estilizados
  • dangerouslySetInnerHTML

Como criar o jogo de Arkanoid com TypeScript

akrnoid-game

Neste tutorial, Thomas Weibenfalk ensinará você sobre como criar o jogo clássico de Arkanoid em TypeScript. É um bom projeto, que dará a você a prática de trabalho com os conceitos básicos de TypeScript.

Conceitos importantes tratados nesse tutorial:

  • Tipos
  • Classes
  • Módulos
  • HTMLCanvasElement


Espero que você tenha gostado dessa lista de 40 tutoriais de projetos em JavaScript puro, React e TypeScript.

Feliz programação!