Flexbox Froggy

 (flexboxfroggy.com)
2 puntos por GN⁺ 2023-10-01 | 1 comentarios | Compartir por WhatsApp
  • Un juego de aprendizaje interactivo en el que escribes CSS flexbox directamente para llevar las ranas a los nenúfares, y puedes ver de inmediato en pantalla el efecto de las propiedades de alineación
  • El primer nivel consiste en cambiar la alineación horizontal con justify-content, con display: flex; ya configurado en #pond
  • justify-content ajusta la distribución de los elementos dentro del contenedor con valores como flex-start, flex-end, center, space-between y space-around
  • Por ejemplo, si escribes justify-content: flex-end;, la rana se mueve al nenúfar de la derecha, lo que permite relacionar la propiedad con el resultado
  • En total tiene 24 niveles y ofrece varios idiomas, incluido español, además de un modo de corrección para daltonismo

Aprender CSS flexbox con un juego

  • Flexbox Froggy es un juego para aprender CSS flexbox llevando a Froggy y sus amigos a la posición objetivo
  • Al escribir propiedades en el área de edición de código CSS de #pond en pantalla, cambia la posición de la rana
  • El primer nivel plantea usar justify-content para llevar la rana al nenúfar de la derecha
  • El código base muestra la siguiente estructura
    • #pond {
    • display: flex;
    • }

Alineación horizontal con justify-content

  • justify-content es una propiedad que alinea elementos en dirección horizontal
  • Los valores disponibles son los siguientes
    • flex-start: alinea los elementos a la izquierda del contenedor
    • flex-end: alinea los elementos a la derecha del contenedor
    • center: alinea los elementos al centro del contenedor
    • space-between: deja el mismo espacio entre los elementos
    • space-around: deja el mismo espacio alrededor de los elementos
  • Al usar justify-content: flex-end;, la rana se mueve hacia la derecha, lo que permite comparar de inmediato el valor de la propiedad y el resultado de la distribución

Estructura y recursos de aprendizaje relacionados

  • El juego se muestra como Level 1 of 24 y la configuración de idioma incluye varios idiomas, entre ellos coreano
  • Como juegos relacionados para aprender más CSS, enlaza a Grid Garden y Anchoreum

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-10-01
Opiniones de Hacker News

  • También hay otros recursos en forma de juego buenos para aprender CSS
    https://cssgridgarden.com/ — parecido a Froggy, pero para Grid
    https://cssbattle.dev/ — una plataforma para resolver desafíos variados, con una comunidad grande
    https://flukeout.github.io/ — para aprender selectores CSS
    https://css-animations.io/ — para practicar animaciones CSS

  • Incluso después de trabajar con CSS durante años, las propiedades relacionadas con flex, como align-content y align-items, me siguen confundiendo cada vez
    Se siente como conectar siempre al revés un cable USB, y pasa lo mismo con align y justify
    CSS Grid también es realmente impresionante. Ahora tenemos tantas buenas opciones de layout que, en cierto modo, estamos disfrutando de un lujo

    • Escribo HTML desde mediados de los 90 y llevo 10 años trabajando como desarrollador web, pero consulto con frecuencia la guía de flexbox y la guía de grid de CSS Tricks
      También imprimí ambas hojas resumidas y las tengo sobre el escritorio; son recursos realmente valiosos
      [0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      [1] https://css-tricks.com/snippets/css/complete-guide-grid/
    • La regla es esta: justify- corresponde al eje principal, align- al eje transversal
      -content se usa para tracks de grid o filas de un contenedor con flex-wrap, y -items se usa para elementos hijos individuales, es decir, ítems dentro de una fila o celda de grid
      Aun así, ojalá los nombres fueran más claros
    • Probablemente intentaron generalizarlo para todo flex-direction. Por eso una propiedad como flex-align termina dependiendo de la dirección del padre
      En la práctica, son muy raros los casos en los que cambiar la dirección aporte un gran beneficio
      No sé si esa es la única razón, así que no voy a afirmar que haya sido una mala decisión, pero a mí también me pasa que no recuerdo cuál es cuál
      Habría sido mejor tener nombres que mostraran directamente el eje, o que las propiedades fueran independientes de la dirección del padre; hasta entonces, toca usar una chuleta
    • Flexbox y Grid se llevan toda la atención, pero tampoco hay que olvidar la utilidad de columns: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
    • Simplemente no logro meter bien en la cabeza flex-basis, flex-grow y flex-shrink
      Aunque no suelo tener que preocuparme por ellos con frecuencia, así que quizá por eso se me olvidan más

  • Aprendí muchísimo con juegos así. También aprendí Vim con https://vim-adventures.com/, y ahora casi no puedo vivir sin Vim

  • Publicaciones anteriores en HN:
    https://news.ycombinator.com/item?id=30251054 2022, 317 puntos, 31 comentarios
    https://news.ycombinator.com/item?id=22629903 2020, 27 puntos, 2 comentarios
    https://news.ycombinator.com/item?id=21796926 2019, 2 puntos, 0 comentarios
    https://news.ycombinator.com/item?id=18752031 2018, 3 puntos, 0 comentarios
    https://news.ycombinator.com/item?id=18731852 2018, 6 puntos, 1 comentario
    https://news.ycombinator.com/item?id=15605783 2017, 4 puntos, 0 comentarios
    https://news.ycombinator.com/item?id=14349739 2017, 3 puntos, 0 comentarios
    https://news.ycombinator.com/item?id=10652909 2015, 315 puntos, 69 comentarios

  • Excelente. Usé esto hace tiempo cuando estaba aprendiendo flexbox.
    También está https://codepip.com/games/grid-garden/, del mismo creador, que te ayuda a aprender CSS Grid con el mismo enfoque.

    • Creo que los juegos son una forma realmente buena de aprender CSS.
      Parece que crean una ruta de aprendizaje muy natural, porque vas resolviendo problemas que parecen fáciles gracias a lo que ya aprendiste, pero que se vuelven cada vez más difíciles.
      Hace tiempo jugué este para aprender selectores CSS y me divertí: https://flukeout.github.io/

  • Guess CSS también tiene una sección de Flexbox, pero está más enfocada en leer CSS que en escribirlo: https://www.guess-css.app/

    • Definitivamente no entendía absolutamente nada de position en CSS.
      Podía seguir acertando los demás problemas, pero en position seguía equivocándome.

  • Muy útil. Siempre termino buscando la alineación vertical en flexbox.
    Para ayudar a refrescar rápido los conocimientos de flexbox cuando uno tiene prisa, estaría bueno que hubiera una función donde arrastras y sueltas la rana en una cuadrícula de 3x3 y te genera el código CSS de flexbox correspondiente.
    Aun así, es un tutorial hecho con mucho cuidado.
    Digo esto porque, personalmente, ya me rendí con seguir al día con las nuevas funciones de CSS. He usado CSS de forma intermitente desde la época de IE7, y después de pasar por los días de escribir vendor prefixes a mano y las funciones nuevas que Chrome Canary iba metiendo, ya no tengo energía para mantener todos los trucos de CSS en la cabeza.

    • Ahora casi no hay trucos y no hay tanto que seguir. Flexbox y Grid son básicamente el punto final.
      Para la mayoría de las UI, flexbox alcanza, y básicamente es una herramienta para colocar elementos en vertical u horizontal, como stack/group o vbox/hbox.
      Solo hay que aprender flexbox. Es lo más útil que llegó al layout en CSS y es realmente simple. Para el espaciado está gap, y para la colocación básicamente justify y align; con eso se cubre el 99%.

  • Me encanta Flexbox Froggy. Se podría decir que toda una generación de desarrolladores aprendió flexbox con este sitio. Yo también.

    • En mi caso, gracias a Flexbox Froggy el concepto de flexbox finalmente hizo clic en mi cabeza.
      Para entonces ya llevaba 15 años usando CSS.
      Es una herramienta educativa increíble.

  • También vale la pena ver la guía interactiva de flexbox de Josh Comeau: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

  • Bueno. Estaría bueno que también hubiera una versión para Tailwind.