Aprendendo CSS Grid com um jogo de jardim virtual

 (cssgridgarden.com)
5 pontos por GN⁺ 2024-06-04 | 1 comentários | Compartilhar no WhatsApp
  • Grid Garden é uma ferramenta de aprendizado em formato de jogo em que você escreve código CSS para regar uma horta de cenouras, permitindo praticar layouts com CSS Grid passo a passo
  • A primeira etapa começa definindo a coluna inicial com a propriedade grid-column-start, para que a água alcance apenas a área onde estão as cenouras
  • grid-column-start: 3; faz a área regada começar a partir da terceira linha vertical da grade contando da esquerda
  • O jardim de exemplo é uma grade 5x5 configurada com display: grid, grid-template-columns e grid-template-rows, com cada linha e coluna dividida em 20%
  • Ao todo, são 28 níveis; para quem quiser aprender mais CSS, é possível continuar com Flexbox Froggy e Anchoreum

Aprendendo CSS Grid como regras de um jogo

  • Grid Garden é um jogo em que você digita código CSS para cultivar uma horta de cenouras
  • O jogador ajusta propriedades de CSS Grid para regar apenas a área onde estão as cenouras
  • No primeiro nível, grid-column-start define a posição da coluna onde a água começa

Primeiro nível: grid-column-start e uma horta 5x5

  • grid-column-start: 3; faz a área regada começar a partir da terceira linha de limite vertical da grade, contando da esquerda
  • No código de exemplo, #garden é definido como um contêiner CSS Grid
    • display: grid;
    • grid-template-columns: 20% 20% 20% 20% 20%;
    • grid-template-rows: 20% 20% 20% 20% 20%;
  • Essa configuração cria uma grade 5x5 em que colunas e linhas são divididas em 20% cada

Estrutura dos níveis e jogos para continuar

  • A tela mostra o nível 1 entre 28 níveis
  • Como jogos para aprender mais CSS, também são indicados Flexbox Froggy e Anchoreum

Leituras relacionadas

1 comentários

 
GN⁺ 2024-06-04
Comentários do Hacker News

  • Sempre achei esta série da Rachel Andrews um material de aprendizado excelente: https://www.smashingmagazine.com/2020/01/understanding-css-g...
    Mesmo vindo do backend, isso me deu uma base sólida para criar apps de UI modernos de forma leve e simples
    Não precisei nem de Bootstrap nem de Tailwind

    • O Bootstrap abstrai o CSS para que você consiga se virar com coisas simples mesmo sem entender muito de CSS, enquanto o Tailwind é mais parecido com CSS tokenizado
      Você não consegue usar Tailwind sem saber CSS, e acaba aprendendo CSS no processo de uso
      Por isso, ele até parece bem leve e simples
    • Também recomendo a série de vídeos Layout Land, da Jen Simmons: https://www.youtube.com/layoutland
    • O Bootstrap é mais para quando você não quer se preocupar com CSS Grid ou Flexbox desde o começo
      Já o Tailwind não faz essa parte por você
      Se você não entende Grid ou Flexbox, o Tailwind pode ser tão sofrido quanto CSS puro

  • Este jogo é bem legal e divertido, mas em vez de focar em “como isso realmente funciona”, ele te tenta a sair testando valores até resolver só o problema atual
    Para levar a uma compreensão mais profunda, talvez desse para dar mais liberdade na resolução, mas aplicar uma pequena penalidade depois de 2 ou 3 tentativas

    • Do ponto de vista de quem escreve código frontend, especialmente CSS sempre envolve tentativa e erro e, como foi dito, muitas vezes fica perto de tentativa aleatória
      Ao reaproveitar o que você aprendeu em problemas parecidos, há momentos em que você só precisa ir mexendo até funcionar
    • Não dá para culpar o jogo por falta de autocontrole

  • Algumas notas diversas:

    1. Ponto positivo: ele valida a resposta pela posição absoluta
      Então, se a solução for válida, dá até para passar de fase usando abordagens que nem são Grid
    2. Ponto negativo: ele envia Google Analytics a cada tentativa
    • Sobre o item 1, acho que todos concordamos que a solução mais robusta para o primeiro desafio é position: relative; left: 31.4em;

  • Em um lugar onde trabalhei antes, fazíamos um show and tell semanal de uns 30 minutos com a equipe, e em uma das semanas eu trouxe isso para ver se pessoas que não programavam conseguiam chegar às respostas
    Foi interessante ver até onde conseguiam ir; algumas entenderam na hora e outras acharam bem difícil
    No geral, todo mundo gostou, e achei que foi uma boa forma de dar uma noção básica de programação para pessoas que provavelmente nunca vão programar na vida
    Mesmo anos depois, colegas ainda comentavam algo como “é isso que você faz o dia inteiro?”, o que era engraçado porque olhavam como se fosse magia, mesmo sendo a parte mais fácil do meu trabalho
    Ainda assim, foi bom porque, por terem experimentado um pouco, parece que passaram a respeitar mais o trabalho

  • Eu achava que o Flexbox tinha mudado o jogo no CSS, aí veio o Grid e foi realmente impressionante e previsível
    Agora a dor que sobra no CSS são casos estranhos como “um componente precisa ocupar todo o espaço restante que os elementos irmãos não usam, e um dos filhos dele também precisa ocupar tudo o que os irmãos dele não usam, mas quando faltar espaço isso deve virar overflow com rolagem”
    Existem vários casos envolvendo interações esquisitas entre Flexbox e Grid, além da prioridade no layout de dimensionamento, e eu ainda não entendi tudo completamente
    Pode ser problema meu na maior parte dos casos, mas, ao contrário de Flexbox ou Grid em si, isso ainda não parece intuitivo

  • Por um instante achei que fosse sobre https://csszengarden.com/pages/about/
    Há muito tempo, aquilo era um recurso incrível para aprender CSS e buscar inspiração de design

    • Ainda vejo aquela época como a era de ouro do desenvolvimento web
      Foi quando os frutos do movimento dos padrões web começaram a aparecer
      Infelizmente, depois veio o React e as coisas boas foram jogadas pela janela
      Pelo visto, até sopa de tags fica palatável se estiver enterrada no fundo do node_modules

  • Algumas discussões grandes antigas:
    2019: https://news.ycombinator.com/item?id=21050501
    2018: https://news.ycombinator.com/item?id=18753358
    2017: https://news.ycombinator.com/item?id=14041367

  • Este jogo e o Flexbox Froggy são ótimos para começar a aprender layout em CSS de forma divertida

    • O site até linka para o Flexbox Froggy, mas passa por uma página que exige cadastro de conta
      Para acessar direto, é só ir em https://flexboxfroggy.com/

  • Eu estava torcendo para que isso ajudasse a encontrar uma boa solução para um problema pequeno e simples de frontend web em que estou trabalhando
    Mas depois de fazer os 10 primeiros níveis, passei a odiar ainda mais o CSS

  • O motivo de eu não gostar de CSS Grid é que ele praticamente tira a estrutura semântica do HTML
    O Flexbox pelo menos mantém alguma correspondência entre a árvore HTML e a estrutura da página, mas com CSS Grid fica uma coisa assim
    <-! random amount of divs without classnames -->
    Aí, para entender o que está acontecendo na página, você de repente precisa comparar com o CSS
    É muito eficaz, mas feio de ver

    • É outro assunto, mas isso talvez pudesse ser resolvido com uma IDE que permitisse manipulação visual sem precisar entender todas as relações entre HTML e CSS e ficar comparando símbolos manualmente