🟢 DÍA 6: CSS INTERMEDIO + FLEXBOX (3/5)

🎯 Objetivo del día:

Profundizar en el diseño visual mediante selectores avanzados, posicionamiento profesional, pseudoclases, metodologías de organización CSS, y dominar Flexbox para estructurar y alinear layouts modernos.
Hoy tu web deja de ser estática y empieza a adaptarse visualmente a cualquier necesidad.

---

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

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

---

🔍 Contenidos a estudiar

📚 CSS INTERMEDIO

• Selectores avanzados (*, [attr], :not(), etc.).
• Herencia, cascada y especificidad.
• Pseudoclases (:hover, :focus, :nth-child, etc.).
• Pseudoelementos (::before, ::after).
• Metodología BEM.
• Display: block, inline, inline-block, none.
• Posicionamiento: relative, absolute, fixed, sticky.
• Ventanas modal (estructura y posicionamiento).
• Overflow, object-fit, outline.

---

🧱 CSS FLEXBOX

• Ejes principal y secundario.
• display: flex
• flex-direction, flex-wrap, justify-content, align-items, align-self.
• order, flex-basis, flex-shrink, flex-grow.
• Creación de layouts con Flexbox.

---

🧠 Apuntes Técnicos recomendados

Selectores avanzados y pseudoclases

/* Todos los inputs requeridos */
input:required {
  border: 2px solid red;
}

/* Selecciona todos los párrafos excepto los que tienen clase .importante */
p:not(.importante) {
  color: gray;
}

/* Estilo alterno */
li:nth-child(odd) {
  background-color: #f0f0f0;
}

Flexbox básico

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

---

🛠️ Proyecto Práctico

Sigue desarrollando sobre tu web actual. Hoy transformarás la estructura visual y aplicarás comportamientos dinámicos con CSS.

✅ CSS Intermedio:

• Añade pseudoclases (:hover, :focus, :first-child) en botones o listas.
• Crea un div flotante fijo o sticky.
• Usa position: absolute para colocar elementos clave como botones o banners.
• Añade una caja con overflow: scroll o auto para practicar.

✅ Flexbox:

• Transforma el layout de tu web con Flexbox: navegación lateral, cabecera con tres columnas, etc.
• Alinea elementos vertical y horizontalmente (justify-content, align-items).
• Practica con tarjetas, formularios y contenedores de contenido.

---

📄 Entrega y Evidencias (PAF)

Prepara un documento PDF o carpeta comprimida que contenga:

• ✅ Capturas:
  • De la estructura modificada con Flexbox.
  • De pseudoclases y comportamiento de hover o focus.
• ✅ Código fuente:
  • style.css bien comentado.
  • Fragmentos clave de HTML si modificaste estructura para Flexbox.
• ✅ Notas personales:
  • ¿Qué selector o pseudoclase fue más útil?
  • ¿Qué parte del posicionamiento te resultó más difícil?
  • ¿Qué aprendiste aplicando Flexbox en la práctica?

---

🎯 Resultado esperado al finalizar el día

✅ Uso fluido de selectores avanzados, pseudoclases y posicionamiento.
✅ Diseño de layouts modernos con Flexbox.
✅ Estilo visual mucho más pulido, limpio y adaptable.
✅ Web con una estructura lógica y visual profesional.

---

💪 Cierre

¡Increíble avance! 🙌
Flexbox te abre las puertas al diseño real y profesional. Hoy tu web no solo se ve mejor, sino que se comporta mejor.
Dominar Flexbox y el posicionamiento CSS te sitúa entre quienes entienden la maquetación moderna.
Mañana, con CSS Grid y diseño responsive, tu web se convertirá en algo verdaderamente adaptable. 📱💻

---