CodeForge

Maquetación Web Dinámica / CSS3 fundamentos: la piel

Reto de módulo: replica la tarjeta de precios

Reto45 min60 XP

El examen del módulo es el ejercicio que harás mil veces como profesional: te muestran un diseño terminado y lo reconstruyes, decidiendo tú cada propiedad. Nada nuevo que aprender hoy — todo lo que necesitas ya lo sabes. La habilidad que entrenas es VER: descomponer un diseño en cajas, espacios y colores.

Reto

Replica la tarjeta de precios exacta

Media40 min60 XP(×2 sin mirar la solución)

Qué debes construir

Esta tarjeta, tal cual — obsérvala con ojos de box model antes de escribir una línea:

Los datos que un diseñador te daría (el resto lo mides a ojo — parte del reto):

  1. Tarjeta: fondo blanco, 300px de ancho, esquinas de 16px, sobre fondo gris claro #F1F5F9 y centrada en la pantalla.
  2. Colores: violeta #6D28D9 (etiqueta y botón), textos en la gama slate (#0F172A el precio, #475569 la descripción, #64748B el "/mes").
  3. El "/mes" es más pequeño y gris, EN LA MISMA LÍNEA que el precio.
  4. La lista no tiene viñetas y cada beneficio lleva una línea divisoria sutil.
  5. El botón es un enlace a que ocupa TODO el ancho de la tarjeta.

Reglas

  • HTML semántico primero: estructura completa antes de abrir el CSS.
  • CSS externo, con el reset box-sizing: border-box del módulo.
  • Tipografía en rem; solo bordes y detalles en px.
  • Prohibido copiar el código de la vista previa con DevTools — el objetivo es que TU ojo decida los valores y luego compares.

40:00

Cuando estés listo, arranca el reloj.

Qué sigue

Tres módulos completos: estructura (HTML), conexión y fundamentos visuales (CSS). El módulo 4 te mete en la cabeza de un diseñador: tipografía y color con criterio profesional — la diferencia entre una página correcta y una que da gusto mirar.