Proyecto: tu página personal

⏱ 90 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Planificar un sitio antes de escribir código.
Construir una página completa con HTML semántico y CSS.
Revisar su calidad y accesibilidad antes de publicarla.
Publicarla en línea con GitHub Pages.

1.Qué vas a construir

Llegó el momento de juntar todo. Vas a crear tu propia página personal: un sitio de una sola página, con tu presentación, tus intereses, tus proyectos y un formulario de contacto. Será el primer trabajo real de tu portafolio.

Cada parte usa algo que ya practicaste:

Parte de la página	Lo que usas	Lección
Estructura general	`header`, `nav`, `main`, `section`, `footer`	6
Presentación y textos	Títulos, párrafos, `strong`, `em`	1 y 2
Menú con enlaces internos	Lista de enlaces con `#id`	2 y 3
Foto de perfil	`img` con `alt`, `figure`	3
Intereses	Lista `ul`	3
Habilidades	Tabla con `caption` y `scope`	4
Contacto	Formulario con `label`, `required`	5
Diseño	CSS externo, flexbox, tarjetas, responsive	7
Accesibilidad	Enlace para saltar, foco visible, contraste, `alt`	9
Búsqueda y redes	`title`, `meta description`, Open Graph, favicon	10
Publicación	Git, GitHub y GitHub Pages	11

💡 Consejo · Hazlo tuyo

No copies el ejemplo palabra por palabra. Cambia el tema: puede ser tu portafolio, la página de un hobby, un negocio pequeño o una fan page. Un proyecto sobre algo que te importa se termina con más ganas.

2.Planifica antes de escribir

Dedica diez minutos con papel y lápiz. Es lo que más ahorra tiempo después.

Define el propósito. ¿Quién la visitará y qué debe encontrar? («Quiero que quien me contacte sepa qué hago»).
Lista las secciones. Ordénalas como las leería un visitante: primero quién eres, al final cómo contactarte.
Reúne el contenido. Escribe los textos y prepara una o dos imágenes (redúcelas a menos de 300 KB y ponles nombres en minúsculas).
Dibuja un boceto. Cuadros para cada sección, sin detalles. Marca dónde van el menú, las imágenes y el formulario.

📌 Nota · Contenido real primero

Escribir con textos de relleno («lorem ipsum») oculta problemas de diseño. Con tu contenido verdadero verás enseguida si un título es muy largo o si falta una sección.

3.Prepara la carpeta

Organiza tu proyecto así. Las rutas del HTML que escribirás después dependen de esta estructura:

Estructura del proyecto

mi-pagina/
├── index.html
├── css/
│   └── estilos.css
└── img/
    └── ana.jpg

El archivo principal se llama index.html: es el que los servidores muestran por defecto.
CSS e imágenes van en carpetas propias.
Usa nombres en minúsculas, sin espacios ni tildes.
Abre la carpeta completa en tu editor para que reconozca todos los archivos.

4.Escribe el HTML

Empieza por el HTML, sin preocuparte todavía por el aspecto. Si la página se lee bien sin estilos, estás construyendo bien la base. Este es un ejemplo completo; úsalo como guía para estructurar el tuyo:

index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ana Pérez · Mi página personal</title>
  <meta name="description" content="Página personal de Ana Pérez: quién soy, qué me gusta y cómo contactarme." />
  <link rel="stylesheet" href="css/estilos.css" />
</head>
<body>
  <header>
    <h1>Ana Pérez</h1>
    <p>Estudiante, curiosa y aprendiendo a crear páginas web.</p>
    <nav aria-label="Principal">
      <ul>
        <li><a href="#sobre-mi">Sobre mí</a></li>
        <li><a href="#intereses">Intereses</a></li>
        <li><a href="#proyectos">Proyectos</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="sobre-mi">
      <h2>Sobre mí</h2>
      <figure>
        <img src="img/ana.jpg" alt="Ana sonriendo frente a un paisaje de montañas" width="240" height="240">
        <figcaption>Una foto reciente.</figcaption>
      </figure>
      <p>Hola, soy <strong>Ana</strong>. Me gusta la tecnología y escribir.</p>
    </section>

    <section id="intereses">
      <h2>Intereses</h2>
      <ul>
        <li>Fotografía</li>
        <li>Senderismo</li>
        <li>Programación web</li>
      </ul>
    </section>

    <section id="proyectos">
      <h2>Proyectos</h2>
      <article class="tarjeta">
        <h3>Mi primera página</h3>
        <p>Una presentación hecha con HTML.</p>
        <a href="https://cacg-code.github.io/web-desde-cero/">Ver el curso</a>
      </article>
      <article class="tarjeta">
        <h3>Top 5 de lugares</h3>
        <p>Mi ranking de destinos, con imágenes y listas.</p>
      </article>
      <h3>Lo que sé hacer</h3>
      <table>
        <caption>Mis habilidades y su nivel</caption>
        <thead><tr><th scope="col">Habilidad</th><th scope="col">Nivel</th></tr></thead>
        <tbody>
          <tr><th scope="row">HTML</th><td>Básico</td></tr>
          <tr><th scope="row">CSS</th><td>Aprendiendo</td></tr>
        </tbody>
      </table>
    </section>

    <section id="contacto">
      <h2>Contacto</h2>
      <form action="https://formspree.io/f/TU_CODIGO" method="post">
        <p><label for="nombre">Nombre</label><br>
           <input type="text" id="nombre" name="nombre" required></p>
        <p><label for="correo">Correo</label><br>
           <input type="email" id="correo" name="correo" required></p>
        <p><label for="mensaje">Mensaje</label><br>
           <textarea id="mensaje" name="mensaje" rows="4" required></textarea></p>
        <button type="submit">Enviar mensaje</button>
      </form>
    </section>
  </main>

  <footer>
    <p>© 2026 Ana Pérez</p>
    <address>Escríbeme a <a href="mailto:hola@ejemplo.com">hola@ejemplo.com</a></address>
  </footer>
</body>
</html>

⚠️ Importante · Cambia el action del formulario

El formulario necesita un servicio que reciba los mensajes. Sitios como Formspree o Getform ofrecen un plan gratuito: te dan una dirección que pegas en action. Mientras no tengas una, el formulario no enviará nada. También puedes sustituirlo por un enlace mailto:.

🔍 Ejemplo · Enlaces internos

El menú usa href="#contacto", que lleva a la sección con id="contacto". Con CSS puedes añadir scroll-behavior: smooth; en html para que el desplazamiento sea suave.

Abre el archivo en el navegador. Verifica que los enlaces del menú lleven a cada sección y que la imagen se vea.

5.Dale estilo con CSS

Ahora crea css/estilos.css. Este arranque aplica lo que viste en la lección 7. Modifica colores, tipografías y medidas hasta que refleje tu personalidad:

css/estilos.css

:root {
  --principal: #4f46e5;
  --fondo: #f7f8fc;
  --texto: #1e2235;
  --tarjeta: #ffffff;
  --borde: #dde2ef;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, sans-serif;
  line-height: 1.7;
}

header {
  padding: 32px 20px;
  text-align: center;
  background: var(--principal);
  color: white;
}
header h1 { margin: 0; }

nav ul {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
nav a { color: white; font-weight: 600; text-decoration: none; }
nav a:hover { text-decoration: underline; }

main { max-width: 760px; margin: 0 auto; padding: 24px 20px; }
section { margin-bottom: 40px; }
h2 { color: var(--principal); }

figure { margin: 0 0 16px; }
figure img { border-radius: 50%; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  transition: transform .2s, box-shadow .2s;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); }

table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 12px; border: 1px solid var(--borde); text-align: left; }
th { background: #eef1f8; }

input, textarea { width: 100%; padding: 8px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; }
button {
  padding: 10px 22px; border: 0; border-radius: 10px;
  background: var(--principal); color: white; font: inherit; font-weight: 600; cursor: pointer;
}
button:hover { opacity: .9; }
:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }

footer { padding: 24px 20px; text-align: center; border-top: 1px solid var(--borde); }

@media (max-width: 600px) {
  nav ul { flex-direction: column; align-items: center; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

💡 Consejo · Cambios pequeños y frecuentes

Cambia una cosa, guarda y recarga. Si algo se rompe, sabrás exactamente qué fue. Tu mejor aliada es la herramienta de inspección: F12 y clic derecho → Inspeccionar.

6.Revisión de calidad

Antes de publicar, repasa esta lista. Cada punto corresponde a algo que aprendiste:

Revisión	Cómo comprobarlo
Estructura	Hay un solo `h1` y un solo `main`; los títulos no saltan de nivel.
Imágenes	Todas tienen `alt` útil (o `alt=""` si son decorativas) y pesan poco.
Enlaces	Cada enlace lleva a donde debe. Los externos abren con `rel="noopener"`.
Formulario	Cada campo tiene `label`, `id`, `name`; los obligatorios llevan `required`.
Teclado	Con `Tab` recorres todo y siempre ves dónde está el foco.
Celular	Reduce la ventana a unos 400 px: no hay desplazamiento horizontal y todo se lee.
Contraste	El texto se distingue bien del fondo, tanto en colores claros como oscuros.
Validación	Pega tu código en validator.w3.org y corrige los errores que indique.

📌 Nota · El validador es un maestro

No temas ver errores. Cada aviso del validador explica qué está mal y en qué línea. Corregirlos es de las formas más rápidas de aprender.

7.Publica tu página

Ya sabes cómo se hace: lo viste en la lección 11. Este curso está publicado de la misma forma, con GitHub Pages:

Crea un repositorio nuevo en GitHub (si quieres que sea tu sitio principal, llámalo tu-usuario.github.io).
Sube tus archivos: index.html, css/ e img/.
Entra a Settings → Pages, elige Deploy from a branch, la rama main y la carpeta / (root). Guarda.
Espera uno o dos minutos y abre la dirección que te muestra GitHub. Prueba todos los enlaces desde ahí.

⚠️ Importante · Mayúsculas y rutas

En GitHub Pages Foto.jpg y foto.jpg son archivos distintos. Si algo funciona en tu computadora pero no en línea, casi siempre es una diferencia de mayúsculas o de ruta.

💡 Consejo · Comparte con orgullo

Pon el enlace de tu página en tus redes y en tu currículum. Una página sencilla pero tuya dice más que una lista de cursos terminados.

8.Qué sigue

Terminar este curso es el comienzo. Algunas rutas posibles, de la más cercana a la más ambiciosa:

Tema	Qué aprenderás	Dónde empezar
CSS avanzado	Grid, animaciones, diseño responsivo a fondo	MDN: Aprende CSS
JavaScript	Dar comportamiento: menús que se abren, formularios que validan, juegos	MDN: Aprende JavaScript
Colaborar en GitHub	Ramas, Pull Requests e issues para trabajar con otras personas	Documentación de GitHub
Rendimiento web	Medir y acelerar tu sitio con Lighthouse y las herramientas del navegador	web.dev
Accesibilidad avanzada	WCAG a fondo y pruebas con lectores de pantalla	MDN: Accesibilidad

Y la mejor recomendación: construye cosas. Una página para tu familia, un portafolio, una carta de restaurante. Cada proyecto te enseña algo que ningún curso puede enseñarte.

📒 Apuntes para llevar

Un proyecto empieza con propósito, secciones, contenido y boceto, no con código.
Estructura de carpetas clara: index.html, css/ e img/, con nombres en minúsculas y sin espacios.
Escribe primero el HTML semántico; el CSS viene después.
El menú de una página larga usa enlaces internos (href="#id").
Un formulario necesita un servicio que reciba los datos; sin él solo se ve.
Antes de publicar: estructura, imágenes, enlaces, formulario, teclado, celular, contraste y validador.
GitHub Pages publica una carpeta de tu repositorio en línea de forma gratuita.
Seguir aprendiendo: CSS avanzado, JavaScript, Git y accesibilidad.

9.Glosario

Término	Significado
Portafolio	Colección de tus mejores trabajos, para mostrarlos a otras personas.
Boceto	Dibujo rápido de cómo se organizará una página.
`index.html`	Archivo que un servidor muestra por defecto en una carpeta.
Validador	Herramienta que revisa que tu código HTML cumpla el estándar.
Despliegue	Publicar tu sitio para que cualquiera pueda verlo en internet.
Responsivo	Diseño que se adapta al tamaño de la pantalla.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Cuál es el primer paso de un proyecto web?

¿Por qué el archivo principal se llama index.html?

Cuando visitas una carpeta sin indicar archivo, el servidor busca index.html.

Tu página funciona en tu PC pero en línea no se ve una imagen. ¿Qué revisas primero?

Los servidores distinguen mayúsculas de minúsculas. Foto.JPG no es foto.jpg.

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio