En esta página

Proyecto final - Página de portafolio personal

20 min lectura TextoCap. 5 — Práctica y SEO

Proyecto final: Portafolio personal

En esta leccion final vamos a construir un portafolio personal completo usando todo lo que aprendiste en el curso. Este proyecto integra:

  • Estructura semántica (header, main, footer, article, section)
  • Navegación con anclas internas
  • Imagenes con texto alternativo
  • Tabla de habilidades accesible
  • Formulario de contacto con validación HTML5
  • Meta tags para SEO y redes sociales
  • Accesibilidad (skip link, aria-labels, encabezados jerarquicos)

Planificacion de la estructura

Antes de escribir código, planifiquemos las secciones del portafolio:

  1. Header — Logo/nombre + navegación principal
  2. Hero — Presentación breve con call to action
  3. Sobre mi — Foto, descripción y datos personales
  4. Proyectos — Tarjetas con proyectos realizados
  5. Habilidades — Tabla con tecnologias y niveles
  6. Contacto — Formulario de contacto completo
  7. Footer — Enlaces a redes sociales y copyright

Mapa del documento

html
  head (meta tags, title, description, og tags)
  body
    skip-link
    header > nav
    main
      section#hero
      section#sobre-mi (figure con img)
      section#proyectos (articles)
      section#habilidades (table)
      section#contacto (form con fieldset)
    footer > nav

Paso 1: Head con meta tags

El <head> debe incluir todos los meta tags esenciales que aprendimos:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Portafolio | Tu Nombre</title>
  <meta name="description" content="Portafolio con mis proyectos y habilidades.">
  <meta property="og:title" content="Mi Portafolio">
  <meta property="og:description" content="Conoce mis proyectos web.">
  <meta property="og:type" content="website">
</head>

Paso 2: Header y navegación

La navegación usa anclas internas para desplazarse a cada sección:

<header>
  <nav aria-label="Navegación principal">
    <a href="#">Tu Nombre</a>
    <ul>
      <li><a href="#sobre-mi">Sobre mi</a></li>
      <li><a href="#proyectos">Proyectos</a></li>
      <li><a href="#habilidades">Habilidades</a></li>
      <li><a href="#contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

No olvides el aria-label para que los lectores de pantalla identifiquen el propósito de la navegación.

Paso 3: Sección Hero

La sección hero es lo primero que ve el visitante. Debe comunicar quien eres y que haces en pocas palabras:

<section aria-labelledby="hero-título">
  <h1 id="hero-título">Hola, soy Tu Nombre</h1>
  <p>Desarrollador web junior apasionado por la accesibilidad.</p>
  <a href="#proyectos">Ver mis proyectos</a>
</section>

Usamos aria-labelledby para asociar la sección con su encabezado, lo que mejora la navegación por lectores de pantalla.

Paso 4: Proyectos como articles

Cada proyecto es un contenido independiente, por eso usamos <article>:

<section id="proyectos">
  <h2>Mis proyectos</h2>

  <article>
    <h3>Nombre del proyecto</h3>
    <p>Descripcion del proyecto y lo que aprendi.</p>
    <ul>
      <li>Tecnologia 1</li>
      <li>Tecnologia 2</li>
    </ul>
    <a href="#" target="_blank" rel="noopener">Ver proyecto</a>
  </article>
</section>

Paso 5: Tabla de habilidades

La tabla de habilidades aplica todo lo aprendido sobre tablas accesibles:

<table>
  <caption>Mis habilidades técnicas</caption>
  <thead>
    <tr>
      <th scope="col">Tecnologia</th>
      <th scope="col">Nivel</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML5</th>
      <td>Intermedio</td>
    </tr>
  </tbody>
</table>

Recuerda incluir <caption> y scope en cada <th> para la accesibilidad.

Paso 6: Formulario de contacto

El formulario aplica todo lo aprendido sobre formularios y validación:

<form action="/api/contacto" method="post">
  <fieldset>
    <legend>Envia tu mensaje</legend>
    <label for="nombre">Nombre *</label>
    <input type="text" id="nombre" name="nombre" required minlength="2">
    <label for="email">Email *</label>
    <input type="email" id="email" name="email" required>
    <label for="mensaje">Mensaje *</label>
    <textarea id="mensaje" name="mensaje" required minlength="20" rows="5"></textarea>
    <button type="submit">Enviar</button>
  </fieldset>
</form>

El footer incluye una segunda navegación con enlaces a redes sociales:

<footer>
  <nav aria-label="Redes sociales">
    <ul>
      <li><a href="https://github.com/tu-usuario" target="_blank" rel="noopener">GitHub</a></li>
      <li><a href="https://linkedin.com/in/tu-perfil" target="_blank" rel="noopener">LinkedIn</a></li>
    </ul>
  </nav>
  <p>&copy; 2025 Tu Nombre</p>
</footer>

Checklist de validación

Antes de dar por terminado tu proyecto, verifica cada punto:

Estructura

  • Tiene <!DOCTYPE html> y <html lang="es">
  • El <head> incluye charset, viewport, title y description
  • Solo hay un <h1> en toda la página
  • Los encabezados siguen orden jerarquico (h1 > h2 > h3)
  • Usa elementos semanticos (header, main, nav, article, section, footer)

Accesibilidad

  • Tiene skip link al contenido principal
  • Todas las imagenes tienen atributo alt apropiado
  • Todos los inputs tienen <label> asociado
  • Los <nav> tienen aria-label descriptivo
  • Los <th> de tablas tienen atributo scope

SEO

  • El <title> es descriptivo y único
  • La <meta description> resume el contenido
  • Incluye meta tags Open Graph básicos
  • La URL canonica esta definida

Formulario

  • Los campos obligatorios tienen required
  • Usa tipos de input apropiados (email, tel, etc.)
  • Incluye autocomplete en campos relevantes
  • Los campos tienen validación con minlength/maxlength

Proximos pasos

Has completado el curso de HTML desde cero. Ahora sabes crear páginas web estructuradas, accesibles y optimizadas para buscadores. El siguiente paso natural es aprender CSS para darle estilo visual a tus páginas, seguido de JavaScript para agregar interactividad.

Tu portafolio actual es funcional pero no tiene estilos. Cuando completes el curso de CSS, podrás transformarlo en una página visualmente atractiva manteniendo toda la estructura semántica y accesible que construiste aquí.

Felicidades! Has completado el curso de HTML desde cero. Continua con CSS Fundamentals para aprender a darle estilo a tus páginas.

Personaliza tu portafolio
Este proyecto es una base que puedes personalizar. Cambia los textos, agrega tus proyectos reales y ajusta las secciones a tu perfil. Cuando aprendas CSS, podrás darle estilo visual.
Checklist de calidad
Antes de considerar el proyecto terminado, verifica: cada imagen tiene alt, cada input tiene label, los encabezados siguen jerarquia, el lang esta definido, y el título y description son unicos.
html
<!-- Estructura general del portafolio -->
<body>
  <a href="#main" class="skip-link">Saltar al contenido</a>

  <header>
    <nav aria-label="Principal">
      <!-- Logo + menu de navegación -->
    </nav>
  </header>

  <main id="main">
    <section id="hero"><!-- Presentación --></section>
    <section id="sobre-mi"><!-- Sobre mi --></section>
    <section id="proyectos"><!-- Proyectos --></section>
    <section id="habilidades"><!-- Tabla de habilidades --></section>
    <section id="contacto"><!-- Formulario --></section>
  </main>

  <footer>
    <nav aria-label="Redes sociales">
      <!-- Enlaces sociales -->
    </nav>
  </footer>
</body>
Playground
Resultado