chuletón

Lo que lleva toda página, siempre igual. Copia esto en cada archivo nuevo.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tu nombre — Proyectos</title>
  <link rel="stylesheet" href="estilo.css">
</head>
<body>

</body>
</html>

charset hace que los acentos y la ñ no salgan rotos. viewport hace que el móvil no encoja la página. Los dos son obligatorios.

Las cajas grandes de la página. No hacen nada visible por sí solas: sirven para organizar y para que el CSS pueda apuntarles.

• header cabecera
• nav el menú
• main el contenido de esta página
• footer el pie
• article una unidad: un proyecto
• section un apartado
• div una caja sin significado

<header>
  <h1>Rita Mestre</h1>
  <nav>
    <a href="index.html">Inicio</a>
    <a href="proyectos.html">Proyectos</a>
  </nav>
</header>

Títulos, de más a menos importante. Es jerarquía, no tamaño: el tamaño lo decides luego en el CSS.

Un solo h1 por página, y no te saltes niveles: después de un h2 va un h3, no un h5.

Párrafo, salto de línea suelto y línea de separación.

<p>Un párrafo. Uno por idea.</p>
<p>Barcelona<br>2026</p>   salto sin cambiar de párrafo
<hr>                       una línea horizontal

br y hr no se cierran. Y usa br poco: si quieres separar ideas, son dos párrafos.

Marcar un trozo dentro de un texto.

• strong negrita
• em cursiva
• small letra pequeña
• mark subrayado con color
• s tachado

<p>Pieza de <strong>gres</strong> con <em>engobe</em>.</p>

Listas. ul con puntos, ol numerada. Cada li es una línea. El CV entero es una lista.

<ul>
  <li>2026 · <em>Cámaras sordas</em>, La Escocesa, Barcelona</li>
  <li>2025 · <em>Ruido blanco</em>, Sala X, Girona</li>
</ul>

Para quitar los puntos: ul { list-style: none; padding-left: 0; }

Un enlace. href es a dónde va; lo de entre las etiquetas es lo que se ve y se clica.

<a href="cv.html">CV</a>                        otra página tuya
<a href="https://neocities.org">Neocities</a>   otra web (con https://)
<a href="mailto:rita@ejemplo.com">Escríbeme</a>   abre el correo
<a href="tel:+34600000000">Llámame</a>           llama, en el móvil
<a href="cv.pdf" download>Descargar CV</a>      descarga un archivo
<a href="#contacto">Ir al contacto</a>          baja a id="contacto"

Para abrir en pestaña nueva: target="_blank" rel="noopener". Úsalo solo para webs de fuera.

Una imagen. src es dónde está el archivo; alt la describe para quien no la ve.

<img src="img/obra-1.jpg" alt="Cinco recipientes de gres sobre una mesa">

No lleva cierre. El nombre del archivo y el src tienen que coincidir exactamente: .JPG no es .jpg.

Una imagen con su pie, atados. Es lo correcto para una ficha técnica.

<figure>
  <img src="img/obra-1.jpg" alt="…">
  <figcaption>Cámaras sordas, 2026. Gres, 30 × 20 cm.</figcaption>
</figure>

Que las imágenes de más abajo no se carguen hasta que hagan falta, y que la página no dé saltos mientras cargan.

<img src="img/obra-1.jpg" alt="…"
     width="1600" height="1200" loading="lazy">

Pon las medidas reales del archivo. El tamaño en pantalla lo sigue decidiendo el CSS.

Vídeo o sonido servido desde tu propia carpeta, sin YouTube de por medio.

<video src="video/pieza.mp4" controls width="640"></video>
<audio src="audio/campo.mp3" controls></audio>

Ojo al peso. GitHub Pages no sirve archivos de más de 100 MB, y un vídeo largo tarda en cargar. Para piezas largas, mejor un enlace o un iframe de Vimeo.

Meter dentro de tu página algo que vive en otro sitio: un vídeo de Vimeo, un disco de Bandcamp, un mapa.

<iframe src="https://player.vimeo.com/video/000000"
        width="640" height="360"
        title="Documentación de la pieza"
        allowfullscreen></iframe>

En esas webs, botón Compartir → Insertar y te dan el código hecho. Para que se adapte al móvil: iframe { max-width: 100%; }

Una nota para ti que no se ve en el navegador. Sirve para dejarte recordatorios y para apagar un trozo sin borrarlo.

<!-- esto no se ve -->
<!-- <a href="tienda.html">Tienda</a> -->   apagado hasta que exista

El iconito de la pestaña y el texto que sale en Google. Van en el <head>.

<link rel="icon" href="favicon.png">
<meta name="description" content="Rita Mestre, cerámica y sonido. Barcelona.">

El favicon, un PNG cuadrado de 64 × 64 en la raíz de tu carpeta. La descripción, una frase por página.

Ponerle un nombre a un trozo del HTML para que el CSS pueda apuntarle solo a él.

en el HTML
<p class="ficha">2026 · Gres</p>
<section id="contacto">…</section>

en el CSS
.ficha  { color: grey; }        punto para class
#contacto { margin-top: 80px; }  almohadilla para id

class se puede repetir todas las veces que quieras: es lo que usarás casi siempre. id es único en la página y sirve sobre todo para enlazar con #.

selector {
  propiedad: valor;
}

Punto y coma al final de cada línea. Si te lo olvidas, esa línea deja de funcionar y a veces la siguiente también, y no avisa nadie: no sale ningún error, simplemente no pasa nada.

Comentario en CSS: /* así */. Sirve para apagar una línea sin borrarla.

p { }                  todos los párrafos
.ficha { }             todo lo que tenga class="ficha"
#contacto { }          lo que tenga id="contacto"
header, footer { }    los dos — la coma es "y también"
nav a { }              los enlaces DENTRO de nav — el espacio es "dentro de"
a:hover { }            cuando el ratón está encima
* { }                  absolutamente todo

La confusión más común: header, a son las cabeceras y todos los enlaces. header a son solo los enlaces de dentro de la cabecera. Una coma lo cambia todo.

Apuntar a un elemento por su posición dentro de la serie.

article:first-child { margin-top: 0; }
article:last-child  { border-bottom: none; }
li:nth-child(2)     { color: red; }       el segundo
li:nth-child(odd)   { background: #f4f4f4; } 1º, 3º, 5º…
li:nth-child(even)  { background: #fff; }    2º, 4º, 6º…

Quitarle el borde al último de una serie es el uso que más vas a darle.

Cuando dos reglas dicen cosas distintas sobre lo mismo, gana:

• 1 · el selector más específico (id > class > elemento)
• 2 · a igualdad, el que esté más abajo en el archivo

Por eso la media query del móvil va siempre al final. Y por eso !important casi nunca es la solución: si lo necesitas, normalmente es que hay dos reglas peleándose y conviene arreglar eso.

Guardar un valor con nombre y usarlo por toda la web. Cambias el color en un sitio y cambia en todas partes.

:root {
  --tinta: #12233a;
  --papel: #fbfaf7;
  --acento: #f2e94e;
}

body    { color: var(--tinta); background: var(--papel); }
a:hover { background: var(--acento); }

Es la mejora que más se agradece cuando ya tienes tres o cuatro páginas.

Qué tipografía. Pones varias separadas por comas y el navegador usa la primera que encuentre instalada. La última es el comodín.

con remates — para leer, clásica
font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;

sin remates — limpia, neutra
font-family: "Helvetica Neue", Arial, sans-serif;

de máquina de escribir — técnica, de archivo
font-family: ui-monospace, "SF Mono", Menlo, monospace;

la del sistema — la que use quien te visite
font-family: system-ui, sans-serif;

Estas cuatro no hay que descargarlas: ya están en todos los ordenadores.

Dos caminos. El rápido va en el <head> del HTML:

<link href="https://fonts.bunny.net/css?family=eb-garamond" rel="stylesheet">

Ese es el mismo catálogo que Google Fonts con el dominio cambiado, y no le pasa a Google la IP de quien te visita. Si copias un <link> de Google Fonts, sustituye fonts.googleapis.com/css2?family=EB+Garamond por fonts.bunny.net/css?family=eb-garamond — en minúsculas y con guiones — y ya está.

El bueno: descargas el archivo, lo metes en tipos/ y lo sirves tú. Carga más rápido y no le cuentas a nadie quién te visita.

@font-face {
  font-family: "Mi Tipo";
  src: url("tipos/mi-tipo.woff2") format("woff2");
  font-display: swap;
}
body { font-family: "Mi Tipo", Georgia, serif; }

Mira la licencia antes de subir una tipografía de pago. Gratis y buenas: Velvetyne y Collletttivo (libres, raras, de cartel — las que le dan carácter a una web de artista), Fontshare (familias completas y muy pulidas) y Bunny Fonts (el catálogo de Google, servido sin rastreo).

El tamaño de la letra.

• 16px lo mínimo cómodo
• 18px agradable para leer
• 20px generoso
• 1.2rem proporcional al del navegador

Prueba 17, 18 y 20 en el body y quédate con el que te canse menos. Nunca bajes de 14px en texto que haya que leer.

Un tamaño que crece con la pantalla, entre un mínimo y un máximo. Para titulares es magnífico: te ahorra la media query.

h1 { font-size: clamp(32px, 7vw, 76px); }
                 ↑mínimo  ↑crece  ↑tope

vw es «por cien del ancho de la ventana». Compruébalo estrechando el navegador.

La separación entre líneas. Es el ajuste que más cambia la sensación de una web y el que más se olvida.

• 1.2 apretado — para titulares
• 1.5–1.6 cómodo — para leer
• 1.8 aireado

Sin unidad: line-height: 1.6, no 1.6px.

Grosor y cursiva.

• normal / 400
• bold / 700
• 300 fino
• 900 negrísimo
• font-style: italic
• font-style: normal quita la cursiva

Los números solo funcionan si la tipografía tiene ese grosor. Si no, el navegador lo finge y queda mal.

Cómo se alinea el texto dentro de su caja.

• left por defecto
• center centrado
• right a la derecha
• justify cuadrado a los dos lados

justify deja ríos de espacio feos en columnas estrechas: úsalo solo en columnas anchas. Y center para párrafos largos cansa; resérvalo para titulares y frases sueltas.

Cambia las mayúsculas sin tocar el HTML: el texto de verdad sigue escrito como lo escribiste.

• uppercase TODO EN MAYÚSCULAS
• lowercase todo en minúsculas
• capitalize Primera De Cada Palabra
• none como está escrito

Con uppercase, añade siempre algo de letter-spacing: las mayúsculas juntas se leen fatal.

Separación entre letras y entre palabras.

• -0.02em apretado — titulares grandes
• normal
• 0.08em suelto — etiquetas en mayúsculas
• 0.3em muy suelto — decorativo

En em, no en píxeles: así se mantiene proporcional si cambias el tamaño.

El subrayado. Los enlaces vienen subrayados de fábrica.

• none quitarlo
• underline ponerlo
• line-through tachado

nav a { text-decoration: none; }
p a   { text-underline-offset: 4px; }  separarlo un poco

Si quitas el subrayado, deja otra pista de que es un enlace —color, negrita, un :hover claro—, o nadie sabrá que se puede clicar.

Partir un texto largo en columnas, como un periódico.

.texto-largo {
  columns: 2;
  column-gap: 40px;
}

En móvil vuelve a una sola columna con columns: 1 dentro de la media query, o quedará ilegible.

Qué hacer con los espacios y saltos de línea que escribiste.

• normal los junta todos
• pre-wrap respeta tus saltos
• nowrap nunca salta de línea

pre-wrap es lo que quieres para un poema: escribes los versos tal cual en el HTML y salen tal cual.

color es la letra. background-color es el fondo. Se confunden todo el rato.

body {
  color: #12233a;             la letra
  background-color: #fbfaf7;  el fondo
}

Se heredan: si lo pones en body, todo lo de dentro lo coge, salvo que se lo cambies.

• red, black, ivory nombres
• #12233a hexadecimal
• #123 abreviado
• rgb(18 35 58)
• rgb(18 35 58 / 40%) con transparencia
• hsl(210 53% 15%)
• transparent

hsl es el útil para trastear: tono (0–360), saturación y luminosidad. Bajas el último número y tienes el mismo color más oscuro, sin buscar otro hex. Copia hex de coolors.co o del cuentagotas del inspector.

Si el texto no se lee con el móvil al sol, no se lee. Gris claro sobre blanco es la manera más común de hacer una web bonita e ilegible.

Compruébalo en webaim.org/resources/contrastchecker. Busca 4.5 o más para texto normal, 3 o más para titulares grandes.

Y negro puro sobre blanco puro cansa la vista: baja un poco los dos. Un blanco con algo de calidez (#fbfaf7) y un negro que en realidad sea azul muy oscuro (#12233a).

Transparencia de todo el elemento, contenido incluido. De 0 (invisible) a 1 (opaco).

.pie          { opacity: .55; }
.pie:hover    { opacity: 1; }

Si solo quieres el fondo traslúcido y la letra opaca, no uses opacity: usa rgb(0 0 0 / 40%) en el background-color.

Un fondo que no es un color plano.

background-image: linear-gradient(#f2e94e, #fbfaf7);
background-image: linear-gradient(90deg, black, transparent);
background-image: url("img/textura.jpg");

Con una imagen, casi siempre querrás también:
background-size: cover; background-position: center; background-repeat: no-repeat;

Mezclar un elemento con lo que tiene detrás, como las capas de Photoshop. Con imágenes da resultados muy buenos y cuesta una línea.

• multiply oscurece, tiñe
• screen aclara
• difference invierte
• overlay, luminosity, hue

.foto {
  background-color: #f2e94e;
}
.foto img {
  mix-blend-mode: multiply;   la foto se tiñe de amarillo
  filter: grayscale(1);         en blanco y negro primero
}

Míralo funcionando en el muestrario.

Que tu web siga el modo claro u oscuro del ordenador de quien la visita.

:root { --papel: #fbfaf7; --tinta: #12233a; }

@media (prefers-color-scheme: dark) {
  :root { --papel: #12131a; --tinta: #e8e8e8; }
}

body { background: var(--papel); color: var(--tinta); }

Necesita variables. Es la razón principal para usarlas.

Relleno por dentro: separa el contenido de su propio borde. Si la caja tiene fondo, el padding también lo tiene.

padding: 24px;              los cuatro lados
padding: 16px 24px;         arriba/abajo · izquierda/derecha
padding: 16px 24px 40px;    arriba · lados · abajo
padding: 8px 16px 24px 32px; arriba · derecha · abajo · izquierda
padding-top: 40px;           un lado suelto

El orden de los cuatro valores es en el sentido de las agujas del reloj desde arriba.

Aire por fuera: separa la caja de sus vecinas. Se escribe igual que el padding.

margin: 0 0 32px 0;   solo separación por debajo
margin: 0 auto;       CENTRA la caja (si tiene max-width)
margin-top: -20px;    negativo: la sube, se solapa

auto significa «reparte el espacio sobrante a los dos lados por igual». Por eso centra.

Dos márgenes verticales que se tocan no se suman: se queda el mayor. Es normal, no es un fallo.

Una línea alrededor. Tres datos: grosor, tipo y color.

border: 1px solid #ccc;          los cuatro lados
border-bottom: 1px solid #ccc;   solo debajo — el más útil
border-left: 3px solid black;   una banda lateral
border: none;                    quitarlo

• solid continua
• dashed a rayas
• dotted de puntos
• double doble

border-bottom fino entre proyectos es la forma más barata de que una web se vea ordenada.

Ponlo siempre, en la primera línea de tu CSS. Sin esto, una caja de 300px con 20px de padding mide 340 y todo se descuadra.

* { box-sizing: border-box; }

Con esto, 300px son 300px, padding y borde incluidos. Es la línea que más disgustos ahorra.

Ancho y alto. Usa max-width, no width: pone un tope pero deja que encoja en el móvil.

main {
  max-width: 640px;
  margin: 0 auto;
}

• 500px estrecha, íntima
• 640px cómoda de leer
• 900px ancha, para imágenes
• 100% todo el hueco disponible
• min-height: 100vh al menos toda la pantalla

Sin tope, en una pantalla ancha las líneas se hacen larguísimas y al saltar de renglón te pierdes. Entre 60 y 80 caracteres por línea es lo cómodo.

Esta va en todas las webs, sin excepción.

img {
  max-width: 100%;   nunca más ancha que su hueco
  height: auto;      no se deforma
  display: block;    sin el hueco raro de debajo
}

Esquinas redondeadas.

• 4px apenas
• 16px se nota
• 50% círculo perfecto
• 999px forma de pastilla

Sombra. Cuatro datos: desplazamiento horizontal, vertical, difuminado y color.

box-shadow: 0 14px 34px rgb(0 0 0 / 12%);   levantada
box-shadow: 6px 6px 0 black;                dura, gráfica
box-shadow: inset 3px 0 0 #f2e94e;          banda por dentro

Sombras muy difuminadas y muy transparentes quedan naturales. Las duras y sin difuminar quedan de cartel.

Qué hacer cuando el contenido no cabe.

• visible se sale (por defecto)
• hidden se recorta
• auto aparece barra de scroll si hace falta
• scroll barra siempre

overflow-x: auto en una tabla ancha evita que la página entera se desplace de lado en el móvil.

Cómo se comporta la caja.

• block ocupa toda la línea
• inline va dentro del texto
• inline-block en línea, pero con medidas
• flex pone a sus hijos en fila
• grid rejilla
• none desaparece del todo

display: none es útil para esconder el menú de escritorio en el móvil.

Lo pones en el padre y sus hijos se colocan en fila. Es lo que usarás para el menú.

nav {
  display: flex;
  gap: 20px;              separación entre ellos
  flex-wrap: wrap;         que salten si no caben
  justify-content: center; alineación horizontal
  align-items: center;     alineación vertical
}

• justify-content: flex-start
• center
• flex-end
• space-between pegados a los extremos
• space-around
• flex-direction: column en vertical

space-between es lo que quieres para «nombre a la izquierda, menú a la derecha».

Una rejilla que se adapta sola al ancho de la pantalla, sin media queries.

.proyectos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

Se lee: «tantas columnas como quepan, cada una de 240px como mínimo y repartiendo el sobrante». Cambia el 240 y mira qué pasa estrechando la ventana.

Para columnas fijas: grid-template-columns: 1fr 2fr; — la segunda el doble de ancha.

Que todas las fotos de una galería midan lo mismo aunque sean de proporciones distintas. Resuelve el problema más molesto de una rejilla de obra.

.proyectos img {
  aspect-ratio: 4 / 3;     todas con la misma forma
  object-fit: cover;       recorta lo que sobre
  object-position: center;  por dónde recorta
  width: 100%;
}

• cover llena y recorta
• contain cabe entera, deja aire
• 1 / 1 cuadrado
• 3 / 4 vertical

Sacar un elemento del flujo normal.

• static lo normal
• relative se mueve un poco, guarda su hueco
• absolute se coloca respecto al padre relative
• fixed se queda quieto en la pantalla
• sticky normal hasta que llega arriba, y ahí se pega

header {
  position: sticky;
  top: 0;
  background: white;   o se transparenta al pasar por debajo
  z-index: 10;          por encima de lo demás
}

sticky es el más agradecido: menú que acompaña, o título de sección que se queda mientras lees.

Que el scroll se detenga con imán en cada sección, como una exposición de salas. Es lo que hace que esta misma presentación funcione.

html {
  scroll-snap-type: y mandatory;
}
section {
  scroll-snap-align: start;
  min-height: 100vh;
}

Para hacerlo en horizontal: x mandatory y display: flex en el contenedor. Míralo en expo horizontal y expo vertical.

Cuidado: no lo combines con scroll-behavior: smooth; en Chrome se cancelan entre sí.

Reglas que solo se aplican en pantallas pequeñas. Va al final del archivo, porque pisa lo de arriba.

@media (max-width: 600px) {
  body { font-size: 17px; padding: 16px; }
  h1   { font-size: 28px; }
  nav  { flex-direction: column; gap: 8px; }
  .proyectos { grid-template-columns: 1fr; }
}

Compruébalo estrechando la ventana del navegador con el ratón. Es más directo que el modo dispositivo del inspector.

Cortes habituales: 600px móvil, 900px tableta. Con uno solo tienes de sobra.

• px fijo, exacto
• % del ancho del padre
• em del tamaño de letra del elemento
• rem del tamaño base del navegador
• vw por cien del ancho de la ventana
• vh por cien del alto
• svh alto real en el móvil

En el móvil, 100vh se cuela por debajo de la barra del navegador. Usa 100svh si quieres exactamente una pantalla.

Sin esta línea en el <head>, el móvil finge ser un ordenador y enseña tu web diminuta. Ninguna media query funciona sin ella.

<meta name="viewport" content="width=device-width, initial-scale=1">

Cuando el ratón está encima, y cuando se llega con el teclado.

a:hover { background: #f2e94e; }
a:focus-visible { outline: 2px solid black; outline-offset: 3px; }

En el móvil no hay hover. No escondas nada importante detrás de él. Y no quites nunca el outline del focus sin poner otra cosa: es cómo se navega sin ratón.

Que un cambio ocurra poco a poco en vez de de golpe. Se pone en el estado normal, no en el :hover.

a {
  color: black;
  transition: color .2s ease;
}
a:hover { color: red; }

transition: all .3s ease;   todo lo que cambie

Entre .15s y .3s. Más lento se siente pesado.

Mover, girar o escalar sin descolocar lo que hay alrededor.

transform: scale(1.05);          un 5% más grande
transform: rotate(-2deg);        girado
transform: translateY(-6px);    subido
transform: rotate(-2deg) scale(1.05);  los dos

Con transition y :hover, una foto que crece un poco al pasar por encima son tres líneas.

Efectos de imagen, como los de un editor de fotos, en directo.

• grayscale(1) blanco y negro
• blur(4px) desenfoque
• invert(1) negativo
• sepia(.6)
• contrast(1.4)
• brightness(.8)
• saturate(2)

.galeria img       { filter: grayscale(1); transition: filter .3s; }
.galeria img:hover { filter: grayscale(0); }

Se pueden encadenar: filter: grayscale(1) contrast(1.2);

Movimiento que ocurre solo, sin que nadie toque nada.

@keyframes latir {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.sello {
  animation: latir 1.4s ease-in-out infinite alternate;
}

Míralo en cartel vivo. Y respeta a quien pida menos movimiento:

@media (prefers-reduced-motion: reduce) {
  * { animation: none; transition: none; }
}

Qué forma tiene el ratón encima de algo.

• pointer la manita
• crosshair la cruz
• grab mano abierta
• zoom-in lupa
• none invisible

El punto de partida de cualquier página nueva de tu web.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Rita Mestre — Textos</title>
  <link rel="stylesheet" href="estilo.css">
</head>
<body>

  <header>
    <h1>Rita Mestre</h1>
    <nav>
      <a href="index.html">Inicio</a>
      <a href="proyectos.html">Proyectos</a>
      <a href="cv.html">CV</a>
    </nav>
  </header>

  <main>
    <h2>Textos</h2>
    <p>Aquí va el contenido de esta página.</p>
  </main>

  <footer>
    <p><a href="mailto:rita@ejemplo.com">rita@ejemplo.com</a></p>
  </footer>

</body>
</html>

Recuerda: si añades esta página, el enlace nuevo va en el menú de todas las demás.

Todo lo esencial, comentado y en el orden correcto. Cambia los valores marcados y ya tienes web.

/* ── la línea que ahorra disgustos ── */
* { box-sizing: border-box; }

/* ── 1 · la base ── */
body {
  margin: 0;
  padding: 40px 24px;
  background-color: #fbfaf7;      ← tu fondo
  color: #12233a;                 ← tu tinta
  font-family: Georgia, serif;     ← tu tipografía
  font-size: 18px;
  line-height: 1.6;
}

/* ── 2 · la columna ── */
header, main, footer {
  max-width: 640px;               ← prueba 500, 640, 900
  margin: 0 auto;
}

/* ── 3 · los titulares ── */
h1 { font-size: 42px; line-height: 1.15; margin: 0 0 8px; }
h2 { font-size: 28px; margin: 48px 0 12px; }
h3 { font-size: 20px; margin: 0 0 4px; }

/* ── 4 · el menú ── */
nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
nav a {
  color: inherit;
  text-decoration: none;
  transition: background .2s ease;
}
nav a:hover { background: #f2e94e; }   ← tu acento

/* ── 5 · los bloques y las imágenes ── */
article {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid #ddd;
}
article:last-child { border-bottom: none; }

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px 0;
}

footer {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid #ddd;
  font-size: 15px;
}

/* ── 6 · el móvil · SIEMPRE AL FINAL ── */
@media (max-width: 600px) {
  body { font-size: 17px; padding: 24px 16px; }
  h1   { font-size: 30px; }
  h2   { font-size: 22px; }
}

Copia el bloque entero para cada proyecto y cambia el texto y la imagen. Así de aburrido, así de fiable.

<article>
  <h3>Cámaras sordas</h3>
  <p class="ficha">2026 · Gres y grabaciones de campo · Barcelona</p>
  <img src="img/obra-1.jpg" alt="Cinco recipientes cerrados sobre una mesa">
  <p>Dos o tres líneas sobre el proyecto.</p>
</article>

.ficha {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .6;
}

Si tienes muchas páginas y en el móvil no caben, <details> lo resuelve sin una línea de código.

<details class="menu">
  <summary>Menú</summary>
  <nav>
    <a href="index.html">Inicio</a>
    <a href="proyectos.html">Proyectos</a>
  </nav>
</details>

<details> sirve para cualquier cosa que se abra y se cierre: textos largos, notas al pie, fichas técnicas.

Estás publicando obra tuya en abierto. Si no dices nada, quien llegue no sabe si puede usarla — y tú tampoco tienes dónde señalar si alguien la usa mal. Una línea en el <footer> lo resuelve.

<footer>
  <p>© 2026 Rita Mestre</p>
  <p>Textos bajo <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.es">CC BY-NC-SA 4.0</a>.
     <br>Las imágenes de obra, todos los derechos reservados.</p>
  <p><a href="mailto:hola@ritamestre.com">hola@ritamestre.com</a></p>
</footer>

Las cuatro letras: BY hay que citarte · NC no para uso comercial · SA quien lo reutilice comparte igual · ND no se puede modificar. Las combinas como quieras. Puedes poner licencias distintas a los textos y a las imágenes, que es lo que suele querer una artista.

Para elegirla con preguntas y que te dé el código: creativecommons.org/chooser — está solo en inglés. Sin poner nada, se entiende «todos los derechos reservados», que también es una opción legítima: lo que no vale es no haberlo pensado.

1. ¿Has guardado el archivo? En VS Code, un punto en la pestaña significa sin guardar.
2. ¿Has recargado? Recarga forzada: Cmd+Shift+R (Mac) o Ctrl+F5 (Windows).
3. ¿Está el <link rel="stylesheet"> en esta página? Se olvida al crear una nueva.
4. ¿Falta un punto y coma o una llave? Esa línea y a veces la siguiente dejan de funcionar sin avisar.
5. ¿El selector apunta de verdad a ese elemento? Botón derecho → Inspeccionar sobre el elemento y mira qué reglas le llegan.

Casi siempre es el nombre. El archivo y el src tienen que coincidir exactamente.

• .JPG no es .jpg
• Obra 1.jpg no es obra-1.jpg
• ¿está dentro de img/?
• ¿lo subiste al publicar?

En tu Mac funciona igual con mayúsculas o sin ellas; en el servidor no. Por eso se ve en local y no publicada.

Entra en tu repositorio: ¿ves index.html nada más abrirlo?

Si lo que ves es una carpeta, subiste la carpeta contenedora en vez de su contenido. Bórralo y vuelve a subir solo lo de dentro.

Y comprueba que la portada se llama exactamente index.html: ni Index.html ni index.HTML.

Botón derecho → Inspeccionar. Es tu mejor herramienta y es gratis.

• Elements el HTML tal como lo ve el navegador
• Styles qué reglas le llegan y cuáles están tachadas
• Console los errores, escritos
• Network qué archivos no cargaron

En Styles puedes cambiar valores y ver el resultado al instante, sin tocar tu archivo. Cuando des con el bueno, lo copias a tu CSS. Es la forma más rápida de trastear.

1. Cmd+Z tantas veces como haga falta. Funciona más de lo que parece.
2. Vuelve a la última copia de la carpeta que iba bien.
3. En GitHub, pestaña History del archivo: están todas las versiones anteriores.

La costumbre: antes de un cambio grande, duplica la carpeta entera y ponle la fecha al nombre. Es la manera más simple que existe de poder volver atrás.

• pega solo el trozo que falla
• pide que te expliquen el cambio
• no aceptes una reescritura entera

Si le das la web completa te la devuelve reescrita de arriba abajo. Funcionará, pero ya no sabrás dónde tocar, y eso es justo lo que has venido a aprender.