Comienza con Flexbox Froggy para practicar la alineación a lo largo de un eje, luego usa Grid Garden para practicar la colocación de un elemento entre las líneas de la cuadrícula. Después de cada ejercicio del juego, reproduce la idea en una página pequeña propia. Un resultado útil es poder explicar por qué una declaración funciona cuando cambia el diseño, en lugar de simplemente recordar la respuesta de un nivel en particular.
Cómo aprender CSS con juegos y luego aplicarlo
Esta ruta combina dos juegos con tres ejercicios originales. Es ideal para quienes pueden leer una regla CSS simple y desean retroalimentación visual. No es un curso completo de desarrollo web: las interfaces reales también requieren contenido legible, comportamiento responsivo, acceso mediante teclado y pruebas con diferentes cantidades de texto.
Elige el ejercicio adecuado para tu pregunta
| Tu pregunta | Empieza aquí | Luego intenta |
|---|---|---|
| ¿Cómo muevo elementos a lo largo de una fila? | Flexbox Froggy | Ejercicio 1: mover un grupo al final |
| ¿Por qué cambió la alineación al cambiar a una columna? | Flexbox Froggy | Ejercicio 2: cambiar el eje principal |
| ¿Cómo coloco algo en columnas específicas? | Grid Garden | Ejercicio 3: Coloca una tarjeta entre líneas |
Los juegos son de Codepip. Cozcade enlaza cada juego alojado con su guía correspondiente: Flexbox Froggy y su guía; Grid Garden y su guía. Las páginas originales de Froggy y Grid Garden ofrecen las versiones de los autores. Utiliza un teclado para seguir los ejercicios de código.
Primero, nombra el eje antes de elegir una propiedad.
Flexbox tiene un eje principal y un eje transversal. flex-direction establece la dirección principal; justify-content posiciona los elementos a lo largo de ese eje principal, mientras que align-items se refiere al eje transversal. En una fila normal de izquierda a derecha, el eje principal es horizontal. Si se cambia la dirección a una columna, se vuelve vertical. Estas definiciones se explican en la introducción a Flexbox de MDN.
Antes de intentar realizar declaraciones en Froggy, indica en qué dirección quieres que se muevan los elementos. Luego, nombra esa dirección en relación con el eje principal actual. Esto convierte una respuesta incorrecta en una pregunta específica: ¿elegiste la propiedad incorrecta, el valor incorrecto o el eje incorrecto?
Ejercicio 1: Mover un grupo al final
Crea tres objetos pequeños dentro de un contenedor. Este es un ejercicio original, no una copia de un nivel de juego ni de una clave de respuestas.
<div class="practice-row">
<span>A</span><span>B</span><span>C</span>
</div>.practice-row {
display: flex;
gap: 0.5rem;
min-height: 8rem;
padding: 1rem;
border: 2px solid;
direction: ltr;
}Tu objetivo es mover los tres objetos juntos hacia el borde derecho sin cambiar su orden ni darles un margen individual. Predice el resultado y luego agrega justify-content: flex-end al contenedor.
Ahora compáralo con justify-content: space-between. La primera opción mueve el grupo; la segunda distribuye el espacio disponible entre los objetos. Prueba con un contenedor estrecho y uno ancho. Explica qué versión elegirías para tres botones que deben permanecer juntos. El resultado visible es más importante que recordar un solo valor.
Ejercicio 2: mantenga la misma instrucción, cambie el eje.
Reutilice ese contenedor, añada flex-direction: column, configure height: 12rem y conserve justify-content: flex-end. Los elementos ahora se agrupan hacia la parte inferior. Su declaración no se convirtió en un comando de "mover a la derecha": sigue funcionando a lo largo del eje principal, que usted modificó.
A continuación, añada align-items: flex-start. Compare la disposición antes y después de esta adición. Con la dirección de izquierda a derecha especificada, los elementos se alinean hacia la izquierda en el eje transversal. Elimine la declaración y observe de nuevo el comportamiento de estiramiento predeterminado.
Escriba una breve explicación de ambos cambios sin usar la expresión "simplemente funciona". Por ejemplo, identifique el eje, el espacio libre y el grupo que se está posicionando. Si no puede explicar un resultado, reduzca el ejemplo a dos elementos y cambie solo una declaración a la vez. Este es el hábito que debes retomar en el juego.
A continuación, distingue una pista de la cuadrícula de su límite.
La colocación en la cuadrícula utiliza líneas que rodean filas y columnas. Cinco columnas explícitas tienen seis líneas de límite. Un elemento colocado entre la línea de columna 3 y la línea de columna 5 abarca dos columnas, no tres. Consulta la Introducción a la cuadrícula de MDN para ver la distinción entre pistas, celdas y líneas.
En Grid Garden, lee los límites de inicio y fin antes de probar una posición. En tu propia página, dibuja o etiqueta los límites si contar los espacios te resulta confuso.
Ejercicio 3: Coloca una tarjeta entre dos líneas
Crea un tablero de cinco columnas y coloca una tarjeta:
<div class="practice-grid">
<div class="practice-card">Two-column card</div>
</div>.practice-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: repeat(3, 4rem);
gap: 0.5rem;
direction: ltr;
}
.practice-card {
grid-column: 3 / 5;
grid-row: 2;
background: #d9ceff;
color: #201538;
}Predice dónde aparecerá la tarjeta antes de abrir la página. Luego, haz que ocupe todo el tablero cambiando solo su posición en la columna. Con las cinco columnas explícitas anteriores, grid-column: 1 / 6 abarca desde el primer límite hasta el último.
Finalmente, cambia el texto por una oración mucho más larga y reduce el ancho del navegador. La regla de posicionamiento puede seguir siendo correcta, aunque la presentación de altura fija de la tarjeta resulte inadecuada para su contenido. Resolver un ejercicio de juego enseña una parte del diseño; crear una página web funcional también requiere revisar el contenido.
Utiliza el progreso del juego como retroalimentación, no como prueba de dominio.
Tras un ejercicio exitoso, cambia una suposición: la dirección, el número de elementos, el ancho disponible o la longitud del texto. Predice el resultado antes de mirar. Si puedes adaptar la idea y explicar el cambio, habrás aprendido más que una simple respuesta.
Al volver a un juego, asegúrate de abrir la misma versión y el mismo navegador. Los favoritos de tu cuenta (Cozcade) te permiten identificar los juegos que quieres volver a jugar; no garantizan que el progreso interno de las lecciones se transfiera entre dispositivos. Evita borrar los datos guardados del sitio mientras investigas el progreso y usa la función de exportación explícita solo si el juego la ofrece.
Continúa con la guía de correspondencia.
Usa la Guía Froggy para practicar ejes y alineación, y la Guía Grid Garden para preguntas de colocación. Si deseas practicar otro tipo de juego, consulta los juegos de aprendizaje.
Los ejercicios anteriores se crearon para este artículo. Las páginas de referencia se revisaron el 11 de octubre de 2026. Nuestras grabaciones de juego abarcan un número reducido de interacciones en ordenador, no la finalización de todos los niveles ni un curso completo para móviles. Este artículo enseña una secuencia de práctica; no otorga ninguna certificación ni sustituye la prueba de tus propias interfaces.
Juegos disponibles en Cozcade
Preguntas sobre dispositivos y progreso.
¿Una cuenta Cozcade guarda el progreso de cada juego?
Los favoritos de la cuenta te ayudan a mantener una lista de juegos. El tablero interno, la puntuación o el progreso de la lección de un juego son independientes y dependen de las características de almacenamiento de ese juego. No asumas que iniciar sesión transfiere una partida guardada entre navegadores o dispositivos. Consulta las instrucciones para el juego y la versión exactos.
¿Borrar los datos del navegador puede borrar mi progreso en el juego?
Eliminar los datos almacenados del sitio o juego puede borrar el progreso guardado localmente. La configuración del navegador distingue entre archivos en caché, cookies y otros datos de almacenamiento del sitio, aunque una opción de limpieza puede eliminar varios tipos a la vez. Verifica qué estás eliminando y, si el juego dispone de la función de exportación documentada, úsala antes de borrar los datos.
¿Qué juegos funcionan en mi dispositivo?
Consulta las opciones del dispositivo en el catálogo de juegos y luego lee los controles en la página del juego seleccionado. Algunas actividades requieren un teclado o una entrada precisa con el puntero. Que una página se cargue en un teléfono no garantiza que el juego sea cómodo de jugar con la pantalla táctil.