Hola. Te compartimos un calendario de 12 semanas que funciona en la práctica. Está pensado para personas que estudian diseño web mientras trabajan o estudian otra cosa. Dedica entre 6 y 8 horas semanales distribuidas en tres bloques de 90 minutos y una sesión de repaso. El objetivo: cerrar un ciclo con fundamentos sólidos, dos proyectos publicables y una rutina de mejora continua. Ajusta tiempos, pero respeta la secuencia: construir, revisar, refinar, publicar.
Semana 1: Preparación y objetivos. Define tu meta en una frase y elige el curso principal que te acompañará. Instala tus herramientas (Figma, VS Code, un servidor local básico). Crea una carpeta de proyecto y un sistema simple de notas. Entregable: una lista de habilidades a adquirir (semántica, responsive, tipografía, accesibilidad, prototipado) y un cronograma en tu calendario. Pide a alguien que lo revise contigo para reforzar el compromiso.
Semana 2: HTML semántico. Aprende estructura: encabezados en orden, secciones, listas, tablas mínimas, formularios con label. Escribe tu primera landing con contenido de texto real (no lorem ipsum). Usa ARIA solo si el elemento nativo no resuelve la necesidad. Entregable: página con estructura correcta y lectura clara por lectores de pantalla. Autoevalúa con una rúbrica simple: jerarquía, landmark roles, títulos únicos.
Semana 3: CSS moderno. Variables, tipografía fluida, sistema de espaciados, flexbox y grid. Trabaja Mobile First con dos puntos de quiebre. Practica con tarjetas, botones y navegación sticky. Entregable: aplica un sistema de tokens a tu landing. Mide contraste y legibilidad a 16px. Documenta decisiones en un README breve.
Semana 4: Accesibilidad esencial. Foco visible, orden de tabulación, etiquetas y estados. Prueba tu landing con solo teclado y con un lector de pantalla por 10 minutos. Agrega skip links y valida colores AA. Entregable: checklist de accesibilidad marcada y capturas de las correcciones.
Semana 5: Figma para flujos. Define estilos de texto y color, componentes con variantes y auto‑layout. Diseña wireframes de baja fidelidad para una segunda página (por ejemplo, una página de precios). Prototipa transiciones básicas y prueba con dos personas. Entregable: prototipo navegable con tres pantallas y comentarios incorporados.
Semana 6: Proyecto 1, iteración y publicación. Integra lo aprendido y cierra tu primera landing. Optimiza assets, mide rendimiento básico y publica en un servicio gratuito. Entregable: URL pública, repositorio y una nota de versión con cambios. Pide feedback a un mentor o comunidad; comprométete a una iteración ligera la semana siguiente.
Semana 7: Formularios y validación. Diseña y maqueta un formulario accesible (contacto o registro). Estados de error, éxito e instrucciones. Añade microinteracciones sutiles. Entregable: formulario funcional con HTML5 y estilos, mensajes de error claros y navegación por teclado impecable.
Semana 8: Sistemas de diseño mínimos. Extrae tokens (espacios, tamaños, radios), componentes (botones, inputs, tarjetas) y patrones (cabecera, footer). Documenta variantes y reglas de uso en una página “UI Kit”. Entregable: mini sistema consumido por tu landing y tu segunda página.
Semana 9: Proyecto 2 — Dashboard simple. Elige un caso: panel con tarjetas, filtros y tabla. Planifica el flujo, haz wireframes y pasa a UI en Figma. Entregable: prototipo navegable y especificaciones de espaciado y tipografía. Reserva una sesión de crítica con dos colegas y recoge acciones concretas.
Semana 10: Maquetación del dashboard. Grid, jerarquía visual y navegación lateral accesible. Prueba estados vacíos y carga. Entregable: versión desktop y mobile con al menos tres pantallas reales. Mide contraste y prueba con teclado. Documenta decisiones difíciles y sus porqués.
Semana 11: Calidad y narrativa. Recorre tus proyectos con la mirada de un reclutador: claridad, impacto, proceso. Escribe casos de estudio breves: contexto, problema, hipótesis, decisiones y resultado. Entregable: dos casos listos para portafolio con imágenes, gifs o videos cortos.
Semana 12: Publicación y próximos pasos. Prepara tu portafolio mínimo viable: portada, dos casos y contacto. Revisa ortografía, performance básico y accesibilidad. Entregable: portafolio público y una lista de mejoras para el trimestre siguiente. Comparte tu trabajo con tres personas con criterio y agenda una llamada de feedback.
Consejos de ritmo: bloquea el tiempo con alarmas, estudia en el mismo espacio y cierra cada sesión con una microtarea definida para la siguiente. Si te atrasas una semana, no intentes “ponerte al día” de golpe: elige lo esencial y vuelve al plan. Lo importante es sostener la práctica. Si quieres, respóndenos con tu meta y disponibilidad; te pasamos una versión editable del calendario y una rúbrica para que midas tu progreso cada dos semanas.