Tu portada

50 minutos · Se hace en clase

Abre la carpeta mi-web en VS Code y trabaja sobre index.html. Al terminar, tu portada tiene que hablar de ti y no de nadie más.

Lo que hay que conseguir

• Tu nombre en el <h1> y también en el <title>.
• Tu bio en dos o tres <p> separados, uno por idea.
• Una imagen tuya o de tu trabajo, con su alt escrito.
• Tu correo en el pie, funcionando con mailto:.
• Todos los comentarios de instrucciones borrados.

Si acabas antes

• Añade un enlace a alguna web tuya o de alguien que admires.
• Pon una segunda imagen.
• Prueba a cambiar background-color en estilo.css. Solo eso, no toques nada más todavía.

Tu segunda página

55 minutos · Se hace en clase

Ahora tienes una sola página. Vamos a hacer la de proyectos, y a conectarlas.

Paso a paso

1. Duplica index.html y llama a la copia proyectos.html.
2. Cambia el <title> y vacía el <main>.
3. Pon <h2>Proyectos</h2> y debajo un bloque por proyecto:

<article>
  <h3>Título del proyecto</h3>
  <p>Año · Técnica · Lugar</p>
  <img src="img/obra-1.jpg" alt="Describe la obra">
  <p>Dos líneas sobre el proyecto.</p>
</article>

4. Copia ese bloque entero para el segundo proyecto y cambia el contenido.
5. Añade el enlace al menú de las dos páginas: <a href="proyectos.html">Proyectos</a>
6. Comprueba que puedes ir y volver clicando, sin tocar la barra del navegador.

Lo que hay que conseguir

• Dos páginas que se enlazan entre sí en los dos sentidos.
• Al menos dos proyectos con imagen y texto.
• Ningún enlace roto.

Deberes: reunir el material

Una hora, en casa · Sin esto la sesión 2 no cunde

No hay que programar nada. Es preparar el contenido, que es la parte que más tarda y la que no se puede improvisar en clase.

Textos

• Tu bio, escrita y revisada.
• La ficha de cada proyecto: título, año, técnica, lugar, dos o tres líneas.
• Tu CV: exposiciones, formación, lo que quieras incluir.

Imágenes

• Entre 5 y 10, en una carpeta.
• Reducidas a unos 1600 píxeles de ancho. Con Vista Previa o Paint, o en squoosh.app.
• Renombradas: sin espacios, sin acentos, en minúsculas. obra-2024.jpg, no Obra 2024.JPG.

Referencias

• Dos o tres webs que te gusten. Apunta de cada una qué te gusta: ¿el tamaño de letra? ¿que tenga mucho blanco? ¿los colores?

Elige una dirección

10 minutos · Antes de escribir una sola línea de CSS

Vas a ver cuatro webs con exactamente el mismo contenido y distinto CSS. Elige la que más se parezca a lo que quieres, y apunta por qué.

Rodea la que más te acerque

1. Ficha — columna estrecha, letra con remates, líneas finas.
2. Cartel — fondo oscuro, nombre enorme, un color fuerte.
3. Cuaderno — mucho aire, cursivas, más texto que imagen.
4. Índice — monoespaciada, denso, imágenes pequeñas.

Y contesta en una línea cada una

¿Qué es lo primero que quieres que vea alguien que entra?

¿Tu web es más de mirar o más de leer?

¿Un color de fondo claro u oscuro?

Tu CSS, por capas

Se va haciendo a la vez que la explicación

Trabaja siempre sobre estilo.css. Ve en este orden: si empiezas por los detalles, luego cambias la base y se descuadra todo.

1 · La base

• background-color y color en body.
• font-family: elige entre una con remates (serif) o sin ellos (sans-serif).
• font-size y line-height. Prueba 17, 18 y 20px y quédate con el que te canse menos.

2 · La columna

• max-width y margin: 0 auto en header, main y footer.
• Prueba 500px, 640px y 900px. Fíjate en cuál se lee mejor, no en cuál llena más.

3 · Los titulares

• Tamaño de h1, h2 y h3. Que se note la diferencia entre ellos.
• font-weight y, si quieres, letter-spacing negativo en el h1.

4 · El menú

• display: flex y gap en nav.
• Quitar el subrayado con text-decoration: none.
• Un :hover que se note.

5 · Separar los bloques

• margin-bottom en article.
• Una border-bottom fina entre proyectos.
• Aire arriba y abajo del footer.

6 · El móvil

• Una @media (max-width: 600px) al final del archivo.
• Dentro: bajar font-size del body y del h1, y reducir el padding.
• Comprobarlo estrechando la ventana hasta que quede como un móvil.

Publicar

75 minutos · Se hace en clase, paso a paso

Antes de subir nada

• Todas las imágenes están dentro de img/.
• Ningún nombre de archivo tiene espacios, acentos ni mayúsculas.
• La portada se llama exactamente index.html.
• Todos los enlaces del menú funcionan en local.
• Cada página tiene su <title> propio.
• Todas las imágenes tienen alt.

Subir

1. github.com → New repository.
2. Nombre mi-web, marcar Public, Create.
3. uploading an existing file.
4. Arrastrar el contenido de la carpeta, no la carpeta.
5. Commit changes.

Publicar

1. Settings → Pages.
2. Branch: main → Save.
3. Esperar un minuto y recargar.

Apunta aquí tu dirección

Cambiar algo y volver a subirlo

30 minutos · El ejercicio más importante de todo el taller

Publicar lo hace cualquiera una vez. Lo que hace que la web sea tuya es saber cambiarla dentro de seis meses. Hazlo tú sola, entera.

El ciclo completo

1. En VS Code, cambia algo que se note: una frase, un color, una imagen.
2. Guarda.
3. Ábrelo en tu navegador en local y comprueba que está bien.
4. En GitHub: Add file → Upload files.
5. Arrastra el archivo cambiado encima del que ya estaba.
6. Commit changes.
7. Espera un minuto, recarga tu web publicada y comprueba el cambio.

Repítelo con otra cosa

• Añade un proyecto nuevo a proyectos.html.
• Súbelo tú sola, sin mirar los pasos de arriba.

Antes de irte

• Tengo mi dirección apuntada en papel.
• Tengo la carpeta guardada en mi ordenador.
• Sé entrar en mi cuenta de GitHub.
• He hecho el ciclo completo yo sola, al menos dos veces.
• Me llevo la guía y la chuleta.