🟢 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. 📱💻