Ingeniero FrontendIntermedio8 módulos~4.0 horas prácticas3 modos de aprendizaje
UI accesible y sistemas de diseño
Construí VenueFlow, un dashboard pulido para operaciones de conferencias, mientras aprendés sobre contratos de componentes reutilizables, sistemas de diseño responsivos, comportamiento de teclado y foco, formularios accesibles, diálogos, superficies de datos, temas y estados de UI resilientes.
// Lo que podrás hacer- Accesibilidad, sistemas de diseño y alcance honesto
- Generá la estructura inicial de VenueFlow y establecé puertas de calidad
- Creá un lenguaje visual consistente y primitivas tipadas
- Construí validaciones que funcionen visual y semánticamente
8 módulos, hechos para ejecutar
Cada módulo incluye código ejecutable. Expande cualquiera para ver su contenido.
00IntroducciónLa interfaz de producto accesible que vas a construir30 min
Preguntas que responde este módulo
- ¿Cómo podés observar el dashboard completo de VenueFlow que vas a construir?
- ¿Cómo podés elegir el camino de aprendizaje que se adapta a tus objetivos?
Empezar móduloVista previa gratis
01OrientaciónAccesibilidad, sistemas de diseño y alcance honesto30 min
Preguntas que responde este módulo
- ¿Cómo podés confirmar la base de React y TypeScript?
- ¿Cómo podés entender el alcance y los límites del workshop?
02Configuración del proyectoGenerá la estructura inicial de VenueFlow y establecé puertas de calidad30 min
Preguntas que responde este módulo
- ¿Cómo podés crear la toolchain Vite y TypeScript de VenueFlow?
- ¿Cómo podés construir un punto de entrada semántico en React?
03Tokens y contratos de componentesCreá un lenguaje visual consistente y primitivas tipadas30 min
Preguntas que responde este módulo
- ¿Cómo podés separar valores crudos de tokens de diseño semánticos?
- ¿Cómo podés probar nombres accesibles y comportamiento de carga con tests de componentes?
04Formularios y retroalimentación accesibleConstruí validaciones que funcionen visual y semánticamente30 min
Preguntas que responde este módulo
- ¿Cómo podés conectar etiquetas, descripciones y errores con IDs estables?
- ¿Cómo podés anunciar feedback importante sin robar el foco?
05Navegación, diálogos y focoDiseñá patrones de interacción seguros para teclado30 min
Preguntas que responde este módulo
- ¿Cómo podés explicar cómo los eventos del teclado se propagan a través de un control compuesto?
- ¿Cómo podés implementar comportamiento predecible para `Escape`, Tab y activación?
06Superficies de datos responsivasComponé el dashboard a través de pantallas y estados de UI30 min
Preguntas que responde este módulo
- ¿Cómo podés renderizar estados de carga, vacío, error y listo desde un único modelo explícito?
- ¿Cómo podés componer el formulario, el diálogo y el calendario de VenueFlow en un único panel responsivo?
07Mirá cómo funcionaAuditá, probá y demostrá la interfaz completa30 min
Preguntas que responde este módulo
- ¿Cómo podés ejercitar el recorrido crítico de VenueFlow con comprobaciones de teclado y responsive?
- ¿Cómo podés usar tests automatizados y gates de build como evidencia de accesibilidad?
¿Listo para construir tu primer agente? UI accesible y sistemas de diseño?
Empezá con el Módulo 0 gratis y desbloqueá la ruta completa con un plan Pro.