Designed for Students Ages 13 to 15

Your first hour of
vibe coding.

No experience needed. No textbooks. Just you, an AI, and an idea. By the end you will have built something real that you can share.

45 to 60 minutes
Zero prior coding needed
AI-assisted, human-directed

Wait, what is vibe coding?

Here is a quick picture of what you are about to do and what makes it different from traditional coding.

Vibe coding means describing what you want to build in plain language and letting an AI write the actual code. You are the director. The AI is the crew. Your job is to have a clear vision, keep giving feedback, and test what gets built until it works the way you imagined.

You do not need to memorize any code. You need to think clearly, describe specifically, and test honestly. Those are real skills that will help you far beyond this project.

You describe it
Tell the AI what you want in plain English, like texting a friend who can build anything.
AI writes the code
The AI turns your words into working code. You do not need to understand every line of it.
You test it
Run it, poke around, see what works and what does not. Your reaction is the most important part.
You improve it
Tell the AI what to change. Repeat until it looks and works the way you pictured it.

5 steps to your first build

Click the button on any step to open it. Work through them in order on your first project.

Design process and instructional notes

This section documents the instructional design decisions behind this resource, the ADDIE framework used to build it, and the learning principles applied at each step.

The ADDIE framework: how this lesson is built
Analyze
Design
Develop
Implement
Evaluate
ADDIE mapped to this project
Analyze
Learner and context analysis. The target audience is students ages 13 to 15 with no prior coding experience. A needs assessment identified a gap between student interest in technology and access to a low-barrier entry point. Performance objectives were scoped around three outcomes: the learner can articulate a product idea, communicate it clearly to an AI tool, and evaluate the result against their original intent. Prior knowledge assumptions are minimal and all instructional language is calibrated to an 8th-grade reading level throughout the resource.
Design
Instructional strategy and sequencing. Content follows a simple-to-complex progression with worked examples preceding independent practice at every stage. Each of the five steps maps to a discrete learning objective and includes three scaffolded support layers: direct instruction in the body copy, a hint for learners who are stuck, and an active performance checkpoint in the Try This box. Cognitive load was reduced through content chunking, plain vocabulary over technical terminology, and a single primary task per step to protect working memory capacity.
Develop
Material production and accessibility. The resource was built as a single self-contained HTML file deployable to any static hosting platform with no server-side dependencies. ADA and WCAG 2.1 compliance was addressed during development rather than retrofitted after. This includes semantic HTML landmark structure, ARIA labels on all interactive elements, a skip-navigation link, visible keyboard focus indicators, fully keyboard-accessible accordion interactions, forced-color media query support for high-contrast display modes, and verified color contrast ratios across all foreground and background combinations.
Implement
Delivery and facilitation design. The resource is designed for independent asynchronous use with no facilitator required. The accordion structure allows learners to self-pace and return to earlier steps without losing context. On-demand glossary support is available without interrupting the flow of the lesson. Free browser-based coding tools are specified by name so no institutional infrastructure or IT support is needed. The resource deploys as a shareable URL and can be linked directly from any LMS, course page, or communication channel.
Evaluate
Formative and summative evaluation design. Formative evaluation is embedded throughout the instruction. The Try This checkpoints in each step function as informal performance checks that allow learners to self-assess readiness before advancing. The reflection prompts in Step 5 serve as a summative activity, asking learners to articulate what they built, what failed, and what they would change. A formal evaluation cycle would add learner observation sessions during piloting, task completion rate tracking, and a post-activity rubric scored against the stated performance objectives.

Core learning principles applied

Goal-directed
Learners engage more deeply when the goal is personally meaningful. Self-determination theory supports learner-chosen projects.
Iterative
Learning is structured as a feedback loop. Each cycle of test and refine deepens schema and builds metacognitive awareness.
Low stakes
Psychological safety is built in. Errors are framed as information, not failure, which supports risk-taking and deeper engagement.
Language first
Clear communication is the transferable skill. Code literacy is a byproduct, not the primary objective at this level.

L&D insight notes by step

Step 01: Pick your idea (ADDIE: Analyze)
Intrinsic motivation is the most powerful learning driver for adolescents. Self-determination theory (Deci & Ryan) tells us that when learners choose their own goals, engagement and persistence increase dramatically. The learner-choice structure in this step is intentional, not incidental.
Step 02: Write a strong prompt (ADDIE: Design)
Cognitive load theory (Sweller, 1988) informs the worked-example approach used here. Showing a strong and weak prompt side by side reduces extraneous load and activates schema before the learner attempts their own version. The glossary buttons address vocabulary load without interrupting the task flow.
Step 03: Run it (ADDIE: Develop)
Kolb's experiential learning cycle begins with concrete experience. Running the code, even broken code, is the actual learning event. The hint in this step reframes unexpected output as useful information rather than failure, which is critical for maintaining psychological safety with novice learners.
Step 04: Iterate (ADDIE: Implement)
Metacognition, the ability to notice what is working and what is not, is a top predictor of academic success across age groups. Each test-and-change cycle in this step is a structured metacognitive practice. Spaced repetition is also built in because the learner revisits the same project multiple times with deliberate variation.
Step 05: Reflect and share (ADDIE: Evaluate)
Bloom's Taxonomy places creation and evaluation at the highest cognitive levels. Asking learners to share and explain their work activates retrieval practice (Roediger & Butler, 2011), which is one of the strongest memory consolidation strategies identified in cognitive science research.
Cognitive load reduction: design decisions for memory retention
One step at a time. Each accordion card isolates a single task. Learners do not have to hold the full process in working memory at once.
Examples before rules. Worked examples appear before principles so the brain has a concrete anchor before an abstract idea is introduced.
Chunked content. Short cards prevent working memory overload. Open one, close it, move to the next.
Plain language throughout. No jargon without an inline explanation. Vocabulary load is kept low so attention stays on the skill.
Retrieval practice at close. Step 5 asks learners to explain what they built, activating recall as a consolidation strategy.
Spaced repetition. The iterate step revisits the same project multiple times with variation, deepening long-term retention beyond a single pass.

Student Quick Reference Guide

Use these six questions every time you start a new project. They help you think before you build.