Title: Actividad 10: Flexbox
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

Desarrollo Web del Lado del Cliente –

Actividad 11: Estructura de dos columnas con Flexbox

🎯

Objetivo

Comprender cómo usar Flexbox para crear estructuras con proporciones diferentes y organización vertical dentro de cada columna.

🧩

Instrucciones

1️⃣ Identificación

Al inicio del documento escribe tu nombre completo y el nombre del profesor.

2️⃣ Archivos base

Crea dos archivos:

- index.html
- styles.css

Copia este código en tu archivo HTML:

<!DOCTYPE html>

<html lang="es">

<head>

  <meta charset="UTF-8">

  <title>Actividad Flexbox - Dos Columnas</title>

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <div class="contenedor">

    <div class="columna-izquierda">

      <div class="seccion1">Sección 1</div>

      <div class="seccion2">Sección 2</div>

    </div>

    <div class="columna-derecha">

      <div class="parte1">Parte 1</div>

      <div class="parte2">Parte 2</div>

      <div class="parte3">Parte 3</div>

    </div>

  </div>

</body>

</html>

3️⃣ Lo que debes lograr con Flexbox

- La página debe tener dos columnas principales.
- La columna izquierda debe ocupar una parte del espacio.
- La columna derecha debe ocupar el doble de tamaño que la izquierda.
- En la columna izquierda, los elementos deben ordenarse verticalmente.
- En la columna derecha, divide el espacio en tres partes iguales (una sobre otra).
- Aplica un color de fondo diferente a cada una de las cuatro secciones totales para distinguirlas claramente.

(Ejemplo: la izquierda en tonos fríos y la derecha en tonos cálidos, o los colores que tú prefieras.)

📁

Evidencia

- Una captura completa mostrando las cuatro secciones con colores distintos.
- El contenido de tu archivo styles.css.

Todo debe entregarse en un solo archivo PDF.

📤

Método de entrega

Sube tu PDF a la plataforma.

Desarrollo Web del Lado del Cliente –

Actividad 11: Estructura de dos columnas con Flexbox

🎯

Objetivo

Comprender cómo usar Flexbox para crear estructuras con proporciones diferentes y organización vertical dentro de cada columna.

🧩

Instrucciones

1️⃣ Identificación

Al inicio del documento escribe tu nombre completo y el nombre del profesor.

2️⃣ Archivos base

Crea dos archivos:

- index.html
- styles.css

Copia este código en tu archivo HTML:

<!DOCTYPE html>

<html lang="es">

<head>

  <meta charset="UTF-8">

  <title>Actividad Flexbox - Dos Columnas</title>

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <div class="contenedor">

    <div class="columna-izquierda">

      <div class="seccion1">Sección 1</div>

      <div class="seccion2">Sección 2</div>

    </div>

    <div class="columna-derecha">

      <div class="parte1">Parte 1</div>

      <div class="parte2">Parte 2</div>

      <div class="parte3">Parte 3</div>

    </div>

  </div>

</body>

</html>

3️⃣ Lo que debes lograr con Flexbox

- La página debe tener dos columnas principales.
- La columna izquierda debe ocupar una parte del espacio.
- La columna derecha debe ocupar el doble de tamaño que la izquierda.
- En la columna izquierda, los elementos deben ordenarse verticalmente.
- En la columna derecha, divide el espacio en tres partes iguales (una sobre otra).
- Aplica un color de fondo diferente a cada una de las cuatro secciones totales para distinguirlas claramente.

(Ejemplo: la izquierda en tonos fríos y la derecha en tonos cálidos, o los colores que tú prefieras.)

📁

Evidencia

- Una captura completa mostrando las cuatro secciones con colores distintos.
- El contenido de tu archivo styles.css.

Todo debe entregarse en un solo archivo PDF.

📤

Método de entrega

Sube tu PDF a la plataforma.