🎯 Objetivo del ejercicio

Diseñar y construir desde cero una página web personal estática que incluya:

Estructura semántica con HTML
Estilos personalizados con CSS (colores, tipografía, espaciado, bordes)
Navegación interna con enlaces
Un formulario de contacto
Un diseño adaptable (responsive) que se vea bien en dispositivos móviles, tablets y escritorio

📝 Instrucciones detalladas

📁 Estructura del proyecto

Crea una carpeta llamada mi-pagina-personal/ y dentro de ella los siguientes archivos:

mi-pagina-personal/
├── index.html
└── estilos.css

🔧 Paso a paso

1. HTML: Estructura y contenido

En index.html, incluye:

Doctype y estructura base (html, head, body)
Etiquetas semánticas: header, nav, main, section, footer
Un encabezado con tu nombre y una breve presentación
Un menú de navegación interno que lleve a las siguientes secciones:
- Sobre mí
- Proyectos
- Contacto
Una sección “Sobre mí” con una imagen (puedes usar cualquier imagen personal o un avatar desde https://picsum.photos/200)
Una sección “Proyectos” con al menos una lista de 3 proyectos ficticios o reales
Una sección “Contacto” con un formulario que contenga:
- Nombre
- Correo electrónico
- Mensaje
- Botón para enviar
Un pie de página simple con tu nombre y el año actual

2. CSS: Estilos generales

En estilos.css, aplica:

Colores personalizados para fondo, texto y botones
Tipografía amigable usando font-family (usa fuentes del sistema o Google Fonts si lo deseas)
Bordes redondeados y espaciado (margin, padding)
Uso de clases e IDs para aplicar estilos específicos
Transiciones suaves en botones o enlaces
Estilos diferenciados para los elementos del formulario

3. Box Model y distribución

Usa box-sizing: border-box;
Ajusta márgenes y rellenos para evitar que los elementos estén pegados
Aplica bordes a ciertas secciones para que estén bien delimitadas visualmente

4. Diseño responsive con media queries

Aplica un diseño mobile first. En la base, diseña para pantallas pequeñas (móviles):

Menú de navegación en columna
Secciones apiladas una bajo otra
Fuente clara y legible

Agrega media queries con min-width para pantallas más grandes (tablets y escritorio):

@media (min-width: 768px) {
  /* cambia a diseño en dos columnas */
}

@media (min-width: 1200px) {
  /* aumenta el tamaño de fuentes y mejora el espaciado */
}

Ajusta:

El tamaño de la imagen
Distribución del contenido (ej. proyectos en 3 columnas en escritorio)
Tamaño del formulario y botones

✅ Criterios mínimos que debe cumplir la página

Elemento	¿Incluido?
Estructura HTML con etiquetas semánticas	✔️
Menú de navegación funcional con enlaces internos	✔️
Imagen en la sección “Sobre mí”	✔️
Lista de proyectos	✔️
Formulario con campos y botón	✔️
Estilos aplicados con clases, selectores y propiedades	✔️
Estilo para colores, fuentes y bordes	✔️
Diseño responsive con media queries	✔️

🎁 Extras opcionales (para practicar más)

Agrega un efecto hover a los botones del formulario
Usa Flexbox o Grid para organizar la sección de proyectos
Muestra una alerta alert("Gracias por contactarme!") cuando se envíe el formulario (opcional con JS)
Agrega íconos con Font Awesome o imágenes SVG

💡 Tips adicionales

Usa el inspector del navegador para verificar el Box Model y los espacios entre elementos.
Asegúrate de que todos los textos sean legibles (buen contraste y tamaño adecuado).
Prueba tu página en el modo responsive de tu navegador.
Revisa que los enlaces internos funcionen correctamente.
Mantén tu código ordenado y con sangría para facilitar la lectura.
Si usas Google Fonts, recuerda enlazarlas desde el <head> del HTML.

12 - 🧪 Ejercicio práctico 1: Creación de una web estática