#18 Proyecto final: tu página personal#18 Proyecto final: tu página personal

Lo que vas a construir

Ha llegado el momento de juntarlo todo. Vas a construir tu página personal: una web de una sola página con:

1. Una cabecera con tu nombre y un menú.
2. Una portada con una frase sobre ti y un botón.
3. Una sección Sobre mí con tu foto.
4. Una sección Proyectos (o aficiones) con tarjetas.
5. Un formulario de contacto.
6. Un pie con enlaces.

Y, al final, la publicarás en Internet para enseñársela a quien quieras.

Paso 1: planifica

Antes de escribir código, coge papel y boli:

• El contenido: escribe los textos de verdad (tu frase de presentación, tu párrafo «Sobre mí», tres proyectos con una línea cada uno). Con textos reales es mucho más fácil diseñar.
• Un boceto: dibuja cajas para cada sección, una debajo de otra, primero en formato móvil (estrecho) y luego en ordenador (ancho). No hace falta que quede bonito.
• Tu paleta: elige dos o tres colores y una o dos fuentes (repasa la lección 12).

Paso 2: la estructura HTML

Crea una carpeta mi-web-personal con index.html, estilos.css y una carpeta img con tu foto. Escribe primero todo el HTML, sin preocuparte del aspecto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

Paso 3: los estilos base

Ahora el CSS. Empieza por lo general: box-sizing, tipografía, colores y las imágenes fluidas. Lo definimos todo pensando en el móvil (mobile first).

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1d1d1f;
  background: #fafaf7;
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3 {
  line-height: 1.15;
}

a {
  color: #6a4cff;
}

Paso 4: sección a sección

Ve sección por sección, de arriba abajo. Te dejamos el resultado completo para que lo compares, pero inténtalo antes tú: es la mejor práctica que puedes hacer.

.cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: white;
  border-bottom: 1px solid #e5e5e5;
}

.logo {
  font-weight: 800;
  color: #1d1d1f;
  text-decoration: none;
}

.menu {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.portada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 48px 16px;
  text-align: center;
  background: linear-gradient(135deg, #e0d8ff, #d7ff00);
}

.portada h1 {
  margin: 0;
  font-size: 2.5rem;
}

.boton {
  display: inline-block;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: #1d1d1f;
  color: white;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover,
.boton:focus {
  background: #6a4cff;
}

.seccion {
  max-width: 1000px;
  margin: 0 auto;
  padding: 48px 16px;
}

.sobre-mi img {
  display: block;
  width: 180px;
  margin: 0 auto;
  border-radius: 50%;
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.tarjeta {
  padding: 20px;
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 500px;
}

.formulario input,
.formulario textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font: inherit;
}

.formulario .boton {
  align-self: flex-start;
  margin-top: 8px;
}

.pie {
  padding: 24px 16px;
  text-align: center;
  background: #1d1d1f;
  color: white;
}

Paso 5: responsive

Con la versión móvil lista, añade lo que cambia en pantallas grandes: la cabecera en una fila, la portada más grande y la foto al lado del texto.

@media (min-width: 768px) {
  .cabecera {
    flex-direction: row;
    justify-content: space-between;
    padding: 16px 32px;
  }

  .portada h1 {
    font-size: 4rem;
  }

  .sobre-mi {
    display: flex;
    align-items: center;
    gap: 40px;
  }

  .sobre-mi img {
    margin: 0;
  }
}

El resultado

Aquí tienes la página completa. Pulsa «Abrir en Práctica» para verla más grande, cambiarla a tu gusto y descargarla como index.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

Paso 6: revisa antes de publicar

Repasa esta lista. Puedes marcar cada punto: se guarda en tu navegador.

• La página tiene lang="es", <meta charset>, la etiqueta viewport y un <title> con tu nombre.
• Hay un solo <h1> y los encabezados van en orden.
• Todas las imágenes tienen un alt que las describe.
• Cada campo del formulario tiene su <label>.
• El texto se lee bien sobre su fondo (comprueba el contraste en las DevTools).
• Se ve dónde está el foco al moverte con la tecla Tab.
• Se ve bien a 360px, 768px y 1280px de ancho (modo dispositivo de las DevTools).
• El validador validator.w3.org no da errores.
• Los nombres de los archivos están en minúsculas y sin espacios.

Paso 7: publícala

Tu web son archivos estáticos (HTML, CSS e imágenes), así que publicarla es gratis. Tres opciones sencillas:

¿Y ahora qué?

¡Enhorabuena! Has pasado de no saber qué era una etiqueta a construir y publicar una web completa, adaptable y accesible. Algunas ideas para seguir:

• Haz más webs. La web de un negocio de tu barrio, una página para tu mascota, la réplica de una web que te guste. Se aprende construyendo.
• Profundiza en CSS: transiciones y animaciones, variables (--color-principal), position y pseudoelementos (::before).
• Juega: Flexbox Froggy y Grid Garden son juegos gratuitos para dominar Flexbox y Grid.
• Aprende JavaScript, el tercer lenguaje de la web, para que tus páginas reaccionen y hagan cosas.
• Consulta MDN (developer.mozilla.org/es): es la documentación de referencia de HTML y CSS, y la usan profesionales de todo el mundo.

Ficha resumen

• Orden de trabajo: contenido → boceto → HTML → CSS base → secciones → responsive → revisión → publicar.
• Primero el HTML completo y semántico; después el CSS, de lo general a lo particular.
• Mobile first: CSS para el móvil y media queries con min-width para lo demás.
• Revisa la accesibilidad, valida el HTML y prueba varios anchos.
• Publica gratis con Netlify Drop, GitHub Pages o Vercel.

Glosario