Surface
Background
Fondo principal de la interfaz
Light value
oklch(1 0 0)
Punto de partida
Problema
Leer documentación o seguir tutoriales no siempre permite comprobar si se comprende un concepto ni practicarlo de inmediato. La explicación, las preguntas y los ejercicios de código suelen quedar en lugares distintos.
Vue Training explora cómo reunir esos momentos en una misma experiencia: leer sobre un tema, responder preguntas con explicaciones y aplicarlo en un desafío. El recorrido organiza las actividades, pero no obliga a completarlas en un orden determinado.
Para quién
User Persona 1
Biografía
Carla es una diseñadora digital con experiencia en herramientas visuales, pero recientemente ha sentido la necesidad de aprender desarrollo frontend para colaborar mejor con ingenieros y poder prototipar sus propias ideas.
Ha intentado cursos en video, pero siente que hay un salto muy grande entre "ver a alguien codear" y hacerlo ella misma. Busca una forma de practicar conceptos técnicos de Vue de manera aislada y segura antes de aplicarlos en proyectos grandes.
“Entiendo cómo debe verse la interfaz, pero me frustra no saber cómo darle vida con código sin sentir que voy a romper algo”
Metas
- Practicar Vue por tema y dificultad.
- Reconocer conceptos antes de llevarlos a código.
- Resolver ejercicios pequeños que simulen decisiones reales de interfaz.
- Encontrar tips rápidos con fuente hacia documentación.
Frustaciones
- Los tutoriales dan una sensación de avance, pero no siempre miden comprensión.
- La práctica suele estar dispersa entre videos, documentación y ejercicios sueltos.
- Es fácil olvidar buenas prácticas cuando no aparecen dentro del flujo de aprendizaje.
Marcas conocidas
Para quién
User Persona 2
Biografía
Lucas lleva años trabajando en el servidor. Es un experto en lógica, bases de datos y seguridad. Sin embargo, en sus proyectos personales o en su startup, siempre depende de alguien más para la interfaz.
Ha decidido aprender Vue 3 porque escuchó que la Composition API es más lógica y cercana a la programación funcional que ya conoce. No tiene tiempo para tutoriales de 10 horas; necesita "romper" cosas y ver el código en acción.
“No necesito que me enseñen a programar, necesito entender la sintaxis de Vue y cómo maneja el estado para poder montar el front de mis APIs rápido.”
Metas
- Aprender lo justo y necesario para ser productivo en 48 horas.
- Entender profundamente la diferencia entre ref() y reactive() para evitar errores de memoria.
- Traducir su lógica de Back-end a patrones de Front-end (como el manejo de estado con Pinia).
Frustaciones
- Le molestan las plataformas que pierden tiempo con animaciones largas o explicaciones básicas.
- Se frustra cuando una respuesta correcta no explica qué pasa por debajo del framework.
- Odia tener que configurar un entorno local solo para probar un pequeño concepto de código.
Marcas conocidas
Decisión central
Solución
El learning path agrupa los temas de Vue en secciones que relacionan una lección, un quiz y un challenge. Así, una persona puede pasar de la explicación a una comprobación de comprensión y luego a un ejercicio de código sin perder el contexto del tema.
Quizzes y challenges también conservan sus galerías para practicar de forma independiente. Los tips son un recurso breve y complementario; no forman parte del progreso del recorrido.
Proceso
Cómo lo abordé
- 01
Conectar teoría y práctica
Relacionar cada lección con un quiz y un challenge sobre el mismo tema.
- 02
Dar contexto a las respuestas
Mostrar una explicación después de verificar cada pregunta, además de la revisión al finalizar el quiz.
- 03
Integrar el entorno de código
Reunir instrucciones, archivos, vista previa y tests dentro de la aplicación para resolver los challenges.
- 04
Permitir distintas formas de explorar
Mantener el recorrido abierto y ofrecer acceso independiente a quizzes, challenges y tips.
Funciones
Ruta de aprendizaje
La ruta de aprendizaje organiza los temas de Vue y relaciona, en cada uno, una lección, un quiz y un desafío. Señala las actividades completadas y guarda ese progreso localmente en el navegador. No exige seguir un orden ni crear una cuenta.
Funciones
Feedback en los quizzes
Después de verificar una respuesta, el quiz muestra si fue correcta, cuál era la alternativa esperada y por qué. Cuando corresponde, añade ejemplos de código. Al terminar, presenta el resultado y permite revisar las preguntas.
Funciones
Challenges integrados
Los challenges permiten consultar instrucciones y la lección relacionada mientras se trabaja con los archivos del ejercicio. El editor, la vista previa y los tests comparten el mismo espacio, de modo que se puede modificar código y comprobar el resultado sin abrir una herramienta externa. La ejecución de tests depende de que el navegador admita el entorno necesario; si no, la aplicación ofrece un modo alternativo.
Sistema visual
Tipografía
Aa
Font family
Poppins
Poppins fue elegida como tipografía principal por su apariencia limpia, moderna y accesible. Su estructura geométrica permite construir una interfaz clara, especialmente en tarjetas, filtros, navegación y contenidos de lectura breve.
La escala prioriza el escaneo rápido: títulos con buen peso visual, textos descriptivos cómodos y etiquetas funcionales para acompañar la navegación del usuario.
Display
Poppins Bold · 40/48
Aprende a tu ritmo
Heading
Poppins SemiBold · 24/32
Cursos recomendados
Body
Poppins Regular · 16/24
Contenido claro para explorar módulos, niveles y actividades.
Caption
Poppins Medium · 12/16
Nivel intermedio · 8 lecciones
Sistema visual
Paleta cromática
La paleta se organiza con tokens semánticos basados en shadcn-vue. Cada color tiene una función dentro de la interfaz: superficies, texto, acciones, estados, estructura e interacción.
El sistema contempla modo claro y modo oscuro desde los mismos roles visuales, manteniendo consistencia entre componentes, tarjetas, formularios y estados de navegación.
Light mode
Text
Foreground
Texto principal
Light value
oklch(0.1511 0.0178 224.4773)
Surface
Card
Tarjetas y contenedores
Light value
oklch(0.9751 0.0055 183.0314)
Surface
Popover
Menús flotantes y elementos superpuestos
Light value
oklch(0.9807 0.0084 225.0796)
Action
Primary
Acciones principales y elementos de marca
Light value
oklch(0.815 0.1706 151.2684)
Action
Secondary
Acciones secundarias
Light value
oklch(0.0577 0.0313 296.8468)
Neutral
Muted
Fondos suaves y contenido secundario
Light value
oklch(0.9396 0.0202 229.0448)
Accent
Accent
Estados activos, hover y destacados suaves
Light value
oklch(0.9192 0.0162 187.3124)
Feedback
Destructive
Errores y acciones destructivas
Light value
oklch(0.5502 0.22 25.0385)
Structure
Border
Bordes y divisores
Light value
oklch(0.9477 0.0085 225.084)
Structure
Input
Campos de formulario
Light value
oklch(0.8794 0.0196 230.727)
Interaction
Ring
Focus visible e interacción
Light value
oklch(0.6126 0.1866 252.6519)
Dark mode
Surface
Background
Fondo principal de la interfaz
Dark value
oklch(0.2077 0.0398 265.7549)
Text
Foreground
Texto principal
Dark value
oklch(0.9205 0.0086 225.0879)
Surface
Card
Tarjetas y contenedores
Dark value
oklch(0.2513 0.0395 268.7473)
Surface
Popover
Menús flotantes y elementos superpuestos
Dark value
oklch(0.1802 0.0325 266.6248)
Action
Primary
Acciones principales y elementos de marca
Dark value
oklch(0.815 0.1706 151.2684)
Action
Secondary
Acciones secundarias
Dark value
oklch(0.9067 0 0)
Neutral
Muted
Fondos suaves y contenido secundario
Dark value
oklch(0.1394 0.0106 220.3811)
Accent
Accent
Estados activos, hover y destacados suaves
Dark value
oklch(0.2552 0.0415 267.5355)
Feedback
Destructive
Errores y acciones destructivas
Dark value
oklch(0.5679 0.2323 28.2503)
Structure
Border
Bordes y divisores
Dark value
oklch(0.2824 0.0229 224.7083)
Structure
Input
Campos de formulario
Dark value
oklch(0.3338 0.0293 220.7787)
Interaction
Ring
Focus visible e interacción
Dark value
oklch(0.6126 0.1866 252.6519)
Interfaz
Pantallas
Landing
La página de entrada presenta Vue Training e invita a comenzar a practicar.
Inicio
El inicio reúne accesos a la ruta de aprendizaje, cuestionarios, desafíos y tips destacados.
Inicio de cuestionario
Vista para comenzar un cuestionario
Pantalla de carga
Vista que se muestra mientras se cargan los datos del cuestionario.
Cuestionario en progreso
Vista de un cuestionario en progreso
Explicación de respuesta correcta
Modal que ofrece una explicación detallada de la respuesta correcta después de responder una pregunta.
Resultados del cuestionario
Vista que muestra los resultados después de completar un cuestionario.
Desafío
El desafío integra instrucciones, archivos, editor, terminal y acceso a la vista previa y los tests.
Tips
Los tips se pueden elegir de la lista u obtener al azar; cada uno incluye una explicación, ejemplos y su fuente.
Reflexiones finales
Aprendizajes
Vue Training comenzó como una colección de actividades y evolucionó hacia un recorrido que relaciona explicación, comprobación y práctica. Ese cambio me hizo pensar menos en cada pantalla por separado y más en cómo una persona conserva el contexto al pasar de una actividad a otra.
Integrar los challenges también planteó un reto distinto: hacer convivir instrucciones, código, vista previa y resultados de tests sin que la interfaz se volviera difícil de seguir. El proyecto sigue en desarrollo, especialmente en la revisión y ampliación de su contenido.