Logo de JSCamp

Ejercicio: terminar de estilar la página de detalle

El problema: funciona pero no se ve profesional

Ahora mismo tu página de detalle funciona perfectamente a nivel técnico:

  • ✅ Hace fetch de los datos
  • ✅ Muestra el contenido
  • ✅ Renderiza el Markdown correctamente
  • ✅ Tiene estados de loading y error

Pero hay un problema: se ve un poco… básica.

El contenido de markdown se renderiza con los estilos por defecto del navegador, y eso hace que:

  • La tipografía parece aburrida
  • Las listas son genéricas
  • No hay jerarquía visual clara
  • Falta ese “cariño” que hace que un proyecto se vea profesional

Este es un punto muy típico en proyectos reales: “La funcionalidad ya está, pero el diseño aún no transmite el nivel de calidad que queremos.”

El concepto de “estilos de prosa”

Cuando renderizas contenido rico (markdown, texto largo, artículos), necesitas una capa de estilos específica para ese tipo de contenido.

A esto se le llama estilos de prosa (prose styles).

¿Por qué necesitamos esto?

Porque el contenido generado por markdown tiene:

  • Múltiples niveles de títulos (h1, h2, h3)
  • Párrafos largos
  • Listas con viñetas
  • Posibles enlaces
  • Código inline

Y todos estos elementos necesitan:

  • Jerarquía visual clara
  • Espaciado consistente
  • Tipografía legible
  • Ancho de línea adecuado

Añadiendo los estilos de prosa en index.css

Vamos a añadir un bloque de estilos al final de nuestro index.css para manejar todo el contenido de prosa.

El código base

Al final de tu index.css, añade:

/* Estilos de prosa para contenido de detalle */
.prose {
  max-width: 70ch;
  line-height: 1.7;
  font-size: 1rem;
  color: #111827;
}

.prose h1,
.prose h2,
.prose h3 {
  font-weight: 700;
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
  color: #111827;
}

.prose h2 {
  font-size: 1.5rem;
}

.prose h3 {
  font-size: 1.25rem;
}

.prose p {
  margin-bottom: 1rem;
}

.prose ul,
.prose ol {
  margin-left: 1.25rem;
  margin-bottom: 1rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose a {
  color: #0066cc;
  text-decoration: underline;
}

.prose a:hover {
  color: #0052a3;
}

.prose code {
  background: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  font-size: 0.875em;
  font-family: 'Courier New', monospace;
}

¿Por qué al final de index.css?

Lo ponemos al final para que estos estilos sobreescriban los estilos más genéricos que puedas tener en el archivo.

CSS funciona en cascada, por lo que el orden importa.

Aplicando los estilos en el componente

Ahora conecta estos estilos con tu componente de detalle.

En el contenedor donde renderizas el contenido markdown, añade la clase prose:

export function JobDetail() {
  const { id } = useParams()
  const [job, setJob] = useState(null)

  // ... lógica de fetch

  return (
    <div className={styles.container}>
      {/* Header, breadcrumb, etc. */}

      <article className="prose">
        {/* Aquí va el contenido en markdown ya procesado a HTML */}
        <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
      </article>
    </div>
  )
}

Puntos clave

  • La clase prose se aplica en el contenedor del contenido generado por markdown
  • De este modo, todo lo que salga del markdown (p, h2, h3, ul, etc.) hereda los estilos
  • No necesitas tocar el HTML generado: los estilos se aplican automáticamente

Pequeños detalles que marcan la diferencia

Ahora que tienes la base, es momento de afinar. Aquí hay una checklist de cosas que debes revisar:

1. Espaciado vertical

Comprueba que:

  • ✅ Hay suficiente espacio entre párrafos
  • ✅ Los títulos tienen más margen arriba que abajo
  • ✅ El contenido respira y no está apretado
.prose h2 {
  margin-top: 2rem; /* Más espacio arriba */
  margin-bottom: 0.75rem; /* Menos espacio abajo */
}

2. Ancho de línea

Las líneas demasiado largas son difíciles de leer.

.prose {
  max-width: 70ch; /* 70 caracteres es el estándar */
}

¿Por qué ch?

La unidad ch representa el ancho del carácter “0”. Es perfecta para medir longitud de línea porque se adapta al tamaño de fuente.

3. Listas con estilo

Si quieres listas con iconos en lugar de viñetas:

.prose ul.check {
  list-style: none;
  padding-left: 0;
}

.prose ul.check li {
  position: relative;
  padding-left: 1.5rem;
}

.prose ul.check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: bold;
}

Y en tu markdown o HTML generado, añade la clase check a las listas especiales:

<ul class="check">
  <li>Experiencia con React</li>
  <li>Conocimiento de TypeScript</li>
</ul>

4. Contraste y legibilidad

Asegúrate de que:

  • El color del texto tiene buen contraste con el fondo
  • El tamaño de fuente es cómodo de leer (1rem o 16px mínimo)
  • El line-height es generoso (1.6-1.8 para texto largo)
.prose {
  color: #111827; /* Casi negro, buen contraste */
  line-height: 1.7; /* Espaciado cómodo */
  font-size: 1rem; /* 16px, tamaño legible */
}

Comparando con el diseño de referencia

Ahora viene la parte importante: comparar tu implementación con el diseño original.

Método de comparación

  1. Abre dos ventanas lado a lado:

    • En una, el diseño de referencia (el que se ve en el vídeo)
    • En otra, tu aplicación

  2. Detecta diferencias:

    • ¿Los títulos tienen el mismo tamaño?
    • ¿Las listas tienen el mismo estilo de viñeta?
    • ¿El texto tiene el mismo espaciado?
    • ¿Los colores son iguales?

  3. Itera hasta que coincidan:

    • Ajusta un detalle
    • Recarga
    • Compara de nuevo
    • Repite

Diferencias típicas que encontrarás

  • Títulos más pequeños de lo que deberían: Ajusta font-size
  • Texto muy pegado al borde: Añade padding al contenedor
  • Listas con viñetas diferentes: Cambia list-style
  • Colores no exactos: Usa un color picker para copiar los colores exactos
  • Espaciado inconsistente: Revisa margin y padding

El ejercicio

Tu objetivo es que la página de detalle quede exactamente igual que la del diseño de referencia.

No “más o menos”. No “parecido”. Exactamente igual.

Requisitos

  1. Usar la clase .prose para estilizar el contenido de detalle

  2. Ajustar estos elementos:

    • Tipografía (tamaño y peso de títulos y párrafos)
    • Espaciados (márgenes y padding)
    • Listas (estilo de viñetas)
    • Ancho máximo del texto
    • Colores

  3. Comprobar la versión final comparándola pixel por pixel con el diseño de referencia

Checklist de QA

Antes de dar por terminado el ejercicio, verifica:

  • Los títulos H2 y H3 tienen el tamaño correcto
  • Los párrafos tienen suficiente espaciado entre ellos
  • Las listas se ven igual que en el diseño
  • El ancho de línea es cómodo de leer (no más de 70-80 caracteres)
  • Los colores coinciden con el diseño
  • El espaciado general respeta el del diseño original
  • Los enlaces se distinguen del texto normal
  • El hover de los enlaces funciona correctamente

Bonus tracks

Si terminas el ejercicio principal, aquí hay algunos retos adicionales:

Bonus 1: Hover mejorado en enlaces

Añade un efecto sutil al pasar el ratón sobre los enlaces:

.prose a {
  color: #0066cc;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.prose a:hover {
  color: #0052a3;
  text-decoration: none;
}

Bonus 2: Responsive typography

Adapta la tipografía para pantallas pequeñas:

@media (max-width: 640px) {
  .prose {
    font-size: 0.9375rem; /* 15px en móviles */
  }

  .prose h2 {
    font-size: 1.25rem;
  }

  .prose h3 {
    font-size: 1.125rem;
  }
}

Bonus 3: Dark mode

Si tu app tiene modo oscuro, añade estilos para la prosa:

@media (prefers-color-scheme: dark) {
  .prose {
    color: #e5e7eb;
  }

  .prose h1,
  .prose h2,
  .prose h3 {
    color: #f9fafb;
  }

  .prose a {
    color: #60a5fa;
  }

  .prose a:hover {
    color: #93c5fd;
  }

  .prose code {
    background: #374151;
    color: #e5e7eb;
  }
}

Recursos útiles

Si quieres inspiración o referencias:

  • Tailwind Typography: El plugin oficial de Tailwind para prosa
  • Medium: Fíjate en cómo estilizan sus artículos
  • GitHub: Su markdown es un buen ejemplo de legibilidad

Resumen

En esta clase hemos aprendido:

  • Por qué necesitamos estilos de prosa: Para que el contenido rico se vea profesional
  • Cómo aplicar estilos globales: Usando una clase .prose en index.css
  • Qué elementos ajustar: Tipografía, espaciado, listas, colores
  • La importancia del detalle: Comparar pixel por pixel con el diseño original
  • Cómo iterar hasta conseguir el resultado perfecto: Método de dos ventanas

La diferencia entre un proyecto amateur y uno profesional está muchas veces en estos detalles aparentemente pequeños:

  • El espaciado perfecto
  • La tipografía cuidada
  • Los colores exactos
  • La atención al detalle

Ya teníamos la funcionalidad y el markdown. Ahora tenemos una página que se ve profesional.

Es momento de practicar: abre tu editor, compara con el diseño, y ajusta hasta que quede perfecto. No te conformes con “casi”. Busca la excelencia en los detalles.