Title: Actividad 15: Proyecto Final – Mini Sitio Interactivo
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

🎯 Objetivo

Integrar todos los conocimientos del curso (HTML5, CSS3 y JavaScript) para crear un sitio web completo e interactivo que muestre dominio del DOM, estilos, estructura y eventos.

🧩 Instrucciones

1️⃣ Identificación
Al inicio del documento o dentro del sitio (en el footer) debe aparecer tu nombre completo y el nombre del profesor.

2️⃣ Estructura del proyecto
Crea una carpeta con los siguientes archivos:

/proyecto-final
│
├── index.html
├── estilos.css
└── app.js


3️⃣ Requisitos del sitio
Tu mini sitio debe incluir lo siguiente:

🧱 HTML (estructura y contenido)

- Un encabezado (header) con un título o logotipo y un menú de navegación funcional (enlaces que cambien el contenido visible o secciones dentro del mismo HTML).
- Una sección principal (main) con al menos tres apartados (por ejemplo: Inicio, Galería, Contacto o Servicios).
- Un formulario de contacto con campos como nombre, correo y mensaje.
- Un pie de página (footer) con tu nombre, año y enlaces ficticios a redes sociales.

🎨 CSS (estilos y diseño)

- Usa Flexbox para organizar las secciones principales.
- Aplica colores, tipografías y márgenes adecuados.
- El menú de navegación debe cambiar de color al pasar el cursor (:hover).
- Las tarjetas, botones o secciones deben tener efectos visuales con pseudoclases (:hover, :focus, :active).
- El diseño debe ser responsivo (usa @media para pantallas pequeñas).

⚙️ JavaScript (interactividad)

- Usa al menos dos eventos DOM (addEventListener) para:
  - Cambiar contenido o color de algún elemento.
  - Validar los campos del formulario (que no estén vacíos).
- Agrega un botón que muestre/oculte una sección del sitio.
- Puedes usar arreglos o estructuras simples para generar contenido dinámico (por ejemplo, mostrar tarjetas con un forEach).

📁 Evidencia

Un único documento PDF que incluya:

- Capturas del sitio completo (vista principal, formulario, efectos visuales y eventos funcionando).
- Fragmentos del código HTML, CSS y JS más importantes.
- Tu nombre completo y el nombre del profesor al inicio.

📤 Método de entrega

Sube tu PDF a la plataforma en la fecha indicada.

🎯 Objetivo

Integrar todos los conocimientos del curso (HTML5, CSS3 y JavaScript) para crear un sitio web completo e interactivo que muestre dominio del DOM, estilos, estructura y eventos.

🧩 Instrucciones

1️⃣ Identificación
Al inicio del documento o dentro del sitio (en el footer) debe aparecer tu nombre completo y el nombre del profesor.

2️⃣ Estructura del proyecto
Crea una carpeta con los siguientes archivos:

/proyecto-final
│
├── index.html
├── estilos.css
└── app.js


3️⃣ Requisitos del sitio
Tu mini sitio debe incluir lo siguiente:

🧱 HTML (estructura y contenido)

- Un encabezado (header) con un título o logotipo y un menú de navegación funcional (enlaces que cambien el contenido visible o secciones dentro del mismo HTML).
- Una sección principal (main) con al menos tres apartados (por ejemplo: Inicio, Galería, Contacto o Servicios).
- Un formulario de contacto con campos como nombre, correo y mensaje.
- Un pie de página (footer) con tu nombre, año y enlaces ficticios a redes sociales.

🎨 CSS (estilos y diseño)

- Usa Flexbox para organizar las secciones principales.
- Aplica colores, tipografías y márgenes adecuados.
- El menú de navegación debe cambiar de color al pasar el cursor (:hover).
- Las tarjetas, botones o secciones deben tener efectos visuales con pseudoclases (:hover, :focus, :active).
- El diseño debe ser responsivo (usa @media para pantallas pequeñas).

⚙️ JavaScript (interactividad)

- Usa al menos dos eventos DOM (addEventListener) para:
  - Cambiar contenido o color de algún elemento.
  - Validar los campos del formulario (que no estén vacíos).
- Agrega un botón que muestre/oculte una sección del sitio.
- Puedes usar arreglos o estructuras simples para generar contenido dinámico (por ejemplo, mostrar tarjetas con un forEach).

📁 Evidencia

Un único documento PDF que incluya:

- Capturas del sitio completo (vista principal, formulario, efectos visuales y eventos funcionando).
- Fragmentos del código HTML, CSS y JS más importantes.
- Tu nombre completo y el nombre del profesor al inicio.

📤 Método de entrega

Sube tu PDF a la plataforma en la fecha indicada.