Proyecto final A: clona una landing real, pixel-perfect
Proyecto250 min150 XP
El examen del diseñador-desarrollador, primera parte: tomar una landing
real —una que admires, de Awwwards, Land-book o Godly— y reconstruirla
pixel-perfect con tus propias manos. HTML semántico, tokens, responsive,
animada, con TypeScript en las interacciones. Clonar lo bueno es la forma
más rápida de subir de nivel: te obliga a entender CADA decisión de un
profesional.
Estructura semántica: header/nav/main/section/footer, jerarquía
de encabezados correcta (módulos 2, 18).
Sistema de tokens: colores, espaciados, tipografía y radios como
tokens; nada de valores a mano (módulo 17).
Responsive real: mobile-first, usable en 375px, con los breakpoints y
técnicas fluidas del módulo 8.
Animación con criterio: entradas, hover y/o scroll (módulos 10, 11,
16), SIEMPRE con prefers-reduced-motion.
Interacción tipada: al menos un patrón interactivo (menú, modal,
tabs) en TypeScript estricto (módulos 14, 15).
Accesible y rápida: navegable por teclado, contraste AA, imágenes
optimizadas (módulo 18).
Reglas
Es un CLON de aprendizaje: reconstruyes la técnica, no robas la marca
(usa contenido/imágenes propias o placeholders; no publiques como tuya la
identidad ajena).
Nada de frameworks todavía: HTML, CSS y TypeScript puros — para demostrar
que dominas los cimientos antes de los atajos.
Trabaja con la referencia ABIERTA al lado y DevTools inspeccionando el
original: medir es parte del oficio.
240:00
Cuando estés listo, arranca el reloj.
El razonamiento — clonar como profesional es un MÉTODO, no talento:
Ver el sistema antes que los píxeles. Un principiante copia colores a
ojo; un profesional descubre las REGLAS: la escala de espaciado, la
paleta real (casi siempre 5-8 colores, no 40), la escala tipográfica.
Esos son tus tokens. Con el sistema claro, el resto es aplicarlo.
Esqueleto en gris, skin después. Separar ESTRUCTURA de APARIENCIA es
lo que hace el clon manejable: validas layout y responsive con cajas
grises (imposible distraerse con colores), y solo cuando el esqueleto es
sólido le pones los tokens encima. Es la separación contenido/presentación
del módulo 5, aplicada al proceso.
Lo funcional primero, lo animado y lo pulido al final, midiendo. La
página debe verse y funcionar completa SIN animaciones ni JS; esos son
capas encima (mejora progresiva). Y cada hito se MIDE: Lighthouse,
teclado, comparación 1:1. "Pixel-perfect" no es una sensación, es una
comparación.
Aquí un fragmento de referencia —un hero clonado con el método completo—
para que veas el destino (tokens, semántica, responsive, hover):
<header class="nav"><span class="marca">◆ Nova</span><nav class="menu"><a href="#">Producto</a><a href="#">Precios</a><a href="#" class="cta-nav">Entrar</a></nav></header><main><section class="hero"> <span class="hero__badge">v2.0 disponible</span> <h1 class="hero__titulo">Diseño que se siente inevitable</h1> <p class="hero__sub">Una plantilla de referencia construida con el método del proyecto: sistema de tokens, semántica y responsive real.</p> <div class="hero__acciones"> <button class="btn btn--primary">Empezar gratis</button> <button class="btn btn--ghost">Ver demo</button> </div></section></main>
Ese fragmento no es "la solución" —tu clon será distinto—: es la PRUEBA del
método. Fíjate en cómo cada valor sale de un token, la semántica es real, el
clamp() hace el título fluido, y el hover respeta reduced-motion.
Autoevaluación del proyecto completo: ¿lo comparaste al 100% con el
original? ¿pasa Lighthouse (a11y y perf)? ¿se usa entero con teclado? ¿todo
sale de tokens? ¿funciona sin las animaciones? Cinco síes: clonaste como un
profesional, y aprendiste más que con diez tutoriales.
Qué sigue
Clonaste lo ajeno para entenderlo. El segundo proyecto invierte el reto:
crear desde CERO. Tomarás una MARCA, extraerás su sistema visual y
construirás su sitio con animaciones GSAP — de una identidad a una página
viva. De copiar maestros a serlo.