Flexbox Froggy

 (flexboxfroggy.com)
2 puntos por GN⁺ 2023-10-01 | 1 comentarios | Compartir por WhatsApp
  • Artículo que presenta Flexbox Froggy, un juego que ayuda a aprender código CSS
  • Un juego en el que usas la propiedad justify-content para guiar a la rana hasta los nenúfares
  • La propiedad justify-content alinea horizontalmente los elementos dentro de un contenedor
  • La propiedad permite varios valores, como flex-start (alinea los elementos a la izquierda), flex-end (alinea los elementos a la derecha), center (alinea los elementos al centro), space-between (mismo espacio entre los elementos) y space-around (mismo espacio alrededor de los elementos)
  • Se ofrece como ejemplo justify-content: flex-end; para mover la rana hacia la derecha
  • El juego Flexbox Froggy, creado por Codepip, incluye enlaces a GitHub y Twitter
  • Artículo que recomienda Grid Garden para quienes quieren aprender CSS Grid

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-10-01
Comentarios en Hacker News
  • Un artículo sobre 'Flexbox Froggy', un juego para aprender CSS
  • Juegos similares para aprender CSS recomendados por los usuarios: cssgridgarden.com, cssbattle.dev, flukeout.github.io y css-animations.io
  • Usuarios expresan dificultad para recordar propiedades de flex como align-content y align-items, comparándolo con el problema común de conectar mal un cable USB
  • Usuarios elogian CSS Grid y las opciones de layout que ofrece
  • Usuarios comparten que aprendieron mucho a través de juegos como 'Flexbox Froggy'
  • Una hoja de referencia creada por un usuario para quienes tienen dificultad para recordar todas las propiedades de flexbox: darekkay.com/flexbox-cheatsheet
  • Los usuarios consideran que 'Flexbox Froggy' es especialmente útil para refrescar conocimientos sobre flexbox
  • Un usuario propone una función para arrastrar y soltar la rana en una cuadrícula de 3x3 para obtener como salida código CSS de flexbox
  • Se recomienda otro juego más enfocado en leer CSS, guess-css.app
  • Usuarios discuten sus experiencias con flexbox; algunos aprendieron sobre la propiedad order y otros expresan confusión por la diferencia de nombres entre justify-content y align-items
  • Otro juego recomendado como una forma divertida de aprender CSS: flexboxzombies.com