Este plan de 12 semanas condensa lo imprescindible para avanzar con foco, equilibrio entre teoría y práctica, y resultados medibles. Adáptalo a tu disponibilidad, pero respeta la cadencia y la idea central: al final de cada semana debe existir un entregable público y una métrica que evidencie progreso. Piensa como un equipo de producto: define, construye, mide y aprende.
Semana 1 — Fundamentos web. Objetivo: entender la plataforma y estructurar documentos. Actividades: lectura guiada sobre HTTP, navegadores y caja de CSS; práctica con estructura semántica (header, nav, main, sections); creación de una página informativa con navegación y una tabla sencilla. Entregable: página valida (validator.w3.org) con estructura H1–H3 coherente. Métrica: 0 errores de validación y Lighthouse SEO ≥ 90.
Semana 2 — Formularios accesibles. Objetivo: recopilar datos de manera inclusiva. Actividades: labels, fieldset, legend, estados de error, ayudas e inputs tipo email/tel. Entregable: formulario de contacto o registro con validación amigable. Métrica: navegación completa por teclado y buena lectura con un lector de pantalla.
Semana 3 — CSS moderno I (layout). Objetivo: dominar el flujo, Flexbox y Grid. Actividades: ejercicios de tarjetas, cabeceras y galerías; diseño mobile-first. Entregable: landing con header, hero, grid de beneficios y footer. Métrica: CLS bajo y diseño fluido entre 320–1200 px.
Semana 4 — CSS moderno II (escalas y queries). Objetivo: consistencia visual y adaptación por contenedor. Actividades: variables CSS, escalas de espaciado, tipografía fluida con clamp y container queries. Entregable: refactor de la landing usando tokens y componentes. Métrica: reducción de líneas repetidas y mayor legibilidad del CSS en revisión por pares.
Semana 5 — Accesibilidad aplicada. Objetivo: cumplir AA en páginas clave. Actividades: foco visible, orden de tabulación, contraste, roles ARIA prudentes y patrones de componentes accesibles. Entregable: landing AA con informe de hallazgos. Métrica: Lighthouse Accessibility ≥ 95 y 0 errores críticos en Axe.
Semana 6 — JavaScript esencial I. Objetivo: manipular el DOM y eventos sin romper accesibilidad. Actividades: menú móvil, tabs o acordeón; control del foco y teclas especiales. Entregable: componente interactivo accesible integrado en la landing. Métrica: sin errores de consola y pruebas por teclado superadas.
Semana 7 — JavaScript esencial II (fetch y estados). Objetivo: cargar contenido y manejar errores. Actividades: pequeño listado de artículos cargados desde un JSON, indicadores de carga y vacíos. Entregable: sección “Últimos artículos” dinámica. Métrica: tiempo de interacción aceptable en 3G simulado y estados bien comunicados.
Semana 8 — UX aplicada. Objetivo: diseñar con intención. Actividades: wireframes para un mini blog, prototipo en Figma y test con 3 personas. Entregable: prototipo anotado y mejoras priorizadas. Métrica: feedback sintetizado en 5 hallazgos accionables.
Semana 9 — Blog multipágina I. Objetivo: arquitectura y semántica. Actividades: portada, listado, plantilla de artículo y metaetiquetas OG/Twitter. Entregable: blog navegable con 2 artículos. Métrica: estructura semántica correcta y tiempos de carga razonables.
Semana 10 — Blog multipágina II. Objetivo: formularios, componentes reutilizables y performance. Actividades: página de contacto, tarjeta de artículo, paginación simple, optimización de fuentes e imágenes. Entregable: blog con 3–4 artículos y contacto funcional (simulado). Métrica: Lighthouse Performance ≥ 90 en móvil.
Semana 11 — Figma a código. Objetivo: fidelidad y sistema de diseño. Actividades: elegir una página de Figma, crear tokens (colores, tipografías, espaciado), construir componentes y resolver estados. Entregable: página implementada con comparativa visual. Métrica: similitud alta y peso de página controlado.
Semana 12 — Portafolio y casos de estudio. Objetivo: comunicar valor. Actividades: seleccionar 3–4 proyectos, redactar casos con contexto, proceso, decisiones, métricas y lecciones; grabar un micro video demo; publicar. Entregable: portafolio público y README de cada repo. Métrica: feedback de al menos 2 mentores y una iteración posterior.
Hábitos que multiplican resultados. 1) Bloques de 90 min: teoría (25%), práctica (60%), notas (15%). 2) Entregables concretos y públicos cada semana. 3) Revisión por pares y mentoría cuando sea posible. 4) Diario de aprendizaje: qué hiciste, qué aprendiste, qué harás después. 5) Métricas simples y periódicas (Lighthouse, validadores, checklist de accesibilidad).
Checklist semanal. ¿Publicaste demo y repo? ¿Incluiste README con instrucciones y decisiones? ¿Mediste rendimiento y accesibilidad? ¿Pediste feedback y actuaste en consecuencia? ¿Anotaste aprendizajes y próximos pasos? Esta disciplina convierte horas de estudio en progreso visible.
Al terminar, tendrás no solo conocimiento, sino evidencia: piezas que muestran criterio, consistencia y capacidad de medir. Eso es lo que abre puertas. Los cursos de diseño web son el vehículo; la constancia y la práctica, el motor.