Flexbox Froggy

 (flexboxfroggy.com)
2 pontos por GN⁺ 2023-10-01 | 1 comentários | Compartilhar no WhatsApp
  • Um jogo de aprendizado interativo em que você digita CSS flexbox diretamente para enviar sapos até as folhas de vitória-régia, permitindo ver na tela o efeito das propriedades de alinhamento em tempo real
  • No primeiro nível, com display: flex; já definido em #pond, você muda o alinhamento horizontal usando justify-content
  • justify-content ajusta a disposição dos itens dentro do contêiner com valores como flex-start, flex-end, center, space-between e space-around
  • Por exemplo, ao inserir justify-content: flex-end;, o sapo se move para a folha de vitória-régia à direita, permitindo relacionar a propriedade ao resultado
  • O jogo tem 24 níveis no total e oferece vários idiomas, incluindo coreano, além de modo de correção para daltonismo

Aprendendo CSS flexbox por meio de um jogo

  • Flexbox Froggy é um jogo para aprender CSS flexbox enviando Froggy e seus amigos às posições-alvo
  • Ao escrever propriedades na área de edição de código CSS de #pond na tela, a posição do sapo muda
  • O primeiro nível é um desafio em que se usa justify-content para enviar o sapo até a folha de vitória-régia à direita
  • O código básico exibe a seguinte estrutura
    • #pond {
    • display: flex;
    • }

Alinhamento horizontal aprendido com justify-content

  • justify-content é uma propriedade que alinha itens na direção horizontal
  • Os valores disponíveis são os seguintes
    • flex-start: alinha os itens à esquerda do contêiner
    • flex-end: alinha os itens à direita do contêiner
    • center: alinha os itens ao centro do contêiner
    • space-between: coloca espaçamento igual entre os itens
    • space-around: coloca espaçamento igual ao redor dos itens
  • Ao escrever justify-content: flex-end;, o sapo se move para a direita, permitindo comparar imediatamente o valor da propriedade e o resultado do posicionamento

Estrutura e materiais de aprendizado relacionados

  • O jogo é exibido como Level 1 of 24, e as configurações de idioma incluem vários idiomas, entre eles o coreano
  • Como jogos relacionados para aprender mais CSS, há links para Grid Garden e Anchoreum

Leituras relacionadas

1 comentários

 
GN⁺ 2023-10-01
Opiniões no Hacker News

  • Há também outros materiais em formato de jogo bons para aprender CSS
    https://cssgridgarden.com/ — é quase um Froggy para Grid
    https://cssbattle.dev/ — uma plataforma para resolver vários desafios, com uma comunidade grande
    https://flukeout.github.io/ — ensina seletores CSS
    https://css-animations.io/ — para praticar animações CSS

  • Mesmo trabalhando com CSS há anos, propriedades relacionadas a flex como align-content e align-items sempre me confundem
    É a sensação de sempre tentar encaixar um cabo USB do lado errado, e o mesmo vale para align e justify
    CSS Grid também é realmente incrível. Hoje temos tantas ótimas opções de layout que estamos bem servidos

    • Escrevo HTML desde meados dos anos 90 e trabalho como desenvolvedor web há 10 anos, mas ainda consulto com frequência o guia de flexbox e o guia de grid do CSS Tricks
      Também imprimi as tabelas-resumo dos dois e deixo na mesa; são materiais realmente valiosos
      [0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      [1] https://css-tricks.com/snippets/css/complete-guide-grid/
    • A regra é esta: justify- corresponde ao eixo principal, align- ao eixo transversal
      -content é usado para trilhas de grid ou linhas de um contêiner com flex-wrap, e -items é usado para elementos filhos individuais, ou seja, itens dentro de uma linha ou célula de grid
      Ainda assim, eu gostaria que os nomes fossem mais claros
    • Provavelmente tentaram generalizar para flex-direction como um todo. Por isso uma propriedade como flex-align acaba dependendo da direção do elemento pai
      Na prática, é muito raro obter grande benefício mudando a direção
      Não sei se esse é o único motivo, então não vou afirmar que foi uma má escolha, mas também nunca consigo lembrar qual é qual
      Seria melhor se os nomes deixassem os eixos explícitos, ou se as propriedades fossem independentes da direção do pai; até lá, é preciso usar uma cola
    • Flexbox e Grid levam toda a atenção, mas não devemos esquecer a utilidade de columns: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
    • Eu simplesmente não consigo fixar bem na cabeça flex-basis, flex-grow e flex-shrink
      Mas, como não preciso me preocupar com isso com frequência, talvez seja por isso que não fique na memória

  • Aprendi muita coisa com jogos desse tipo. Também aprendi Vim com https://vim-adventures.com/, e hoje praticamente não consigo viver sem Vim

  • Posts anteriores no HN:
    https://news.ycombinator.com/item?id=30251054 2022, 317 pontos, 31 comentários
    https://news.ycombinator.com/item?id=22629903 2020, 27 pontos, 2 comentários
    https://news.ycombinator.com/item?id=21796926 2019, 2 pontos, 0 comentários
    https://news.ycombinator.com/item?id=18752031 2018, 3 pontos, 0 comentários
    https://news.ycombinator.com/item?id=18731852 2018, 6 pontos, 1 comentário
    https://news.ycombinator.com/item?id=15605783 2017, 4 pontos, 0 comentários
    https://news.ycombinator.com/item?id=14349739 2017, 3 pontos, 0 comentários
    https://news.ycombinator.com/item?id=10652909 2015, 315 pontos, 69 comentários

  • Excelente. Usei isso quando estava aprendendo flexbox antigamente
    Também há https://codepip.com/games/grid-garden/, feito pelo mesmo criador, que ensina CSS Grid com a mesma abordagem

    • Acho que jogos são uma forma realmente boa de aprender CSS
      Parece que eles criam um caminho de aprendizado muito natural, em que você vai resolvendo problemas que parecem fáceis graças ao que já aprendeu, mas que ficam cada vez mais difíceis
      Antigamente me diverti com este jogo para aprender seletores CSS: https://flukeout.github.io/

  • O Guess CSS também tem uma seção de Flexbox, mas o foco é mais em ler CSS do que em escrevê-lo: https://www.guess-css.app/

    • Com certeza eu não entendo absolutamente nada de position em CSS
      Eu conseguia continuar acertando os outros problemas, mas errava position sem parar

  • Muito útil. Eu sempre acabo pesquisando alinhamento vertical com flexbox
    Para ajudar a relembrar rapidamente o flexbox quando estou com pressa, seria bom ter um recurso em que você arrasta e solta o sapo em uma grade 3x3 e ele gera o código CSS flexbox correspondente
    Ainda assim, é um tutorial muito bem-feito
    Digo isso porque, pessoalmente, desisti de acompanhar continuamente os novos recursos de CSS. Uso CSS de forma intermitente desde a época do IE7 e, depois de passar pela era de escrever vendor prefixes à mão e pelos novos recursos que o Chrome Canary enfiava goela abaixo, não tenho energia para manter truques de CSS na cabeça

    • Hoje quase não existem mais truques, e não há tanta coisa para acompanhar. Flexbox e Grid são, na prática, o estágio final
      Para a maioria das UIs, flexbox basta; basicamente é uma ferramenta para organizar itens na vertical e na horizontal, como stack/group ou vbox/hbox
      É só aprender flexbox. É a coisa mais útil que entrou no layout CSS e é realmente simples. Espaçamento é gap, posicionamento é mais ou menos justify e align, então 99% acaba aí

  • Gosto do Flexbox Froggy. Dá para dizer que uma geração inteira de desenvolvedores aprendeu flexbox com esse site. Eu também

    • No meu caso, foi graças ao Flexbox Froggy que o conceito de flexbox finalmente fez sentido na minha cabeça
      Na época, eu já usava CSS havia 15 anos
      É uma ferramenta educacional incrível

  • O guia interativo de flexbox do Josh Comeau também vale a pena ver: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

  • Legal. Seria bom se houvesse também uma versão para Tailwind