Curso de programación GRATIS Modulo III: Desarrollo Web Parte II - CSS

CSS · M3 · Desarrollo Web

0%

Módulo 3 · CSS

✅ Módulo 3 · HTML

🌐 Proyecto del módulo

Sitio web profesional completo

Completa HTML + CSS + JS para desbloquearlo

Módulo 3 · Desarrollo Web · CSS · 2026

CSS:
darle vida visual a la web

Aprende a diseñar layouts modernos con Flexbox y Grid, y a hacer que tus páginas se vean perfectas en cualquier dispositivo con Responsive Design.

3Lecciones

3Mini quizzes

6Demos visuales

∞Tu portafolio

🔖 Marcadores

Sin marcadores — usa el botón naranja en cualquier lección.

L5

Fundamentos

Flexbox: alinear elementos en una dimensión

Antes de Flexbox, centrar un elemento en CSS era una fuente de frustración infinita. Flexbox (Flexible Box Layout) es un modelo de diseño de CSS que organiza elementos en una sola dirección — fila o columna — con control total sobre alineación, espacio y orden. Hoy es la herramienta más usada para construir componentes: navbars, tarjetas, botones, listas horizontales.

📦

Analogía: Flexbox es una caja de embalaje inteligente

Imagina una caja donde metes artículos en una fila. Puedes decirle: "pon los artículos pegados a la izquierda", "centra todo", "distribuye el espacio entre ellos", "si no caben en una fila, pásalos a la siguiente". El contenedor (la caja) decide cómo distribuir sus hijos (los artículos). Eso es exactamente Flexbox: un contenedor flexible que controla el flujo de sus elementos hijos.

Cómo activar Flexbox

CSS — Activar Flexbox en un contenedor

/* Esto convierte al elemento en contenedor flex */
.contenedor {
  display: flex;
}

/* Sus hijos directos se vuelven automáticamente "flex items" */
/* y se colocan en fila horizontal por defecto              */

Los dos ejes de Flexbox

Todo en Flexbox gira en torno a dos ejes. El eje principal es la dirección del flujo (flex-direction). El eje cruzado es perpendicular al principal. justify-content controla el eje principal y align-items el cruzado:

CSS — Propiedades del contenedor flex

.contenedor {
  display: flex;

  /* Dirección del eje principal */
  flex-direction: row;           /* → fila (por defecto) */
  flex-direction: row-reverse;   /* ← fila al revés */
  flex-direction: column;        /* ↓ columna */
  flex-direction: column-reverse;/* ↑ columna al revés */

  /* Alineación en el eje principal (horizontal si row) */
  justify-content: flex-start;   /* |●●●       | */
  justify-content: center;       /* |   ●●●    | */
  justify-content: flex-end;     /* |       ●●●| */
  justify-content: space-between;/* |●    ●    ●| */
  justify-content: space-around; /* | ●   ●   ● | */
  justify-content: space-evenly; /* |  ●  ●  ●  | */

  /* Alineación en el eje cruzado (vertical si row) */
  align-items: stretch;         /* los hijos se estiran (por defecto) */
  align-items: flex-start;      /* alineados arriba */
  align-items: center;          /* centrados verticalmente */
  align-items: flex-end;        /* alineados abajo */
  align-items: baseline;        /* alineados por la línea base del texto */

  /* Salto de línea cuando no caben todos */
  flex-wrap: nowrap;             /* todo en una línea (por defecto) */
  flex-wrap: wrap;               /* rompe en varias líneas si es necesario */

  /* Espacio entre hijos */
  gap: 16px;                     /* espacio uniforme entre todos los hijos */
  gap: 12px 24px;               /* fila columna */
}

Demos visuales interactivas

flex-direction: row + justify-content: flex-start (por defecto)

A

B

C

display: flex; — los hijos se colocan en fila, alineados al inicio

justify-content: space-between + align-items: center

Logo

Nav

CTA

justify-content: space-between; align-items: center; → patrón de navbar clásico

justify-content: center + align-items: center → centrado perfecto

¡Centrado!

justify-content: center; align-items: center; — la forma más sencilla de centrar en CSS

Propiedades de los hijos (flex items)

CSS — Propiedades de los flex items

.hijo {
  /* flex-grow: cuánto puede crecer el hijo para llenar espacio libre */
  flex-grow: 0;   /* no crece (por defecto) */
  flex-grow: 1;   /* crece para llenar todo el espacio disponible */

  /* flex-shrink: cuánto puede encogerse si hay poco espacio */
  flex-shrink: 1; /* puede encogerse (por defecto) */
  flex-shrink: 0; /* nunca se encoge (tamaño fijo) */

  /* flex-basis: tamaño base antes de aplicar grow/shrink */
  flex-basis: auto;     /* usa el width/height del elemento */
  flex-basis: 200px;   /* tamaño base fijo */
  flex-basis: 33%;     /* tamaño base porcentual */

  /* Shorthand: flex: grow shrink basis */
  flex: 1;           /* equivale a flex: 1 1 0 — crece y encoge igual */
  flex: 0 0 200px;  /* tamaño fijo de 200px, no crece ni encoge */

  /* align-self: sobreescribe align-items solo para este hijo */
  align-self: flex-end; /* este hijo va al fondo aunque los demás estén centrados */

  /* order: cambia el orden visual sin cambiar el HTML */
  order: -1;          /* aparece primero */
  order: 2;           /* aparece después */
}

flex-grow: los hijos crecen para llenar el espacio

flex:1

flex:2 (doble)

flex:1

El hijo con flex:2 ocupa el doble de espacio que los de flex:1

Casos de uso reales

CSS — Patrones reales con Flexbox

/* ── Navbar clásica ── */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

/* ── Centrar modal en pantalla ── */
.overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* ── Tarjetas que se adaptan al contenido ── */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 280px; /* crece, encoge, base 280px */
}

/* ── Footer que empuja botón al fondo de una tarjeta ── */
.card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-body .btn {
  margin-top: auto; /* empuja el botón al fondo */
}

✅ Flexbox vs. Grid — ¿cuándo usar cada uno?

Usa Flexbox para componentes en una dimensión: navbars, filas de botones, listas horizontales, tarjetas en fila, centrar elementos. Usa Grid (la siguiente lección) para layouts en dos dimensiones: la estructura completa de la página, galerías con filas y columnas simultáneas. En la práctica, los combinarás siempre: Grid para el layout general de la página, Flexbox para los componentes dentro de cada celda.

🧠 Quiz: Quieres hacer una navbar donde el logo esté a la izquierda, los links en el centro y un botón a la derecha, todos centrados verticalmente. ¿Qué propiedades usas en el contenedor?

L6

Intermedio

CSS Grid: layouts en dos dimensiones

CSS Grid es el sistema de layout más poderoso de CSS. A diferencia de Flexbox (una dimensión), Grid trabaja simultáneamente en filas y columnas, lo que lo hace ideal para construir la estructura completa de una página: cabecera, sidebar, contenido principal y pie de página en una sola declaración.

🗺️

Analogía: Grid es como un plano de arquitecto

Antes de construir una casa, el arquitecto traza una cuadrícula en el plano: tantas columnas, tantas filas, con medidas específicas. Luego asigna cada habitación a un área de esa cuadrícula. La sala ocupa las columnas 1 a 3, fila 1. La cocina ocupa la columna 4, filas 1 a 2. CSS Grid funciona igual: defines las columnas y filas del contenedor, y luego ubicas cada elemento en el área que le corresponde.

Definir columnas y filas

CSS — Grid: columnas, filas y la unidad fr

.contenedor {
  display: grid;

  /* grid-template-columns: define las columnas */
  grid-template-columns: 200px 200px 200px; /* 3 cols fijas */
  grid-template-columns: 1fr 1fr 1fr;       /* 3 cols iguales flexibles */
  grid-template-columns: repeat(3, 1fr);   /* equivalente más corto */
  grid-template-columns: 250px 1fr 300px;  /* sidebar | main | sidebar */

  /* grid-template-rows: define las filas */
  grid-template-rows: auto 1fr auto;       /* header | contenido | footer */

  /* gap: espacio entre celdas */
  gap: 24px;
  column-gap: 24px;
  row-gap: 16px;
}

/* ── La unidad fr (fraction) ── */
/* fr representa una fracción del espacio disponible */
/* 1fr 2fr 1fr: la del medio ocupa el doble que las otras */
.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* 25% | 50% | 25% del ancho disponible */
}

Demos visuales de Grid

grid-template-columns: repeat(3, 1fr) — 3 columnas iguales

1

2

3

4

5

6

display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;

Layout clásico de página: header | sidebar + main | footer

Header (grid-column: 1 / -1)

Sidebar L

Main Content

Sidebar R

Footer (grid-column: 1 / -1)

grid-template-columns: 1fr 3fr 1fr; Header y Footer abarcan todas las columnas con grid-column: 1 / -1

Posicionar elementos en la cuadrícula

CSS — Posicionar hijos en el grid con líneas y nombres

.contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

/* Posicionar por número de línea */
.header {
  grid-column: 1 / -1;  /* desde línea 1 hasta la última: todo el ancho */
  grid-row: 1;          /* solo la primera fila */
}
.sidebar {
  grid-column: 1;        /* primera columna */
  grid-row: 2 / 4;    /* ocupa las filas 2 y 3 */
}
.main {
  grid-column: 2 / 4;  /* columnas 2 y 3 */
  grid-row: 2 / 4;    /* filas 2 y 3 */
}

/* ── grid-template-areas: la forma más legible ── */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 60px;
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
  min-height: 100vh;
}

.page-header  { grid-area: header;  }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main;    }
.page-footer  { grid-area: footer;  }

repeat() y auto-fit / auto-fill: la magia de las galerías responsivas

CSS — Galerías responsivas con una sola línea

/* ── auto-fit + minmax: la combinación más poderosa ── */
/* Crea tantas columnas como quepan, mínimo 280px, máximo 1fr */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  /* En pantalla grande: 3-4 columnas */
  /* En tablet:         2 columnas    */
  /* En móvil:          1 columna     */
  /* ¡Sin una sola media query!       */
}

/* auto-fit vs auto-fill:                          */
/* auto-fit:  las columnas vacías colapsan          */
/* auto-fill: las columnas vacías mantienen espacio */
/* En la práctica: usa auto-fit para galerías       */

repeat(auto-fit, minmax(120px, 1fr)) — responsivo sin media queries

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Las tarjetas se reorganizan solas según el ancho disponible — sin media queries

💡 minmax(): el secreto del grid responsivo

minmax(min, max) define un rango de tamaño. minmax(280px, 1fr) significa "nunca menor de 280px, pero puede crecer hasta llenar el espacio disponible". Combinado con auto-fit, crea galerías completamente responsivas con una sola línea de CSS. Es uno de los trucos más potentes del CSS moderno y lo usarás en casi todos tus proyectos.

🧠 Quiz: ¿Qué hace exactamente grid-column: 1 / -1 en un elemento dentro de un grid?

L7

Avanzado

Responsive Design: una web para todos los dispositivos

El Responsive Design (diseño responsivo) garantiza que tu página se vea correctamente en cualquier pantalla: un monitor de 4K, una tablet, un smartphone. En 2026, más del 60% del tráfico web viene de móviles. Si tu sitio no es responsivo, estás perdiendo a la mayoría de tus visitantes — y Google te penaliza en el ranking.

🌊

Analogía: el agua toma la forma del recipiente

El agua no tiene forma propia: se adapta perfectamente a cualquier recipiente. Un diseño responsivo hace lo mismo con el contenido: no importa si el "recipiente" es un teléfono de 375px o un monitor de 2560px — el contenido se reorganiza fluidamente para ocupar el espacio disponible sin romperse. Eso se logra combinando unidades relativas, imágenes flexibles y media queries.

Los tres pilares del Responsive Design

El mismo contenido, tres tamaños de pantalla distintos

Desktop

≥ 1024px — sidebar + main

Tablet

768–1023px — sin sidebar

Móvil

< 768px — columna única

Pilar 1: el viewport meta tag

HTML — Meta viewport: sin esto nada funciona en móvil

<!-- Va en el <head>, es obligatorio para responsive -->
<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

/* width=device-width: el viewport usa el ancho real del dispositivo  */
/* initial-scale=1.0:  no escala al cargar la página                  */
/* Sin esta línea: los móviles simulan una pantalla de 980px           */
/* y el texto se ve minúsculo aunque uses media queries               */

Pilar 2: unidades relativas y fluidas

CSS — Unidades relativas para diseño fluido

/* ── % (porcentaje): relativo al padre) ── */
.imagen    { max-width: 100%; }    /* nunca más ancha que su contenedor */
.columna   { width: 50%; }         /* mitad del padre */

/* ── em: relativo al font-size del padre ── */
.texto     { font-size: 1.2em; }     /* 1.2× el tamaño del padre */
.card      { padding: 1.5em; }     /* escala con el font-size */

/* ── rem: relativo al font-size raíz (html) ── */
/* Más predecible que em porque no se acumula  */
html        { font-size: 16px; }    /* base */
h1          { font-size: 2.5rem; }   /* 40px */
p           { font-size: 1rem; }     /* 16px */
.small     { font-size: 0.875rem; } /* 14px */

/* ── vw / vh: relativo al viewport ── */
.hero      { min-height: 100vh; }  /* toda la altura de la ventana */
.titulo    { font-size: 5vw; }    /* 5% del ancho del viewport */

/* ── clamp(): tamaño fluido entre un min y max ── */
/* clamp(min, preferido, max)                    */
h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); }
/* mínimo 1.8rem, sube con el viewport, máximo 3.5rem */
/* Tipografía fluida SIN media queries                */

Pilar 3: Media Queries

Las media queries aplican estilos CSS condicionalmente según las características del dispositivo. Son el corazón del diseño responsivo:

xs <480

sm 480–767

md 768–1023

lg 1024–1279

xl ≥1280

CSS — Media Queries: la guía completa

/* ── Sintaxis básica ── */
@media (min-width: 768px) {
  /* Estilos que se aplican a partir de 768px */
}

/* ── Mobile First (recomendado): estilos base para móvil,
   luego se sobrescriben para pantallas más grandes ── */

/* Estilos base: móvil */
.contenedor {
  display: grid;
  grid-template-columns: 1fr;    /* 1 columna en móvil */
  gap: 16px;
  padding: 0 16px;
}
.sidebar    { display: none; }       /* oculto en móvil */
.nav-menu   { display: none; }       /* menú hamburguesa en móvil */
.nav-hamburger { display: flex; } /* botón hamburguesa visible */

/* Tablet: 768px y más */
@media (min-width: 768px) {
  .contenedor    { grid-template-columns: 1fr 1fr; }
  .sidebar        { display: block; }
  .nav-menu        { display: flex; }
  .nav-hamburger   { display: none; }
}

/* Desktop: 1024px y más */
@media (min-width: 1024px) {
  .contenedor    { grid-template-columns: 250px 1fr 300px; }
  .main-container{ max-width: 1200px; margin: 0 auto; }
}

/* ── Otros tipos de media query ── */
@media (prefers-color-scheme: dark) {
  /* Estilos cuando el sistema operativo usa modo oscuro */
  body { background: #0d1117; color: #e6edf3; }
}

@media (prefers-reduced-motion: reduce) {
  /* Desactiva animaciones para usuarios con vértigo */
  * { animation: none !important; transition: none !important; }
}

@media print {
  /* Estilos solo al imprimir */
  .navbar, .footer, .ads { display: none; }
}

Mobile First vs. Desktop First

Estrategia	Cómo funciona	Media queries	Recomendado
Mobile First	CSS base para móvil, se añade complejidad para pantallas más grandes	min-width (hacia arriba)	✅ Sí — mejor rendimiento en móvil
Desktop First	CSS base para escritorio, se simplifica para pantallas pequeñas	max-width (hacia abajo)	⚠️ Legacy — más difícil de mantener

Imágenes responsivas

CSS — Hacer imágenes y videos responsivos

/* ── Regla universal para imágenes responsivas ── */
img, video, iframe {
  max-width: 100%;   /* nunca más ancho que su contenedor */
  height: auto;       /* mantiene la proporción */
  display: block;     /* elimina el espacio inferior de elementos inline */
}

/* ── Contenedor de video con aspect-ratio fijo ── */
.video-container {
  position: relative;
  aspect-ratio: 16 / 9;  /* moderno — mantiene proporción */
  width: 100%;
}
.video-container iframe {
  position: absolute;
  inset: 0;             /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
}

/* ── object-fit: para imágenes en contenedores fijos ── */
.card-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;    /* rellena sin deformar (como background-size:cover) */
  object-position: center top; /* punto focal */
}

El layout responsivo completo: HTML + CSS

CSS — Layout de portafolio completamente responsivo

/* ══ CSS COMPLETO DE UN PORTAFOLIO RESPONSIVO ══ */

/* Variables y reset */
:root {
  --max-width: 1200px;
  --spacing:   clamp(1rem, 4vw, 2rem);
  --radius:    12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

/* Layout base: una columna en móvil */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "hero  "
    "main  "
    "footer";
  min-height: 100vh;
}
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 0 var(--spacing);
}

/* Tablet: 768px+ */
@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-content {
    display: flex;
    align-items: center;
    gap: 40px;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .page {
    grid-template-areas:
      "header header"
      "hero   hero  "
      "main   main  "
      "footer footer";
  }
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: var(--max-width);
    margin: 0 auto;
  }
}

✅ Las 7 reglas de oro del Responsive Design

(1) Siempre incluye el meta viewport. (2) Diseña Mobile First. (3) Usa unidades relativas (rem, %, vw) en lugar de píxeles fijos. (4) Aplica max-width: 100%; height: auto a todas las imágenes. (5) Nunca pongas texto demasiado pequeño — mínimo 16px en móvil. (6) Los botones y links deben tener al menos 44×44px de área táctil. (7) Prueba en dispositivos reales además del DevTools del navegador.

💡 DevTools: tu mejor aliado para el Responsive

En Chrome o Firefox, presiona F12 → icono de móvil (o Ctrl+Shift+M) para activar el modo responsivo. Puedes simular cualquier tamaño de pantalla, rotar entre portrait y landscape, y seleccionar dispositivos específicos como iPhone 14 o Pixel 7. Usa esta vista constantemente mientras codificas — los problemas se ven inmediatamente.

🎨 CSS completado

Dominas los tres pilares del CSS moderno — el siguiente paso es JavaScript

✅ HTML (4 lecciones) ✅ Flexbox ✅ Grid ✅ Responsive Design ⚡ JavaScript — próximo

🧠 Quiz: ¿Cuál es la diferencia entre max-width y min-width en media queries y cuál corresponde a la estrategia Mobile First?

🎨

¡CSS dominado!

Has completado las tres lecciones de CSS: Flexbox para layouts en una dimensión, Grid para layouts en dos dimensiones, y Responsive Design para que todo se vea perfecto en cualquier pantalla.

El siguiente post cubrirá JavaScript: Variables, Eventos, DOM y Fetch API.