Desarrollo Frontend · FRO-102

CSS moderno: Flexbox, Grid y variables

Los dos sistemas de maquetación que sustituyeron a todo lo anterior, con propiedades personalizadas.

Bajo demanda Iniciación 6 módulos · 30 clases

Formato asíncrono Alumnado, Docentes FP, Desarrollo CSS

DESARROLLO FP

Lo que aprenderás

Aplicar estilos con selectores de clase, descendencia y estado, entendiendo la especificidad.
Maquetar en una dimensión con Flexbox usando justify-content, align-items y flex-wrap.
Construir rejillas de dos dimensiones con CSS Grid, áreas nombradas y unidades fr.
Definir propiedades personalizadas para color, espaciado y tipografía y reutilizarlas en todo el sitio.
Controlar el modelo de caja con box-sizing, márgenes, relleno y el colapso de márgenes.
Depurar una maquetación con el inspector de rejilla y de caja flexible del navegador.

Contenido del curso

6 módulos · 30 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Fundamentos 5 clases

Cómo aplica el navegador una hoja de estilos
Selectores básicos y combinadores
Especificidad, herencia y cascada
Unidades absolutas y relativas
Inspeccionar estilos con las herramientas del navegador

Módulo 2 · Modelo de caja 5 clases

Contenido, relleno, borde y margen
box-sizing y por qué se cambia el valor por defecto
Colapso de márgenes explicado con ejemplos
display block, inline e inline-block
Desbordamiento y contextos de formato

Módulo 3 · Flexbox 5 clases

Eje principal y eje transversal
justify-content y align-items en la práctica
flex-grow, flex-shrink y flex-basis
Envolver elementos con flex-wrap y gap
Componentes habituales: barra de navegación y tarjeta

Módulo 4 · CSS Grid 5 clases

Definir filas y columnas con fr y repeat
Colocar elementos por línea y por área nombrada
minmax y auto-fit para rejillas adaptables
Alineación dentro de la rejilla
Combinar Grid para la página y Flexbox para el detalle

Módulo 5 · Color, tipografía y variables 5 clases

Sistemas de color en CSS y contraste legible
Fuentes web y pila tipográfica de reserva
Escala tipográfica y ritmo vertical
Propiedades personalizadas: definir y usar
Tema claro y oscuro con un solo conjunto de variables

Módulo 6 · Proyecto de cierre 5 clases

Enunciado: página de producto completa
Rejilla principal y regiones de la página
Componentes internos con Flexbox
Variables de diseño centralizadas
Revisión y depuración con el inspector

Requisitos

Conocer HTML a nivel de estructura y etiquetas básicas.
No se necesita experiencia previa con CSS ni con programación.
Basta con un navegador y un editor de texto; el entorno de prácticas funciona en línea.

Descripción

Durante años maquetar consistió en pelear con floats, posicionamientos absolutos y trucos para centrar en vertical. Ese conocimiento sigue circulando en tutoriales antiguos y produce hojas de estilo frágiles que se descuadran al cambiar un elemento. Flexbox y Grid resolvieron el problema de raíz, y quien los aprende bien deja de necesitar la mayoría de aquellos apaños.

El curso construye una interfaz completa aplicando cada concepto en cuanto se explica. Se empieza por selectores, especificidad y modelo de caja, se pasa a Flexbox para componentes en línea y a Grid para la estructura de la página, y se cierra con propiedades personalizadas que centralizan colores y espaciados. El inspector del navegador se usa desde la primera clase para ver qué ocurre.

El resultado son hojas de estilo comprensibles, con una única fuente de verdad para los valores del diseño y una maquetación que resiste cambios de contenido. Desde aquí el itinerario continúa en diseño responsive y mobile-first, y más adelante en CSS avanzado con animación, capas en cascada y arquitectura de hojas de estilo grandes.

¿Para quién es este curso?

Alumnado de desarrollo web que ya escribe HTML y necesita maquetar sin recurrir a plantillas ajenas.
Profesorado de FP que actualiza sus materiales de maquetación a Flexbox y Grid.
Desarrolladores de backend que deben retocar la interfaz de sus propias aplicaciones.