CodeForge

Maquetación Web Dinámica / Responsive Design profesional

Proyecto: landing responsive de 5 secciones, mobile-first

Proyecto130 min150 XP

El proyecto que integra los módulos 1 a 8: una landing page completa, construida COMO SE CONSTRUYE de verdad — desde 375px hacia arriba, sección por sección. Al terminar tendrás la pieza más completa de tu portafolio hasta ahora, y la certeza de que puedes maquetar un encargo real de principio a fin.

Reto

Landing completa de 5 secciones, mobile-first

Difícil120 min150 XP(×2 sin mirar la solución)

Qué debes construir

Una landing para un producto ficticio (elige uno con entusiasmo: una app, un café, un gimnasio — lo que te haga querer terminarla). Cinco secciones:

  1. Header + hero: header sticky con el menú correcto de la lección 7 (hamburguesa en móvil, horizontal desde 768px). Hero de min-height: 100svh con titular fluido (clamp), subtítulo, CTA principal y una imagen/mesh de fondo (módulo 4).
  2. Features: 3-6 tarjetas en grid con repeat(auto-fit, minmax(min(250px, 100%), 1fr)) — cada tarjeta con icono (emoji o SVG), título y descripción.
  3. Showcase / cómo funciona: sección de imagen + texto alternados (imagen izquierda-texto derecha, luego invertido). En móvil, todo apilado con la imagen arriba.
  4. Testimonios o precios: elige — testimonios como media objects (módulo 5) o la tarjeta de precios del módulo 3, ahora en trío con la del medio destacada.
  5. CTA final + footer: banda de cierre con degradado y botón, y un footer de 3-4 columnas que en móvil se apila.

Reglas (aquí se evalúa el módulo entero)

  • Mobile-first ESTRICTO: la base sin media queries debe ser la versión 375px completa y usable. Queries solo con min-width/>= (máximo 3 breakpoints del sistema: 768/1024/1440).
  • Sistema fluido: tipografía y espaciados de sección con las custom properties clamp() de la lección 5. Texto base 1rem fijo.
  • Imágenes con srcset+sizes (o al menos width/height + loading lazy en todo lo que esté bajo el pliegue; fetchpriority en la del hero).
  • El menú móvil: button + aria-expanded (NO checkbox hack).
  • HTML semántico completo, paleta 60-30-10 con variables, contraste AA.
  • Todo lo animado (si animas algo) con su prefers-reduced-motion.
  • Prueba final en 375, 768, 1024 y 1440 — y el test del pulgar: todo objetivo táctil ≥44px en móvil.

120:00

Cuando estés listo, arranca el reloj.

Qué sigue

Ocho módulos: sabes estructurar, vestir, organizar y adaptar. El módulo 9 te da el arsenal secreto del CSS — pseudo-clases y pseudo-elementos: desde :hover hasta :has() (el "selector de padre" que lo cambió todo), y el arte de dibujar con CSS puro.