El checklist de calidad y cómo autoevaluarte

Lo que separa a un profesional no es que su primer intento sea perfecto: es que REVISA con método antes de dar algo por bueno. Este es el checklist de calidad que resume el curso entero —lo que un buen desarrollador verifica en CUALQUIER entrega, suya o ajena— y la mentalidad para autoevaluarte con honestidad. Guárdalo: lo usarás en cada proyecto de tu carrera.

La lista de pre-vuelo del piloto

El checklist, por categorías

Recorre cada categoría antes de dar por terminado un proyecto. Si un punto falla, no está listo.

Estructura y semántica (módulos 2, 18)

• ¿HTML semántico (header/nav/main/section/footer), no div para todo?
• ¿Jerarquía de encabezados en orden (un h1, sin saltar niveles)?
• ¿Botones son <button> y enlaces son <a> (no div con onclick)?

Responsive (módulo 8)

• ¿Usable y legible en 375px, sin scroll horizontal?
• ¿Mobile-first, con breakpoints y técnicas fluidas (clamp, container queries)?
• ¿Imágenes responsivas con srcset/sizes donde corresponde?

Accesibilidad (módulo 18)

• ¿Navegable ENTERO con teclado, con foco siempre visible (:focus-visible)?
• ¿Contraste AA (4.5:1 texto normal)?
• ¿Imágenes con alt, campos con <label>, enlaces con texto claro?
• ¿ARIA solo donde el HTML no alcanza (y bien puesto)?

Rendimiento (módulo 18)

• ¿Imágenes optimizadas (formato moderno, tamaño real, lazy bajo el pliegue)?
• ¿Fuentes con font-display: swap, woff2, pocos pesos?
• ¿Dimensiones en imágenes/huecos para evitar CLS? ¿Lighthouse decente?

Sistema visual (módulos 4, 17)

• ¿Colores/espacios/radios salen de TOKENS, sin valores a mano repetidos?
• ¿Contraste, jerarquía tipográfica y espaciado coherentes (sistema, no azar)?

Animación (módulos 10, 11, 16)

• ¿Se anima transform/opacity (60fps), no propiedades caras?
• ¿prefers-reduced-motion respetado en TODO lo que se mueve?
• ¿El movimiento sirve (comunica), con contención — no decora por decorar?

Código (módulos 14, 15)

• ¿TypeScript estricto sin errores, null manejado, sin any injustificado?
• ¿JS cambia estado/clases y el CSS pinta (sin lógica visual en JS)?
• ¿Sin console.log de sobra ni código muerto?

Autoevaluarte: pruebas, no sensaciones

Mini-reto

Aplica el checklist COMPLETO a uno de tus dos proyectos finales, punto por punto, y anota cada falla honestamente (habrá varias — es normal y sano). Luego arréglalas. Cuando termines, tendrás no solo un proyecto mejor, sino el hábito que más te va a distinguir: entregar cosas que SABES que están bien, no que esperas que lo estén.

Qué sigue

Con esto dominas el oficio del diseñador-desarrollador con HTML, CSS y TypeScript puros — los cimientos. El módulo final del curso abre las puertas a lo que sigue: los PUENTES a los frameworks. Verás cómo los MISMOS componentes que construiste aquí se transforman en React, Next, Astro, Angular y Tailwind — para que llegues a esos cursos reconociendo tu propio trabajo.