Un currículum sólido no es una lista infinita de temas, sino un recorrido intencional con metas claras, práctica guiada y evaluación objetiva. En cursos de diseño web, esto se traduce en módulos conectados entre sí y proyectos incrementales que terminan en un portafolio convincente. A continuación, verás cómo se ve un plan moderno y qué resultados debería producir.
Fundamentos de la web. Contexto primero: cómo viaja una petición HTTP, qué hacen DNS y CDN, cómo renderiza el navegador (árbol DOM, árbol CSSOM, layout y pintura), y qué implica la caja de CSS. Esta base evita decisiones costosas más adelante. Entregable: mapa mental de la plataforma y una página mínima con estructura semántica correcta.
HTML semántico. Más que “etiquetas”, HTML define significado. Se trabaja con headings jerarquizados, regiones de página (header, nav, main, aside, footer), listas, tablas con encabezados y formularios accesibles con labels, fieldset y mensajes de error. Se cubre metadata para SEO y redes sociales (Open Graph, Twitter) y se practica el uso de alt y descripciones. Entregable: una página informativa con navegación y formulario realista, validado y probado con teclado.
CSS moderno. El énfasis está en comprender el flujo, el modelo de caja, posicionamiento, Flexbox y Grid para layouts complejos. Se introducen variables CSS, tipografía fluida con clamp y container queries para diseños contextuales. Se exploran estrategias de arquitectura (BEM, utilidades, escalas/tokens) y componentes reutilizables. Entregable: una landing responsive con sistema de espaciado, colores y tipografía claramente definidos.
Accesibilidad desde el inicio. Principios WCAG, contraste, foco visible, orden lógico de tabulación, roles ARIA cuando son necesarios (y cuándo no), patrones accesibles de modales, tabs y acordeones. Se practican pruebas con teclado, lectores de pantalla y herramientas como Axe. Entregable: la landing convertida a AA, con documentación de hallazgos y mejoras.
JavaScript esencial y progressive enhancement. DOM, eventos, estados simples, fetch y manejo de errores. Se prioriza la resiliencia: la página debe ser usable sin JS, y mejorar con él. Se construyen componentes con buena gestión del foco y ARIA. Entregable: interacción accesible en la landing (por ejemplo, menú móvil y modal), tests manuales y checklist de accesibilidad.
UX aplicada. Investigación rápida (entrevistas ligeras o encuesta), definición de tareas, wireframes de baja fidelidad, prototipos en Figma y creación de un pequeño sistema de diseño: paleta, tipografía, grid y componentes. Se enfatiza la comunicación visual y la alineación con objetivos del negocio. Entregable: prototipo validado con feedback de 3 personas y un pequeño documento de decisiones.
Performance y SEO técnico básico. Optimización de imágenes (formatos, tamaños, lazy loading), fuentes variables y subset, CSS crítico, presupuestos de rendimiento, y medición con Lighthouse. SEO on-page: títulos, descripciones, estructura semántica y datos estructurados básicos (JSON-LD). Entregable: informe con métricas antes/después y acciones prioritarias.
Proyecto integrador. Convertir un diseño de Figma a código de producción. El alumno crea tokens (colores, tipografías, espaciado), construye componentes (botones, tarjetas, navegación), resuelve estados y vacíos de contenido, y documenta decisiones. Entregable: demo pública, repo con README detallado y caso de estudio con capturas, métricas y aprendizajes.
Evaluación con rúbricas. Cada módulo tiene criterios observables: semántica, consistencia visual, accesibilidad, calidad de código (legibilidad, estructura, naming), usabilidad y rendimiento. Las rúbricas permiten feedback accionable y comparaciones justas. Idealmente, el curso ofrece dos rondas de revisión por proyecto.
Habilidades transversales. Comunicación escrita (casos de estudio y README), gestión del tiempo, versionado con Git, y trabajo en equipo (pull requests, revisión por pares). También se anima a compartir avances y pedir feedback: habilidades clave para entornos reales.
Resultado final. Un portafolio con 3–4 piezas sólidas, cada una con objetivos, proceso, decisiones, resultados (métricas) y un breve video demo. Más que mostrar “pantallas bonitas”, el alumno demuestra criterio, método y capacidad de medir impacto. Ese es el verdadero sello de un curso de diseño web moderno.