Hoy · Hoja de ruta
- 1. Decide: Traduce una interfaz nueva a flujo, tamaño, espacio, layout, adaptación y estados.
- 2. Haz: Constrúyela desde cero usando solo decisiones que puedas justificar.
- 3. Comprueba: Responde a un cambio imprevisto sin rehacer el componente.
Antes de empezar · 5 minutos, sin apuntes
- ¿Qué diferencia hay entre una transición y una transformación?
- ¿Qué preferencia comunica
prefers-reduced-motion? - Una tarjeta aumenta de tamaño al pasar el ratón: explica qué debe ocurrir al usar teclado.
Antes de tocar CSS · clasifica los problemas
Recibes una captura y el HTML semántico de una página de actividades. La interfaz contiene una cabecera con navegación, un bloque destacado, un catálogo de tarjetas, una botonera de filtros y un aviso final. No recibes ninguna pista sobre las propiedades.
Antes de escribir, completa esta tabla:
| Zona | Flujo normal | Tamaño | Espacio | Flexbox/Grid | Responsive | Estado |
|---|---|---|---|---|---|---|
| Navegación | ||||||
| Destacado | ||||||
| Catálogo | ||||||
| Botonera |
No todas las casillas necesitan una propiedad. Dejar una zona en flujo normal también es una decisión.
Paso 1 · Una decisión resuelta
Las tarjetas se repiten en filas y columnas y su número debe depender del espacio. Eso apunta a Grid con una plantilla adaptable. Dentro de cada tarjeta, imagen, texto y acción forman una relación en una dimensión: puede bastar flujo normal o Flexbox. Se resuelve cada nivel por separado.
Paso 2 · Completa una base incompleta
Se entrega el HTML y una hoja con variables, tipografía y el box model ya preparados. Faltan deliberadamente la distribución del catálogo, el comportamiento de la navegación y los estados de los controles. Completa primero esas tres decisiones y comprueba cada una en DevTools antes de continuar.
Tarea 16 · Construye y defiende la interfaz
La solución debe cumplir estos requisitos sin framework:
- El contenido conserva una anchura legible y espacios coherentes.
- La navegación funciona en una línea cuando cabe y no desborda cuando deja de caber.
- El catálogo decide automáticamente cuántas columnas entran.
- Las imágenes conservan proporción y encajan sin deformarse.
- Los filtros y enlaces tienen estados de interacción y foco visibles.
- No existe scroll horizontal entre 320 px y 1600 px.
- Cada media query responde a una rotura que puedes señalar.
Al terminar, el profesor cambia un requisito: orden de la navegación, anchura mínima de tarjeta o dirección de un componente. Predice el resultado, haz el cambio mínimo y explícalo.
Si has terminado · ampliación: container queries y CSS anidado
Una media query pregunta por el viewport; una container query pregunta por el espacio del componente. Úsala solo si el componente necesita cambiar de disposición según el lugar donde aparece:
.zona-producto {
container-type: inline-size;
}
@container (width >= 35rem) {
.producto { grid-template-columns: 1fr 2fr; }
}
Como segunda ampliación, reescribe un único componente con CSS anidado. El & representa al selector exterior. Limita el anidamiento a uno o dos niveles y comprueba que no has creado selectores innecesariamente específicos.
Antes de cerrar · 2 minutos, sin mirar
- ¿Qué seis tipos de decisión has separado antes de escribir CSS?
- ¿Qué parte resolviste con flujo normal y por qué?
- ¿Cómo demostraste que tu solución se transfiere a un requisito nuevo?
Ver respuestas
1 · Flujo normal, tamaño, espacio, distribución, comportamiento responsive y estado.
2 · Depende de tu interfaz, pero debes nombrar la zona y explicar por qué no necesitaba un sistema de layout.
3 · Prediciendo y realizando un cambio que no estaba en la captura inicial sin rehacer la solución.