HTML · Módulo 12 · Final

Proyecto final: tu primera página completa

Doce módulos, un montón de etiquetas, y ni una sola vez has construido algo de principio a fin. Hoy cambia eso. Nada de fragmentos aislados en un playground: vas a levantar una página real, completa, usando prácticamente todo lo que has aprendido en este curso. Es el examen final que no parece examen.

El reto: una página de presentación personal

Vas a construir una landing page personal de una sola página: el tipo de web que usarías para presentarte a ti mismo, a un pequeño negocio, o a un proyecto. No hace falta que sea perfecta ni original — el objetivo es que funcione y que uses conscientemente cada pieza que has ido aprendiendo.

💡 Consejo

Antes de escribir una sola línea, dedica cinco minutos a pensar en papel (o en una nota) qué secciones va a tener tu página, de arriba a abajo. Es mucho más fácil escribir HTML cuando ya sabes qué vas a construir, que ir improvisando etiqueta a etiqueta.

Checklist de requisitos técnicos

Tu proyecto final debería cumplir, como mínimo, con esta lista. Repásala una a una según la vayas completando — es literalmente un resumen de los doce módulos de este curso:

Módulo 1

Estructura completa: <!DOCTYPE html>, <html lang="es">, <head> con charset, viewport y <title> propios, al menos un comentario explicando alguna decisión.

Módulo 2

Al menos un enlace real (a tus redes sociales o a otra página) y al menos una imagen con su atributo alt bien escrito.

Módulo 3

Una lista (de habilidades, servicios o lo que encaje) y, si tiene sentido en tu contenido, una tabla.

Módulo 4

Un formulario de contacto con al menos dos campos, sus <label> correctamente asociados, y un botón de envío.

Módulo 5

Etiquetas semánticas de verdad: <header>, <main>, <section> para cada bloque de contenido, <footer>. Nada de <div> para todo.

Módulo 6

Al menos un uso con criterio de <strong> o <em>, y una cita con <blockquote> si encaja (un testimonio, por ejemplo).

Módulo 7

Uso de class para agrupar elementos que compartan estilo, y como mucho un par de id bien justificados (por ejemplo, para los enlaces del menú a cada sección).

Módulo 9

Un bloque <style> en el head con al menos las reglas básicas de color y tipografía de tu página.

Módulo 10

Si usas algún símbolo especial (©, →, o similar), hazlo con la entidad o el carácter directo aprendido en ese módulo.

Módulo 11

Un favicon declarado en el head, y código escrito siguiendo la guía de estilo: minúsculas, comillas, indentación consistente.

Estructura de partida sugerida

Si prefieres no enfrentarte a un archivo en blanco, aquí tienes un esqueleto de secciones típico para este tipo de página. Puedes seguirlo, adaptarlo o ignorarlo por completo — es solo un punto de partida, no una plantilla rígida.

proyecto-esqueleto.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tu nombre — presentación</title>
  <link rel="icon" href="favicon.png">
  <style>
    body { font-family: sans-serif; margin: 0; line-height: 1.6; }
    header, main, footer { padding: 24px; }
    section { margin-bottom: 40px; }
  </style>
</head>
<body>

<header>
    <h1>Tu nombre</h1>
    <p>Una frase corta que resuma quién eres.</p>
  </header>

<main>
    <section id="sobre-mi">
      <h2>Sobre mí</h2>
      <p>Un par de párrafos de presentación.</p>
    </section>

<section id="habilidades">
      <h2>Habilidades</h2>
      <ul>
        <li>Habilidad uno</li>
        <li>Habilidad dos</li>
      </ul>
    </section>

<section id="contacto">
      <h2>Contacto</h2>
      <form action="/enviar" method="post">
        <label for="nombre">Nombre</label>
        <input type="text" id="nombre" name="nombre" required>
        <br><br>
        <button type="submit">Enviar</button>
      </form>
    </section>
  </main>

</body>
</html>

💡 Consejo

Cuando termines, vuelve a leer tu propio código de arriba abajo como si fuera la primera vez que lo ves. Pregúntate: ¿entendería alguien qué es cada sección sin necesidad de verla renderizada? Si la respuesta es sí, has interiorizado lo más importante de todo este curso: HTML no va de que "se vea bien", va de que signifique lo correcto.

¿Y ahora qué?

Has terminado el track de HTML completo, de las doce piezas. El siguiente paso natural es tu curso de CSS —si no lo has empezado ya—, donde ese esqueleto que acabas de construir se viste de verdad: colores, tipografías, espaciados, capas, animaciones. HTML te ha enseñado el qué; CSS te enseñará el cómo se ve.

🎓 Enhorabuena

Has completado los 12 módulos del track de HTML de Gráffica Academy. Revisa tu perfil (arriba a la derecha) para ver tus logros desbloqueados.

← 11. Detalles finales Volver al inicio ✓