UD2 · Guía y taller práctico
CSS: diseño, maquetación y responsive
El mismo sitio de la UD1, ahora con presentación. CSS exige decidir de qué tipo es cada problema —tamaño, espacio o distribución— y saber diagnosticar qué regla está actuando cuando el resultado no es el esperado.
Antes de empezar
- Necesitas
- El sitio HTML terminado en la UD1, validado en el W3C.
- Visual Studio Code.
- Un navegador moderno con DevTools, incluidos sus inspectores de Flexbox y Grid.
- El validador CSS del W3C, en jigsaw.w3.org/css-validator.
- Debes saber
- Escribir HTML semántico válido: encabezados, listas, enlaces, imágenes, tablas y formularios (UD1).
- Qué declaran header, nav, main, section, article y footer, y cuándo un div sigue siendo correcto (UD1).
- Manejar rutas relativas entre archivos y carpetas del proyecto (UD1).
- Abrir DevTools e inspeccionar el árbol de elementos (UD1).
¿Qué vas a aprender?
En la unidad anterior construimos una web solo con HTML. Nuestra preocupación era responder bien a preguntas como estas:
¿Esto es un título? ¿Esto es una navegación? ¿Esto es una imagen informativa? ¿Esto es un formulario?
El resultado es un sitio con estructura y significado, y prácticamente sin diseño. Ahora le toca a CSS.
El trabajo de las seis semanas anteriores demuestra aquí su utilidad. La UD1 terminó con esta promesa:
Si tu estructura dice lo que las cosas son, el CSS podrá cambiar por completo su apariencia sin tocar una línea de tu HTML.
Vamos a comprobarlo. Sobre una estructura semántica, dar estilo es escribir selectores. Sobre una sopa de div, es adivinar cuál era cuál.
CSS te permitirá controlar colores, tipografía, tamaños, espacios, bordes, la distribución de los elementos, la adaptación a distintas pantallas, los estados interactivos y las transiciones. Pero, igual que en HTML, no se trata de memorizar propiedades. Se trata de aprender a construir y razonar layouts.
La idea que gobierna la unidad
Vas a pasarte seis semanas viendo cosas que no se ven como esperabas. La diferencia entre alguien que aprende CSS y alguien que pelea con CSS está en lo que hace en ese momento.
Cuando algo no se ve como esperabas, no añadas CSS
La reacción natural consiste en escribir otra propiedad por si esta sí funciona, después otra, y finalmente !important. Así se acumula una hoja de estilos que nadie entiende, ni siquiera quien la escribió.
Lo que haremos en su lugar es diagnosticar: inspeccionar el elemento, ver qué regla está actuando de verdad, entender por qué gana, y entonces corregir. CSS también se depura.
- No funciona
- Añado otra propiedad
- Tampoco
- !important
- Resultado inesperado
- Inspeccionar
- Identificar la regla
- Entender por qué gana
- Corregir
El proyecto continúa
No empezamos una web nueva. Partimos del sitio de la UD1 y le añadimos una carpeta:
mi-web/
│
├── index.html
├── productos.html
├── acerca.html
├── contacto.html
│
├── css/
│ └── styles.css ← nuevo
│
└── img/
└── ...- HTML · estructura y significado
- CSS · presentación y distribución
Condición 1 · el HTML no se retuerce para conseguir un efecto visual
Vas a tener la tentación de meter un div de más, o de cambiar un section por otra cosa, porque así el CSS sale antes. Añadir un contenedor es a veces legítimo y se tratará más adelante; ahora bien, si el cambio empeora lo que el documento significa, el problema es del CSS y hay que resolverlo en el CSS.
Al terminar deberías poder responder a la pregunta de la defensa de la UD1 —«si mañana llega el CSS, ¿qué HTML tendrías que tocar?»— y que la respuesta siga siendo «ninguno».
Condición 2 · sin frameworks CSS
No puedes usar Bootstrap, Tailwind, Bulma, plantillas completas ni constructores visuales.
La razón es concreta. Si escribes class="container d-flex justify-content-between" antes de entender Flexbox, estás aprendiendo los nombres de las clases de una herramienta, no CSS. Más adelante usarás frameworks, y entonces podrás valorar qué te ahorran, qué deciden por ti y qué cuestan. Esa valoración necesita que primero sepas hacerlo a mano.
Condición 3 · la IA, para entender, no para entregar
- Antes de preguntar: escribe qué crees que ocurre y qué has comprobado en DevTools.
- Pregunta: pide una explicación o pistas, no el CSS completo. Ejemplo: «Mi Grid tiene tres columnas pero desborda a 360 px. Creo que he usado anchos fijos. Explícame qué debería revisar sin darme la solución».
- Después: cierra la respuesta y realiza una modificación distinta sin volver a preguntar.
La prueba es siempre la misma: si no puedes cambiar una decisión pequeña sobre tu propia solución —el número de columnas, el eje de un Flexbox o una regla en conflicto— todavía no controlas el código que has entregado.
Herramientas
VS Code ya trae lo necesario para CSS: resaltado, autocompletado, información sobre cada propiedad al pasar el ratón, selector de color, Emmet y formateo. No hacen falta extensiones.
La herramienta nueva de esta unidad es otra:
DevTools
El inspector del navegador. En CSS deja de ser algo que se abre de vez en cuando y pasa a estar abierto siempre. Con él puedes activar y desactivar propiedades, cambiar valores en vivo, ver qué regla se está aplicando y cuál ha sido tachada, dibujar el box model, visualizar un Flexbox o un Grid con sus líneas, y simular tamaños de pantalla.
Durante seis semanas, cada vez que algo no se vea como esperas, la primera acción es F12.
No todo pesa lo mismo
clamp(), object-fit, estados y transiciones.
:where(), container queries y CSS anidado.
Si vas justo, prioriza los ocho contenidos esenciales. Las ampliaciones nunca compensan una cascada que no entiendes, un layout que desborda o un foco que no se ve.
Plan de trabajo semanal
| Semana | Bloque temático | Práctica central | Horas |
|---|---|---|---|
| Semana 1 | Cómo se aplica CSS y quién gana | Primer estilo, selectores y diagnóstico de conflictos | 3 h |
| Semana 2 | La caja y el sistema visual | Box model, unidades, tipografía y variables | 3 h |
| Semana 3 | Flujo normal y Flexbox | Navegación y componentes en una dimensión | 3 h |
| Semana 4 | Grid y responsive | Catálogo adaptable y decisión de breakpoints | 3 h |
| Semana 5 | Imágenes, estados y movimiento | Catálogo irregular, foco visible y transiciones | 3 h |
| Semana 6 | Integración, depuración y entrega | Interfaz desconocida, CSS forense y revisión por pares | 3 h |
| Total | El sitio de la UD1 convertido en una web completa | 18 h |
Cada sesión dura una hora y mantiene la estructura habitual de la UD1, adaptando el tiempo a la dificultad de cada concepto:
- Recupera · 5 min
- Aprende y observa · 10–20 min
- Practica · 30–40 min
- Cierra · 5 min
Los conceptos nuevos avanzan de ejemplo resuelto → ejemplo incompleto → problema parecido → problema nuevo. Aproximadamente dos tercios de la práctica se aplican al proyecto y un tercio a interfaces que no has visto antes. La pregunta previa nunca es «¿qué propiedad copio?», sino «¿qué tipo de problema tengo y qué herramienta encaja?».
Sesiones de la unidad
Cada sesión es una clase, con su propia página.
18 sesiones
Semana 1 · Cómo se aplica CSS y quién gana
Semana 2 · La caja y el sistema visual
Semana 3 · Flujo normal y Flexbox
Semana 4 · Grid y responsive
Semana 5 · Imágenes, estados y movimiento
Semana 6 · Integración, depuración y entrega