Identificar el eje antes de elegir una propiedad CSS
Lee los nenúfares objetivo del nivel e inspecciona la disposición actual de las ranas. En la dirección de fila predeterminada, justify-content trabaja a lo largo del eje principal horizontal y align-items a lo largo del eje transversal vertical. Antes de escribir un valor, indique qué eje desea cambiar. Este hábito evita un error común: elegir el valor correcto para una propiedad que controla una dirección diferente.
Cuando flex-direction cambia a columna, los ejes principal y transversal cambian con ella. Vuelva a evaluar la propiedad en lugar de asumir que justify-content siempre significa movimiento horizontal. Ingrese un cambio CSS en el editor y compare las posiciones resultantes con los objetivos. Las ranas son posicionadas por tu CSS, no arrastradas a su lugar. Utilice las sugerencias del nivel y las propiedades permitidas para mantener el experimento vinculado a la tarea que realmente se muestra.
Explicar un cambio fallido antes de intentar otro
Después de que un cambio no alcance el objetivo, pregunte si la propiedad afectó el eje incorrecto, el valor elegido dispuso los elementos de manera diferente a su expectativa o la dirección actual cambió el significado del diseño. Mantén la parte de la regla que entiendes y revisa una cosa. Reemplazar varias propiedades a la vez puede alcanzar el objetivo y dejarle sin estar seguro de qué cambio resolvió el problema.
Para un ejercicio de repaso, describe con palabras la regla exitosa antes de continuar: qué eje utilizó y cómo posicionó las ranas con respecto a los nenúfares. Los niveles posteriores pueden combinar ideas, por lo que esta explicación es más útil que memorizar una línea sin su contexto. Esta guía no proporciona una lista completa de respuestas inventada ni afirma que resolver el juego certifica una habilidad profesional CSS. La página de reproducción vinculada le brinda al editor controles y un marco exacto de las tareas; el centro apoya la comprensión y la práctica en todos los niveles que realmente encuentre.
Por ejemplo, si una regla cambia las ranas verticalmente cuando pretendías un movimiento horizontal, inspecciona flex-direction e identifica el eje principal actual antes de seleccionar otro valor. Diga la relación en voz alta: esta propiedad cambia la distribución a lo largo del eje principal, y el eje principal actualmente corre en esta dirección. Luego haga una edición e inspeccione el resultado. Una vez que funcione, pruebe su explicación con los nenúfares visibles. Esto convierte una suposición fallida en una idea de diseño reutilizable en lugar de un comando que recuerdas solo para una pantalla.
Consejos y estrategia para la Flexbox Froggy
Marca un consejo para practicar en tu próxima partida. Esta lista no modifica el juego ni guarda tu progreso.
Preguntas y respuestas sobre el Flexbox Froggy
¿Necesito instalar alguna herramienta de codificación?
No. El editor CSS está dentro del juego del navegador.
¿Es este un curso completo de desarrollo web?
Se trata de un juego interactivo para practicar conceptos de diseño con flexbox. No sustituye a un curso más amplio de HTML y CSS.
¿Quién creó el proyecto?
Thomas Park creó Flexbox Froggy. El código fuente tiene licencia MIT y la obra de arte grabada utiliza CC BY 3.0; los enlaces de atribución se encuentran a continuación.
¿Por qué flex-end cambia de lado al invertir la dirección?
El inicio y el final siguen el eje principal, no unos bordes izquierdo y derecho fijos. Con row-reverse, el eje comienza a la derecha y justify-content: flex-end coloca los elementos a la izquierda. Revisa flex-direction antes de elegir la alineación. align-items ajusta el eje transversal y resuelve otro problema de posición.
Controles e instrucciones completas
Controles e instrucciones completas
Jugar a Flexbox Froggy