🎨 CSS Moderno • Nivel Principiante-Avanzado

Domina el Diseño Web: Flexbox, Grid y Variables

Deja de pelear con los márgenes. Aprende el sistema de maquetación moderno que usan los profesionales para crear diseños perfectos y responsive.

Tu Progreso en el Curso 0% Completado

Lo que Aprenderás

Desde el modelo de cajas hasta layouts complejos con Grid. Todo con ejercicios prácticos que puedes completar directamente aquí.

Módulo 1: Flexbox (Diseño 1D)

Flexbox es perfecto para alinear elementos en una fila o columna. Olvida los `float` y `inline-block`. Usa `display: flex`.

Propiedades Clave:

display: flex; Activa el contenedor flexible
justify-content: Alineación en el eje principal (horizontal)
align-items: Alineación en el eje transversal (vertical)

Ejemplo: Centrar Elementos


.contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
}

Ejercicio Práctico 1.1

Escribe la propiedad para centrar elementos horizontalmente en un contenedor flex:

Módulo 2: CSS Grid (Diseño 2D)

Grid te permite crear layouts complejos de filas y columnas simultáneamente. Es la herramienta más potente para maquetar páginas completas.

Definición de Grid:

display: grid; Convierte el elemento en contenedor Grid
grid-template-columns: Define las columnas
gap: Espacio entre celdas

Ejemplo: 3 Columnas


.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Ejercicio Práctico 2.1

Completa el código para crear 3 columnas de igual tamaño:

Módulo 3: Variables CSS

Las variables (Custom Properties) te permiten definir valores reutilizables. Cambia un color en un solo lugar y se actualiza en toda la web.

Sintaxis:

:root { ... } Define variables globales
--nombre-variable: Nombre de la variable
var(--nombre): Usa la variable

Variables CSS


:root {
  --color-principal: #4f46e5;
}

.boton {
  background-color: var(--color-principal);
}

Ejercicio Práctico 3.1

Define una variable llamada --fuente-titulo con el valor Arial:

Módulo 4: Media Queries (Responsive)

Haz que tu diseño se adapte a móviles, tablets y escritorio usando `@media`. El diseño mobile-first es el estándar.

Breakpoints Comunes:

max-width: 768px Para tablets y móviles
max-width: 480px Para móviles pequeños

Media Query


/* En pantallas menores a 768px */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

Ejercicio Práctico 4.1

Escribe una media query para pantallas menores a 600px:

WebForge

Buscar este blog

CURSO: CSS Moderno