Starting point

Problem

Reading documentation or following tutorials does not always make it easy to check whether you understand a concept or to practice it immediately. Explanations, questions, and coding exercises are often scattered across different places.

Vue Training explores how to bring those moments into one experience: read about a topic, answer questions with explanations, and apply it in a challenge. The learning path organizes the activities without requiring people to complete them in a fixed order.

Audience

User Persona 1

Biography

Carla is a digital designer with experience in visual tools, but recently she has felt the need to learn frontend development so she can collaborate better with engineers and prototype her own ideas.

She has tried video courses, but feels there is a large gap between "watching someone code" and doing it herself. She is looking for a way to practice technical Vue concepts in an isolated and safe environment before applying them in larger projects.

I understand how the interface should look, but I get frustrated when I do not know how to bring it to life with code without feeling like I might break something.

Goals

  • Practice Vue by topic and difficulty.
  • Recognize concepts before taking them into code.
  • Solve small exercises that simulate real interface decisions.
  • Find quick tips linked to documentation sources.

Frustrations

  • Tutorials create a sense of progress, but they do not always measure understanding.
  • Practice is often scattered across videos, documentation, and isolated exercises.
  • It is easy to forget good practices when they do not appear within the learning flow.

Known Brands

Audience

User Persona 2

Biography

Lucas has spent years working on the server side. He is experienced in logic, databases, and security. However, in his personal projects or startup ideas, he often depends on someone else to build the interface.

He decided to learn Vue 3 because he heard that the Composition API feels more logical and closer to the functional programming style he already knows. He does not have time for 10-hour tutorials; he needs to break things and see the code in action.

I do not need someone to teach me how to program. I need to understand Vue syntax and how it handles state so I can build the frontend for my APIs quickly.

Goals

  • Learn just enough to become productive within 48 hours.
  • Understand the difference between ref() and reactive() deeply enough to avoid state-related mistakes.
  • Translate backend logic into frontend patterns, such as state management with Pinia.

Frustrations

  • He dislikes platforms that waste time with long animations or overly basic explanations.
  • He gets frustrated when a correct answer does not explain what is happening under the framework.
  • He hates having to configure a local environment just to test a small code concept.

Known Brands

Core decision

Solution

The learning path groups Vue topics into sections that connect a lesson, a quiz, and a challenge. This lets someone move from an explanation to a check of their understanding and then to a coding exercise without losing the context of the topic.

Quizzes and challenges also remain available in their own galleries for independent practice. Tips are a brief, complementary resource; they do not contribute to progress along the path.

Process

How I approached it

  1. 01

    Connect theory and practice

    Relate each lesson to a quiz and a challenge on the same topic.

  2. 02

    Put answers in context

    Show an explanation after each answer is checked, plus a review at the end of the quiz.

  3. 03

    Integrate the coding environment

    Bring instructions, files, a preview, and tests into the application for solving challenges.

  4. 04

    Offer different ways to explore

    Keep the learning path open and provide independent access to quizzes, challenges, and tips.

Features

Learning path

The learning path organizes Vue topics and connects a lesson, a quiz, and a challenge for each one. It marks completed activities and saves that progress locally in the browser. There is no required order or account.

Demostración de learning path
In the learning path, each topic includes a lesson, a quiz, and a challenge. Completed activities are visually marked.

Features

Quiz feedback

After an answer is checked, the quiz shows whether it was correct, which option was expected, and why. When relevant, it includes code examples. At the end, it shows the result and lets people review the questions.

Demostración de quiz feedback
Each answer opens an explanation before moving on; at the end, the quiz shows the results and a question review.

Features

Integrated challenges

Challenges let people consult instructions and the related lesson while working with the exercise files. The editor, preview, and tests share the same space, so they can change code and check the result without opening an external tool. Running tests depends on browser support for the required environment; otherwise, the application offers an alternative mode.

Demostración de integrated challenges
The challenge brings instructions, an editor, a preview, and test results together inside Vue Training.

Visual system

Typography

Aa

Font family

Poppins

Poppins was chosen as the main typeface because of its clean, modern, and accessible appearance. Its geometric structure helps build a clear interface, especially across cards, filters, navigation, and short reading content.

The scale prioritizes quick scanning: titles with strong visual weight, comfortable descriptive text, and functional labels that support user navigation.

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

Visual system

Color palette

The palette is organized with semantic tokens based on shadcn-vue. Each color has a role within the interface: surfaces, text, actions, states, structure, and interaction.

The system supports both light and dark mode through the same visual roles, keeping consistency across components, cards, forms, and navigation states.

Light mode

Surface

Background

Main interface background

Light value

oklch(1 0 0)

Text

Foreground

Main text

Light value

oklch(0.1511 0.0178 224.4773)

Surface

Card

Cards and containers

Light value

oklch(0.9751 0.0055 183.0314)

Surface

Popover

Floating menus and layered elements

Light value

oklch(0.9807 0.0084 225.0796)

Action

Primary

Primary actions and brand elements

Light value

oklch(0.815 0.1706 151.2684)

Action

Secondary

Secondary actions

Light value

oklch(0.0577 0.0313 296.8468)

Neutral

Muted

Soft backgrounds and secondary content

Light value

oklch(0.9396 0.0202 229.0448)

Accent

Accent

Active states, hover states, and soft highlights

Light value

oklch(0.9192 0.0162 187.3124)

Feedback

Destructive

Errors and destructive actions

Light value

oklch(0.5502 0.22 25.0385)

Structure

Border

Borders and dividers

Light value

oklch(0.9477 0.0085 225.084)

Structure

Input

Form fields

Light value

oklch(0.8794 0.0196 230.727)

Interaction

Ring

Visible focus and interaction

Light value

oklch(0.6126 0.1866 252.6519)


Dark mode

Surface

Background

Main interface background

Dark value

oklch(0.2077 0.0398 265.7549)

Text

Foreground

Main text

Dark value

oklch(0.9205 0.0086 225.0879)

Surface

Card

Cards and containers

Dark value

oklch(0.2513 0.0395 268.7473)

Surface

Popover

Floating menus and layered elements

Dark value

oklch(0.1802 0.0325 266.6248)

Action

Primary

Primary actions and brand elements

Dark value

oklch(0.815 0.1706 151.2684)

Action

Secondary

Secondary actions

Dark value

oklch(0.9067 0 0)

Neutral

Muted

Soft backgrounds and secondary content

Dark value

oklch(0.1394 0.0106 220.3811)

Accent

Accent

Active states, hover states, and soft highlights

Dark value

oklch(0.2552 0.0415 267.5355)

Feedback

Destructive

Errors and destructive actions

Dark value

oklch(0.5679 0.2323 28.2503)

Structure

Border

Borders and dividers

Dark value

oklch(0.2824 0.0229 224.7083)

Structure

Input

Form fields

Dark value

oklch(0.3338 0.0293 220.7787)

Interaction

Ring

Visible focus and interaction

Dark value

oklch(0.6126 0.1866 252.6519)

Interface

Screens

Landing page

The landing page introduces Vue Training and invites visitors to start practicing.

Home

The home page brings together the learning path, quizzes, challenges, and featured tips.

Quiz start

View for starting a quiz.

Loading screen

View shown while quiz data is being loaded.

Quiz in progress

View of a quiz in progress.

Correct answer explanation

Modal that provides a detailed explanation of the correct answer after answering a question.

Quiz results

View that shows the results after completing a quiz.

Challenge

The challenge combines instructions, files, an editor, a terminal, and access to the preview and tests.

Tips

Tips can be selected from the list or shown at random; each includes an explanation, examples, and its source.

Final reflections

Learnings

Vue Training began as a collection of activities and evolved into a path that connects explanations, understanding checks, and practice. That shift made me think less about each screen in isolation and more about how someone keeps their context when moving from one activity to another.

Integrating the challenges presented a different design problem: bringing instructions, code, a preview, and test results together without making the interface difficult to follow. The project is still in development, especially the review and expansion of its content.