CSS — Intermedio

Este curso está dirigido a desarrolladores y maquetadores que ya dominan los fundamentos de CSS y quieren dar el salto a técnicas de nivel intermedio aplicables en proyectos reales. A lo largo de las ocho horas de formación, los participantes explorarán el modelo de layout bidimensional con CSS Grid, profundizarán en el diseño de sistemas de estilos escalables mediante custom properties, y consolidarán su criterio técnico para elegir entre las distintas herramientas de posicionamiento y maquetación que ofrece el lenguaje. Al finalizar, el alumno será capaz de construir y depurar interfaces responsivas, reutilizables y mantenibles, tomando decisiones de diseño justificadas sobre especificidad, unidades relativas y estructura de componentes.

1. Comparar las capacidades de Flexbox y CSS Grid e identificar cuál resulta más adecuado según las dimensiones y el flujo del layout que se necesita resolver.
2. Diseñar layouts de página completos con CSS Grid que se mantengan coherentes en múltiples breakpoints, y estructurar componentes reutilizables separando estilos base, variantes y estados interactivos.
3. Integrar un sistema de custom properties para centralizar la paleta de color y la escala tipográfica, justificar la elección de unidades relativas en propiedades de espaciado y tipografía, y adaptar componentes e interfaces para que funcionen correctamente en dispositivos móvil, tablet y escritorio.
4. Depurar conflictos de especificidad, herencia inesperada y posicionamiento roto utilizando las herramientas de desarrollo del navegador, aplicando soluciones que reduzcan el acoplamiento estructural sin recurrir a !important.

Bloque 1 — Modelo de layout: Flexbox vs. CSS Grid Se revisa el modelo de caja en su dimensión práctica y se analiza en detalle cuándo conviene un enfoque unidimensional (Flexbox) frente a uno bidimensional (Grid). Los participantes trabajan con un mismo layout resuelto de las dos formas, redactan una justificación escrita de la elección y extraen criterios generales aplicables a futuros proyectos.

Bloque 2 — CSS Grid aplicado a layouts de página Se construye paso a paso un layout completo con cabecera, área de contenido principal y pie de página usando CSS Grid, prestando especial atención a la definición de áreas con nombre, la gestión del flujo implícito y la adaptación de la cuadrícula a al menos dos breakpoints mediante media queries orientadas al contenido.

Bloque 3 — Sistemas de diseño con custom properties y unidades relativas Se introduce el concepto de custom properties como capa de abstracción para gestionar paletas de color y escalas tipográficas, y se estudia cómo un cambio en la variable raíz se propaga al árbol de componentes. Paralelamente, se analiza el impacto de elegir em, rem, %, vw o vh en al menos tres propiedades representativas de un componente, argumentando las implicaciones en accesibilidad y escalabilidad.

Bloque 4 — Diseño y estructura de componentes reutilizables Se aborda la arquitectura interna de un componente CSS: cómo separar la capa de estilos base, las variantes visuales y los estados interactivos (:hover, :focus, :disabled) de forma que ninguna variante rompa el comportamiento del base. Se trabaja con botones, tarjetas y modales como casos de uso representativos.

Bloque 5 — Responsive design y adaptación de componentes existentes Se toma un componente real (tarjeta, formulario o barra de navegación) y se refactoriza para que sea completamente funcional en los tres rangos de pantalla habituales. Se aplican unidades relativas, media queries y, cuando corresponde, propiedades de CSS Grid o Flexbox ya vistas, consolidando el flujo de trabajo adaptativo de principio a fin.

Bloque 6 — Depuración: especificidad, herencia y posicionamiento Se dedica el bloque final a la resolución de problemas reales: conflictos de especificidad o herencia inesperada, y desajustes causados por un uso incorrecto de position: relative, absolute o fixed. Los participantes utilizan el inspector de estilos del navegador para identificar el selector o regla causante y aplican soluciones que reduzcan el acoplamiento estructural sin recurrir a !important.

• Navegador moderno con herramientas de desarrollo (Chrome DevTools o Firefox Developer Tools, versión actualizada).
• Editor de código con resaltado CSS (Visual Studio Code con la extensión CSS Peek o similar es suficiente).
• Acceso a un entorno de práctica en línea (CodePen, StackBlitz o similar) o servidor local para servir archivos estáticos.
• No se requiere ningún framework ni preprocesador; todo el trabajo se realiza en CSS nativo.

Para aprovechar este curso se recomienda haber completado CSS01 — Iniciación o disponer de un nivel equivalente. En concreto, se asume que el alumno conoce el modelo de caja (box model), sabe aplicar selectores básicos y de pseudoclase, comprende el comportamiento por defecto del flujo de documento, y tiene experiencia práctica con Flexbox a nivel básico. Sin esos fundamentos, algunos bloques —especialmente el de comparación Flexbox/Grid y el de depuración de especificidad— pueden resultar difíciles de seguir.