Semana 2: Página web con Hojas de Estilos

Esta semana aprendí sobre CSS3, que sirve para darle estilo a las páginas web. Entendí cómo se escriben sus reglas y cómo usar cosas como display, Flexbox y Grid para ordenar los elementos. También vi cómo hacer que las páginas se adapten a diferentes pantallas con diseño responsivo.

Código del ejercicio

/* Flexbox */
.flexbox-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(45deg, #f1f3f4, #e8eaed);
}

.flex-item {
    background: var(--gradient); /* Usa la variable */
    color: white;
}

/* Diseño fluido */
.responsive-demo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.responsive-card {
    background: var(--white); /* Variable usada */
    box-shadow: var(--shadow); /* Variable usada */
    border-left: 4px solid var(--accent-color); /* Variable usada */
}

/* Diseño responsivo */
.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.demo-item {
    background: var(--white); /* Variable usada */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

El mayor reto fue comprender el comportamiento de los diferentes tipos de position, especialmente sticky y absolute en contextos complejos. Resolví esto creando múltiples experimentos prácticos y documentando cada comportamiento. También enfrenté dificultades con el responsive design, pero el enfoque mobile-first simplificó significativamente el proceso.

El mayor reto fue comprender el comportamiento de los diferentes tipos de position, especialmente sticky y absolute en contextos complejos. Resolví esto creando múltiples experimentos prácticos y documentando cada comportamiento. También enfrenté dificultades con el responsive design, pero el enfoque mobile-first simplificó significativamente el proceso.

El mayor reto fue comprender el comportamiento de los diferentes tipos de position, especialmente sticky y absolute en contextos complejos. Resolví esto creando múltiples experimentos prácticos y documentando cada comportamiento. También enfrenté dificultades con el responsive design, pero el enfoque mobile-first simplificó significativamente el proceso.