Aprende CSS Grid con un juego de jardinería virtual

 (cssgridgarden.com)
5 puntos por GN⁺ 2024-06-04 | 1 comentarios | Compartir por WhatsApp
  • Grid Garden es una herramienta de aprendizaje en forma de juego donde escribes código CSS para regar un jardín de zanahorias, practicando la maquetación con CSS Grid paso a paso
  • El primer paso consiste en indicar la columna inicial con la propiedad grid-column-start para que el agua llegue solo al área donde están las zanahorias
  • grid-column-start: 3; hace que el área de riego comience desde la tercera línea vertical de la cuadrícula contando desde la izquierda
  • El jardín de ejemplo está compuesto por una cuadrícula de 5x5 configurada con display: grid, grid-template-columns y grid-template-rows, donde cada fila y columna ocupa 20%
  • En total hay 28 niveles, y si quieres seguir aprendiendo CSS puedes continuar con Flexbox Froggy y Anchoreum

Cómo aprender CSS Grid como si fueran reglas de un juego

  • Grid Garden es un juego donde haces crecer un jardín de zanahorias escribiendo código CSS
  • El jugador ajusta propiedades de CSS Grid para regar solo las zonas donde hay zanahorias
  • En el primer nivel, se usa grid-column-start para indicar en qué columna comienza el riego

Primer nivel: grid-column-start y un jardín de 5x5

  • grid-column-start: 3; hace que el área de riego comience desde la tercera línea vertical de la cuadrícula desde la izquierda
  • #garden en el código de ejemplo está configurado como un contenedor de CSS Grid
    • display: grid;
    • grid-template-columns: 20% 20% 20% 20% 20%;
    • grid-template-rows: 20% 20% 20% 20% 20%;
  • Esta configuración crea una cuadrícula de 5x5 donde columnas y filas se dividen en bloques de 20%

Estructura de niveles y juegos para seguir practicando

  • En pantalla se muestra el nivel 1 de un total de 28 niveles
  • También se recomiendan Flexbox Froggy y Anchoreum como juegos para seguir aprendiendo CSS

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-06-04
Comentarios en Hacker News

  • Siempre me ha parecido que esta serie de Rachel Andrews es un recurso de aprendizaje excelente: https://www.smashingmagazine.com/2020/01/understanding-css-g...
    Incluso viniendo del backend, me dio una base sólida para crear apps de UI modernas de forma ligera y simple
    No necesité ni Bootstrap ni Tailwind

    • Bootstrap abstrae el CSS para que puedas sacar cosas sencillas aunque no sepas mucho de CSS, pero Tailwind es más bien CSS tokenizado
      No puedes usar Tailwind sin saber CSS, y en el proceso terminas aprendiendo CSS
      Por eso incluso se siente bastante ligero y simple
    • También recomiendo la serie de videos Layout Land de Jen Simmons: https://www.youtube.com/layoutland
    • Bootstrap está más orientado a cuando desde el inicio no quieres preocuparte por CSS Grid o Flexbox
      En cambio, Tailwind no te resuelve esa parte
      Si no conoces Grid o Flexbox, Tailwind puede ser tan doloroso como CSS puro

  • Este juego está bastante bien y es divertido, pero es muy tentador limitarse a probar valores al azar para resolver el problema actual en vez de enfocarse en “cómo funciona realmente”
    Para llevar a una comprensión más profunda, podría dar más libertad para resolver los problemas, pero poner una pequeña penalización después de 2 o 3 intentos

    • Desde la perspectiva de alguien que escribe código frontend, CSS casi siempre implica prueba y error y, como dijiste, muchas veces se parece a fuerza bruta
      Hay momentos en los que tienes que ir golpeando problemas parecidos, aplicar lo aprendido y seguir moviéndole hasta que funcione
    • No puedes culpar al juego por un problema de autocontrol

  • Algunas notas misceláneas:

    1. Lo bueno: valida la respuesta por la posición absoluta
      Así que si la solución es válida, puedes pasar el nivel incluso con enfoques que no usan grid
    2. Lo malo: manda eventos a Google Analytics en cada intento
    • Sobre el punto 1, supongo que todos estaremos de acuerdo en que la solución más sólida para el primer ejercicio es position: relative; left: 31.4em;

  • En un lugar donde trabajé antes hacíamos un show-and-tell semanal de unos 30 minutos con el equipo, y una semana llevé esto para que personas que no programaban intentaran resolverlo
    Fue interesante ver hasta dónde podían llegar; algunas personas lo entendían de inmediato y a otras les costaba bastante
    En general a todos les gustó, y me pareció una buena forma de dar un sentido básico de la programación a personas que probablemente nunca van a programar en su vida
    Incluso años después compañeros lo mencionaban como diciendo “¿esto es el tipo de cosas que haces todo el día?”, y me daba risa porque veían como magia la parte más fácil de mi trabajo
    Aun así, estuvo bien que por haberlo probado un poco terminaran respetando más el trabajo

  • Yo pensaba que Flexbox había cambiado por completo el panorama de CSS, y luego llegó Grid, que fue realmente increíble y predecible
    Ahora el dolor que queda en CSS son casos raros como “un componente debería ocupar el espacio sobrante que sus elementos hermanos no usan, y uno de sus hijos también debería ocupar todo lo que sus hermanos no usan, pero si no alcanza el espacio entonces debería volverse scroll overflow”
    Hay varios casos donde se enredan las interacciones extrañas entre Flexbox y Grid, junto con la prioridad del layout de cálculo de tamaños, y todavía no los entiendo del todo
    Puede que la mayor parte del problema sea mía, pero a diferencia de Flexbox o Grid por sí mismos, eso todavía no se siente intuitivo

  • Por un momento pensé que se trataba de https://csszengarden.com/pages/about/
    Hace mucho era un recurso increíble para aprender CSS y conseguir inspiración de diseño

    • Sigo viendo esa época como la edad dorada del desarrollo web
      Fue cuando empezaban a verse los frutos del movimiento de estándares web
      Lamentablemente después llegó React y las cosas buenas se fueron por la ventana
      Parece que la sopa de etiquetas se vuelve aceptable si está enterrada en lo profundo de node_modules

  • Algunas discusiones grandes anteriores:
    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 juego y Flexbox Froggy son una forma divertida de iniciarse en el layout con CSS

    • El sitio sí enlaza a Flexbox Froggy, pero pasando por un enlace que requiere registrar una cuenta
      Si quieres entrar directo, ve a https://flexboxfroggy.com/

  • Esperaba que esto me ayudara a encontrar una buena solución para un problema pequeño y simple de frontend web en el que estoy trabajando
    Pero después de hacer los primeros 10 niveles, terminé odiando más CSS

  • No me gusta CSS Grid porque casi le quita la estructura semántica al HTML
    Con Flexbox, al menos el árbol HTML corresponde a alguna estructura de la página, pero cuando usas CSS Grid termina viéndose así
    <-! random amount of divs without classnames -->
    Y entonces, para entender qué está pasando en la página, de pronto tienes que contrastarlo con el CSS
    Es muy efectivo, pero se ve feo

    • Aunque ya es otro tema, esto podría resolverse con un IDE que te deje manipularlo visualmente sin tener que entender todas las relaciones entre HTML y CSS ni estar comparando símbolos manualmente