Tu web personal, pieza a pieza
Primer proyecto del curso: una landing de marca personal. Tu carta de presentación y, a la vez, la mejor forma de aprender cómo funciona una web por dentro antes de dejar que un agente la construya por ti.
Qué vas a construir
Una web real es una carpeta con ficheros que el navegador interpreta en tres pasos: el HTML dice qué hay, el CSS cómo se ve y el JS qué hace. Ese es el trío que aprenderás a dirigir:
index.html
Estructura y contenido. Qué hay en la página y en qué orden: encabezados, párrafos, imágenes, enlaces. El esqueleto.
style.css
Presentación. Colores, tipografías, espaciados, rejillas y versión móvil. No añade contenido: lo viste. Aquí la web se vuelve tuya.
script.js
Comportamiento. Lo que reacciona: menú en móvil, modo oscuro, animaciones. La página deja de ser un folio.
Cuando los proyectos crezcan llegará el cuarto elemento, la base de datos (usuarios, partidas, pedidos): el corazón del proyecto final en grupo.
Anatomía de una web de marca personal
Una landing de marca responde en 10 segundos a quien llega. Cada bloque tiene una misión:
| Bloque | Qué contiene | Qué responde |
|---|---|---|
| 1 · Cabecera (hero) | Tu nombre, una frase que te defina y una llamada a la acción («ver proyectos», «contáctame»). Decide si siguen leyendo. | ¿Quién es este y por qué me importa? |
| 2 · Sobre mí | 2-4 líneas: de dónde vienes, qué estudias, qué te motiva. Primera persona, sin postureo. | ¿Quién eres de verdad? |
| 3 · Lo que he hecho | Pruebas: cursos, proyectos, deportes, colaboraciones. Hechos con contexto, no adjetivos. | ¿Qué sabes hacer? |
| 4 · Me gusta | 3-6 cosas que te interesan (música, tech, videojuegos…). Tu diferenciador; da pistas de cómo piensas. | ¿Qué te quema dentro? |
| 5 · Contacto | Correo y enlaces (GitHub, LinkedIn). Sin fricción: un clic y apareces. | ¿Cómo te escribo? |
| 6 · Pie | Tu nombre, año, un detalle con personalidad. | Cierre profesional. |