Skip to content

Instantly share code, notes, and snippets.

@tarmann
Last active June 26, 2025 10:01
Show Gist options
  • Save tarmann/09e22b155fd4df3b1be4ff4750574f8f to your computer and use it in GitHub Desktop.
Save tarmann/09e22b155fd4df3b1be4ff4750574f8f to your computer and use it in GitHub Desktop.

Aprenda desenvolvimento front-end na prática

Refiz o wordle só que com características de animais para minha filha: https://jsfiddle.net/azkv4d5r/1/

As tecnologias utilizadas no projeto são bem básicas:

  • HTML para a estrutura da página
  • JavaScript para a lógica do jogo
  • CSS com a biblioteca Tailwind para os estilos

Minha sugestão é que você explore o projeto com calma: Tente entender como cada parte funciona, veja o que pode ser melhorado, pense em como dar uma nova cara para o jogo — por exemplo, mudando o tema de animais para planetas, países, signos etc.

Também é interessante pensar em funcionalidades que possam melhorar a experiência do usuário.

Alguns exemplos de melhorias simples:

  • Focar automaticamente no campo de texto assim que a página carrega
  • Permitir enviar a resposta ao pressionar ENTER (sem precisar clicar no botão)
  • Colorir as células da tabela: verde quando o valor estiver correto, vermelho quando estiver errado

A ideia é usar esse projeto como base para aprender os fundamentos de HTML, JavaScript e Tailwind na prática.

Depois que estiver claro como funciona e estiver confortável com o projeto, tente fazer sua versão mudando a cara dele completamente, mudando o tema do jogo (planetas, personagens da marvel, etc).

Use o ChatGPT para perguntar coisas que não estiver entendendo. Busque tuturiais básicos de HTML e CSS para entender os fundamentos de construção de UI.

Em seguida busque tutoriais básicos de JavaScript para entender como a linguagem funciona.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment