🎯 Objetivo
Diseñar una página web en HTML que muestre tu perfil profesional, habilidades, proyectos destacados y una forma de contacto. Todo organizado con etiquetas semánticas modernas y elementos visuales.
🛠️ Archivo principal
Crea un archivo llamado portafolio.html
🧱 1. Estructura base del proyecto
Tu archivo debe tener la estructura semántica completa:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Portafolio</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<main>
<section id="sobre-mi">...</section>
<section id="habilidades">...</section>
<section id="proyectos">...</section>
<section id="contacto">...</section>
</main>
<footer>...</footer>
</body>
</html>
👤 2. Encabezado profesional
Dentro de <header>:
<h1>Tu Nombre</h1>
<p>Desarrollador Web | Diseñador UX | Freelance</p>
<img src="foto.jpg" alt="Foto de perfil" width="150">
🧭 3. Menú de navegación
Agrega enlaces internos que apunten a las secciones:
<nav>
<ul>
<li><a href="#sobre-mi">Sobre mí</a></li>
<li><a href="#habilidades">Habilidades</a></li>
<li><a href="#proyectos">Proyectos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
✍️ 4. Sección «Sobre mí»
En <section id="sobre-mi"> escribe una breve presentación, formación y motivación.
🧰 5. Sección de habilidades
Dentro de <section id="habilidades">, usa una lista con íconos o simplemente texto:
<h2>Habilidades Técnicas</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Git y GitHub</li>
</ul>
<h3>Nivel de dominio</h3>
<p>HTML <progress value="90" max="100"></progress></p>
<p>CSS <progress value="80" max="100"></progress></p>
🧪 6. Sección de proyectos destacados
En <section id="proyectos">, crea al menos 2 proyectos con:
<article>
<h3>Nombre del Proyecto</h3>
<p>Descripción breve del proyecto.</p>
<img src="proyecto1.png" alt="Captura del proyecto" width="300">
<p><a href="https://link-al-proyecto.com" target="_blank">Ver más</a></p>
</article>
Repite para otro proyecto.
📬 7. Formulario de contacto
En <section id="contacto"> crea un formulario que tenga:
- Campo nombre
- Campo correo
- Campo asunto
- Campo mensaje (textarea)
- Casilla de privacidad
- Botón de envío
🦶 8. Footer
Incluye en <footer>:
- Nombre
- Año actual
- Enlaces a redes sociales (pueden ser solo texto con
<a>)
🧠 Reto adicional
- Embebe un mapa de Google con
<iframe>. - Usa
<figure>y<figcaption>en tus proyectos. - Añade una sección de reconocimientos o logros.
- Usa
<details>y<summary>para mostrar información adicional opcional.
✅ Requisitos para completar el ejercicio
- Estructura clara, semántica y completa.
- Al menos 4 secciones: sobre mí, habilidades, proyectos y contacto.
- 2 artículos reales o simulados.
- Al menos una imagen, un formulario, una lista y un elemento multimedia.
¿Quieres que este ejercicio lo empaquete como archivo .html listo para descargar o que te lo prepare como plantilla en Google Docs o WordPress para tus alumnos?