Apuntes DAM
Intermedio
Unas 20 horasProyecto 2 de 4

Landing page responsive para un producto

Maqueta la página de presentación de un producto tecnológico a partir de un diseño en Figma: cabecera con llamada a la acción, características, precios, testimonios, preguntas frecuentes y formulario. Debe ser fiel al diseño, rápida y accesible en cualquier dispositivo.

HTMLCSS Grid y FlexboxImágenes responsiveAnimaciones CSS
Maquetación con Flexbox, Grid y ResponsiveMultimedia y Animación en la WebAccesibilidad Web
Tu avance0/13 · 0 %

Objetivos de aprendizaje

  • •Traducir un diseño a código fiel y mantenible
  • •Maquetar con Grid y Flexbox y diseño fluido
  • •Optimizar imágenes y animaciones

Requisitos mínimos

Fases sugeridas

  1. 1

    Estructura

  2. 2

    Maquetación

  3. 3

    Multimedia

  4. 4

    Calidad

Qué entregar

  • Repositorio
  • Página publicada
  • Informe de Lighthouse

Para ir más allá

  • Modo oscuro
  • Animaciones de entrada con scroll-driven animations

Rúbrica de evaluación

CriterioPesoPara la máxima nota
Fidelidad25 %Prácticamente idéntica al diseño
Responsive25 %Fluida en todos los tamaños
Rendimiento y multimedia25 %Imágenes optimizadas y carga rápida
Accesibilidad25 %Sin errores y usable con teclado

Úsala para autoevaluarte antes de entregar. Tu profesorado puede usar otros criterios.

Consejos y errores típicos

  • Empieza por el móvil y añade columnas con min-width.