Aprende CSS Grid con un juego de jardín virtual

(cssgridgarden.com)

5 puntos por GN⁺ 2024-06-04 | 1 comentarios | Compartir por WhatsApp

Introducción a Grid Garden

Grid Garden es un juego para aprender el sistema de diseño CSS Grid.
El usuario avanza en el juego usando la propiedad grid-column-start para regar el área donde están las zanahorias.

grid-column-start: 3; significa regar el área que comienza desde la tercera línea vertical de la cuadrícula.
Cada columna y fila de la cuadrícula está configurada para ocupar 20%.

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

Valor educativo: Grid Garden es una buena herramienta para aprender de forma entretenida el sistema de diseño CSS Grid a través de un juego.
Importancia de la práctica: Herramientas de aprendizaje interactivas como esta permiten aprender con mayor eficacia mediante la práctica más que solo con teoría.
Escalabilidad técnica: CSS Grid y Flexbox son tecnologías importantes en el diseño web moderno, por lo que es importante entenderlas bien.
Recomendación de otras herramientas: Además de CSS Grid, también se recomienda aprovechar otras herramientas de aprendizaje como CSS Diner.
Precaución: Después de aprender los conceptos básicos con el juego, también es importante aprender cómo aplicarlos en proyectos reales.

GN⁺ 2024-06-04

La serie de Rachel Andrews también ayuda mucho a los desarrolladores backend a construir aplicaciones de UI modernas.
Hicieron una sesión de show-and-tell de 30 minutos con el equipo, y fue útil incluso para que personas no desarrolladoras participaran y desarrollaran habilidades básicas de programación.
El juego es divertido, pero puede hacer que uno se concentre solo en resolver el problema, lo que dificulta una comprensión más profunda. Como solución, se propone una penalización por número de intentos.
La ventaja del juego es que permite verificar la respuesta revisando la posición absoluta, y la desventaja es que envía Google Analytics en cada intento.
CSS Zen Garden fue en su momento una excelente fuente para aprender CSS y obtener inspiración de diseño.
Este juego y Flexbox Froggy son buenos para aprender layouts de CSS de forma divertida.
Después de jugar los primeros 10 niveles, aumentó la frustración con CSS.
Se comparte el enlace a una discusión grande anterior.
Flexbox Froggy fue más útil que Grid Garden. CSS Grid no termina de entenderse bien.
Había curiosidad por saber si recientemente se incluyó Subgrid.