Flexbox Froggy

 (flexboxfroggy.com)
2 pontos por GN⁺ 2023-10-01 | 1 comentários | Compartilhar no WhatsApp
  • Artigo apresentando o jogo "Flexbox Froggy", que ajuda no aprendizado de código CSS
  • Um jogo em que você guia os sapos até as folhas de lótus usando a propriedade justify-content
  • A propriedade justify-content alinha os itens horizontalmente dentro de um contêiner
  • A propriedade aceita vários valores, como flex-start (alinha os itens à esquerda), flex-end (alinha os itens à direita), center (alinha os itens ao centro), space-between (mesmo espaçamento entre os itens) e space-around (mesmo espaçamento ao redor dos itens)
  • É apresentado um exemplo em que justify-content: flex-end; move o sapo para a direita
  • O jogo "Flexbox Froggy", criado pela Codepip, inclui links para GitHub e Twitter
  • O artigo recomenda "Grid Garden" para quem quer aprender CSS Grid

Leituras relacionadas

1 comentários

 
GN⁺ 2023-10-01
Comentários do Hacker News
  • Artigo sobre 'Flexbox Froggy', um jogo para aprender CSS
  • Usuários recomendam jogos parecidos para aprender CSS, cssgridgarden.com, cssbattle.dev, flukeout.github.io, e css-animations.io
  • Usuários expressam dificuldade para lembrar propriedades de flex como align-content e align-items, comparando com o problema comum de conectar um cabo USB do lado errado
  • Usuários elogiam o CSS Grid e as opções de layout que ele oferece
  • Usuários compartilham que aprenderam muito por meio de jogos como 'Flexbox Froggy'
  • Uma cola criada por um usuário para quem tem dificuldade de lembrar todas as propriedades do flexbox, darekkay.com/flexbox-cheatsheet
  • Usuários consideram 'Flexbox Froggy' especialmente útil para relembrar conhecimentos sobre flexbox
  • Um usuário sugere um recurso em que seria possível arrastar e soltar o sapo em uma grade 3x3 para gerar como saída o código CSS de flexbox
  • Outro jogo mais focado em ler CSS, guess-css.app, é recomendado
  • Usuários discutem experiências relacionadas a flexbox; alguns aprenderam sobre a propriedade order, enquanto outros expressam confusão com a diferença de nomenclatura entre justify-content e align-items
  • Outro jogo recomendado como forma divertida de aprender CSS, flexboxzombies.com