Aprenda CSS Grid com um jogo de jardinagem virtual

Introdução ao Grid Garden

O que é o Grid Garden?

• Grid Garden é um jogo para aprender o layout de grade do CSS.
• O usuário avança no jogo usando a propriedade grid-column-start para regar a área onde estão as cenouras.

Explicação do código de exemplo

• grid-column-start: 3; significa regar a área que começa a partir da terceira linha vertical da grade.
• Cada coluna e linha da grade é configurada para ocupar 20%.

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {}

Material adicional de aprendizado

• É possível aprender CSS Flexbox com o Flexbox Froggy.

Opinião do GN⁺

• Valor educacional: o Grid Garden é uma ótima ferramenta para aprender layout de grade do CSS de forma divertida por meio de um jogo.
• Importância da prática: ferramentas de aprendizado interativas como essa ajudam a aprender de forma mais eficaz pela prática do que apenas pela teoria.
• Escalabilidade técnica: CSS Grid e Flexbox são tecnologias importantes no design web moderno, por isso é essencial entendê-las bem.
• Recomendação de outras ferramentas: além de CSS Grid, também vale a pena experimentar outras ferramentas de aprendizado, como o CSS Diner.
• Observação: depois de aprender os conceitos básicos com o jogo, também é importante estudar como aplicá-los em projetos reais.

[GN⁺]

Comentários do Hacker News

• A série da Rachel Andrews ajuda bastante até desenvolvedores de backend a construir apps de UI modernos.
• Fizeram um show-and-tell de 30 minutos com a equipe, e a participação de pessoas não desenvolvedoras foi útil para desenvolver habilidades básicas de programação.
• O jogo é divertido, mas pode fazer a pessoa focar só em resolver os desafios, o que atrapalha uma compreensão mais profunda. Como solução, foi sugerida uma penalidade pelo número de tentativas.
• A vantagem do jogo é permitir verificar posições absolutas para validar a resposta, e a desvantagem é enviar dados ao Google Analytics a cada tentativa.
• O CSS Zen Garden já foi uma ótima fonte para aprender CSS e buscar inspiração de design.
• Este jogo e o Flexbox Froggy são bons para aprender layout em CSS de forma divertida.
• Depois de jogar os 10 primeiros níveis, a frustração com CSS aumentou.
• Foi compartilhado o link para uma grande discussão anterior.
• O Flexbox Froggy foi mais útil do que o Grid Garden. CSS Grid ainda não faz muito sentido.
• Ficou a dúvida se o Subgrid foi incluído recentemente.