🟢 DÍA 7: CSS GRID + RESPONSIVE DESIGN (4/5)

🎯 Objetivo del día:

Dominar el uso de CSS Grid para construir interfaces complejas y escalables, y aplicar los principios del responsive design para adaptar tu web a diferentes tamaños de pantalla (móvil, tablet, escritorio).
Hoy tu sitio pasará de ser estático a ser totalmente adaptable y profesional.

📺 Segmento del vídeo para este día:

Curso: Desarrollo Web 24h
Minutos a cubrir: 13:35:25 – 18:02:13
Duración estimada: ~4,5 horas

🔍 Contenidos a estudiar

🧱 CSS GRID:

  • Introducción y creación de una cuadrícula (display: grid).
  • Unidades avanzadas: auto, fr, minmax, repeat.
  • Grid implícito y explícito.
  • grid-template-columns, grid-template-rows, grid-area.
  • Alineación, flujo denso y subgrid.
  • Ejemplo práctico: maqueta web responsive con Grid.

📱 RESPONSIVE DESIGN:

  • Imágenes y multimedia flexibles (width: 100%, max-width).
  • Atributos srcset, sizes y <picture>.
  • Media queries (@media), diseño mobile-first.
  • Feature queries (@supports) y container queries (si aplica).
  • Proyecto Holy Grail con Flexbox.
  • Buenas prácticas responsive: rem, em, %, clamp.

🧠 Apuntes Técnicos recomendados

CSS Grid básico

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

Responsive con media queries

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }

  header {
    flex-direction: column;
    text-align: center;
  }
}

🛠️ Proyecto Práctico

Sigue trabajando sobre tu proyecto.

✅ Aplicar CSS Grid:

  • Crea una sección de contenido (por ejemplo, artículos o bloques de servicios) usando display: grid.
  • Usa grid-template-areas para estructurar tu layout: header, nav, main, aside, footer.
  • Aplica alineación con justify-items, align-items, etc.

✅ Hacer tu web responsive:

  • Añade media queries que adapten:
    • El layout (de 3 columnas a 1 en móvil).
    • Tamaños de texto (clamp() o rem).
    • Imágenes (max-width: 100%).
  • Integra al menos una @media con un cambio visible real (ejemplo: menú vertical en móvil, ocultar imagen, etc.).
  • Opcional: usa <picture> o srcset para que una imagen se adapte a dispositivos.

📄 Entrega y Evidencias (PAF)

Prepara un documento PDF o carpeta comprimida que contenga:

  • ✅ Capturas:
    • De la web en escritorio, tablet y móvil (puedes usar DevTools).
    • De la estructura Grid.
  • ✅ Código fuente:
    • CSS con uso de Grid y media queries comentado.
    • Fragmento de HTML con picture o srcset si aplicaste.
  • ✅ Notas personales:
    • ¿Qué te pareció más intuitivo de Grid?
    • ¿Dónde fue más útil aplicar Media Queries?
    • ¿Qué mejoras visuales y de usabilidad lograste hoy?

🎯 Resultado esperado al finalizar el día

✅ Diseño responsive completo.
✅ Uso correcto de CSS Grid y media queries.
✅ Sitio que se adapta a cualquier dispositivo.
✅ Comprensión de estructura visual escalable y mantenible.

💪 Cierre motivacional

¡Esto ya es desarrollo de nivel profesional! 🔥
Hoy lograste lo que muchos desarrolladores junior aún no dominan: una web que se adapta, se organiza y se comporta de forma inteligente en cualquier dispositivo.
Tu sitio no solo funciona, ahora se siente moderno y profesional.
¡Mañana coronamos esta fase con animaciones, despliegue y personalización avanzada! 🚀