🟢 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! 🚀

---