A ten-week course · designed for teens, grades 8–12
Going Live: Vibecode a Website or App
Plan, build, test, and publish a real small website or browser app, using AI tools responsibly. No coding experience needed.
01 · quick facts
The course at a glance
- WhoGrades 8–12Designed for teens. The tools used require users to be at least 13.
- How long10 weekly sessionsAbout 55 minutes each.
- FormatShort demo + hands-on buildMost of every session is project time.
- Homework20–30 min a weekWith a clear stopping point.
- ExperienceNone neededBeginners and experienced students learn together.
02 · what you'll build
One small, useful project. Really online.
"Vibecoding" means building software by describing what you want to an AI tool and working with what it writes. In this course, students do that, and they also check it, test it, and explain it.
Plan it
Pick a small website or browser tool that does one useful job, sketch it, and decide how to check that it works.
Build it
Write it in VS Code with GitHub Copilot as the coding AI. Students decide what to keep and what to change.
Publish it, protected
Put it online with real access protection: only the people the student chooses can open it.
Test it
Try the main task, blank and unusual input, and narrow and wide screens. Write down what was expected and what happened.
Make it usable
Clear headings and labels, readable colors, and controls that work with a keyboard, so more people can use it.
Debug and explain
Find bugs with evidence, then explain the key code and decisions in their own words.
What counts here
Understanding over flashy output
Students explain their code and how they checked what the AI suggested. A main task that works, tested and explained, counts for more than extra features. Nobody is expected to master every line an AI wrote; they are expected to know what their project does and how they know it works.
How your website gets online
- Edit in VS Code
Change your project files.
- Preview in your browser
See what happens. Check what works.
- Publish with Cloudflare or Netlify
Put a version online. Check who can open it.
Publishing doesn't mean everyone can open it. In Week 2, students choose who can.
03 · the build track
Ten weeks, one project
Every class opens with a short demonstration, then about 35–40 minutes of project work. The project gets its first online version in Week 2 and improves from there.
Week 1: Plan it safely
AI and online safety, then a plan, a sketch, and three ways to check it works.
Week 2: First launch
A first version goes online, locked to the people on your list.
Week 3: Make it clear
Headings, navigation, and links that help visitors find their way.
Week 4: Make it work
One interaction that works, tested three times and explained.
Week 5: Make it usable
Readable design, clear labels, and keyboard checks.
Week 6: Handle mistakes
Blank, wrong, and unusual input get helpful messages.
Week 7: Fit every screen
The main task works on a narrow phone and a wide laptop.
Week 8: Debug with evidence
Reproduce a bug, check an AI-suggested fix, and prove it worked.
Week 9: Test with a user
Watch someone use it without coaching, then fix what matters most.
Week 10: Show your work
Demonstrate the project and explain how it works and how you checked it.
Beginners get starter examples and numbered steps. Experienced students can skip the extra explanation and take on an optional extension once the core works. Everyone works toward the same weekly milestone.
04 · tools
Real tools, set up once
Students use the same kinds of tools working developers use, on their free tiers. A step-by-step setup guide walks students and families through each one before the build begins.
VS Code (opens in a new tab)
The free code editor where students write and save their project files. Installed on the student's laptop.
GitHub (opens in a new tab) and Copilot (opens in a new tab)
GitHub keeps saved versions of the project. Copilot, inside VS Code, is the main AI students code with. Students can get extra features free through GitHub Education (opens in a new tab).
Gmail account (opens in a new tab)
Used to sign in to the class app and to create the other tool accounts.
Cloudflare (opens in a new tab) or Netlify (opens in a new tab)
Each student's own account, set up with a parent or guardian, publishes the website. It's protected with a real sign-in so only the people on the student's list can open it. The course uses one host; which one is shared in the setup guide.
Gemini (opens in a new tab)
Optional, for occasional comparisons or a second explanation. Copilot stays the main coding tool.
Student versions of the tools
Students can apply for free student access, which adds features to the free tiers. Homeschool students qualify with dated proof of enrollment, such as an enrollment letter or schedule. Approval takes time, so apply early.
Where websites go live: Cloudflare or Netlify
Each student publishes with their own account on one of two professional hosts. The setup guide says which one a course uses.
Cloudflare (opens in a new tab)
Free hosting with Cloudflare Access sign-in protection for small groups. Setting up protection asks for a card on file.
Netlify (opens in a new tab)
Free hosting for students 13 and up. Password or member-only protection needs a paid plan.
Either way, a student's site is protected with a real sign-in, never just a hidden link.
A small class web app that keeps everyone on track
- Weekly guided lessons, one step at a time, with extra help for beginners.
- Saved progress, so students can pick up at home where they stopped.
- A private class gallery of project links. Listings are optional, and only the class can see them.
- A supporting AI helper for explanations. It's optional; every lesson works without it.
05 · safety and privacy
Built for a class, not a social network
Safety is taught in Week 1 and built into how the class works.
- No chat, comments, likes, public profiles, or leaderboards
The class app has no messaging between students and no popularity counts or rankings.
- Websites are protected by real sign-in
Each student's site asks visitors to sign in first, so only the people the student chooses can open it.
- Personal information stays out
Students learn to keep personal details, other people's photos, and sign-in codes out of AI prompts and projects.
- AI is a helper, not the grader
Work is judged on planning, testing, and each student's own explanations, never by an AI.
- Families are informed first
Before a student starts, families get a clear notice explaining what information the course uses and why.
- No ads, no selling information
Student information is used for the class only.
Safety is part of the curriculum, not an afterthought. Students practice these habits every week, on a project they can be proud to show.
06 · for families
What learners need
A step-by-step setup guide with links and checks comes before the first session, so everyone starts the build ready.
Equipment
- A laptop that can install softwareIt needs to run VS Code (opens in a new tab), a browser, and a second screen together. Chromebooks, tablets, and locked school devices often can't install what's needed. See laptop specs below.
- A second monitor and its cable (very strongly recommended)Instructions on one screen, VS Code on the other. An ordinary monitor you already have is fine. How to set it up: Windows (opens in a new tab) · Mac (opens in a new tab).
- A reliable internet connectionThe tools, the class app, and publishing all work online.
Free accounts, set up before Week 2
- Gmail (opens in a new tab)
Required. An existing suitable account is fine.
- GitHub (opens in a new tab)
For Copilot and for saving project versions. Choose a username that doesn't give away personal information.
- Cloudflare (opens in a new tab) or Netlify (opens in a new tab)
The student's own account, for publishing and protecting their website. The setup guide says which host your course uses.
Set up together. A parent or guardian helps create each account, reads each tool's terms with the student, and uses accurate information when signing up. The setup guide walks through every step.
Laptop specs
Most laptops from the last few years work. If you're buying one, use these as a guide. No particular brand is required.
Minimum
- System: Windows 11, or a macOS version that still gets Apple security updates
- Memory: 8 GB RAM
- Storage: 128 GB SSD with at least 20 GB free
- Screen out: an HDMI or USB-C video port for the second monitor
- Permission to install software (not a locked school or work laptop)
Recommended
- Memory: 16 GB RAM, for a browser, VS Code, and Copilot at the same time
- Storage: 256 GB SSD or more
- Processor: Apple M-series, Intel Core i5 / Core Ultra 5, or AMD Ryzen 5 or better
- Battery: lasts a full session, plus the charger
Good choices if buying
- MacBook Air with an Apple M-series chip (16 GB if buying new). Refurbished models from Apple's refurbished store (opens in a new tab) work well.
- A mid-range Windows 11 laptop with 16 GB RAM, a 256 GB+ SSD, and an HDMI port. Business-line refurbished laptops are often good value.
- Avoid: Chromebooks, iPads and tablets, and laptops with less than 8 GB RAM or a 64 GB drive. They usually can't run the tools well.
VS Code's own requirements are lower (official requirements (opens in a new tab)); these specs leave room for everything running together.
What the software costs
Everything the course needs has a free option. The one tool that may cost money is GitHub Copilot, if a student doesn't get free student access.
| Tool | Cost | Notes |
|---|---|---|
| VS Code (opens in a new tab) | Free | The code editor. |
| Gmail / Google account (opens in a new tab) | Free | Required for sign-in. |
| GitHub (opens in a new tab) | Free | Saves project versions. |
| GitHub Copilot (opens in a new tab) | Free with student access, or $0 / $10 a month |
|
| Cloudflare (opens in a new tab) | Free | Hosting and sign-in protection are free for small groups. Protection setup asks for a card on file; no charge expected. |
| Netlify (opens in a new tab) | Free, or $20 a month for protection | Hosting is free. Password or member-only protection needs the Pro plan. Only needed if a course uses Netlify. |
| Gemini (opens in a new tab) | Free | Optional. No paid plan needed. |
Likely total: $0 with student access, or about $30 if a student buys Copilot Pro for the course. Prices checked September 2026 and can change; check each link before buying. Paid upgrades are optional, and families should approve any purchase.
- Step 1Student agreement
The student reads and accepts the course expectations in the class app.
- Step 2Family information notice
A parent or guardian reviews a clear notice about how the course uses information.
- Step 3Get ready to build
Work through the setup checklist: equipment, accounts, and a quick save test.
07 · questions
Questions families ask
Does my student need coding experience?
No. The class is built for beginners and experienced students together. Beginners get starter examples and numbered steps. Experienced students can skip ahead to optional extensions once the week's core work is done.
What if our laptop is older?
It may be fine. It needs to install software and run VS Code, a web browser, and a second screen at the same time. Try that at home first. Chromebooks, tablets, and locked school devices often can't install what's needed. Please don't buy a new laptop just for this course without trying yours first.
Isn't the AI doing the work?
AI writes suggestions; students make the decisions. They plan the project before any code, test what the AI produces, and explain the key parts of their code and how they checked AI suggestions. Work is assessed on planning, a working main task, testing, usability, safety, and explanations, not on how many features it has.
Who can see my student's website?
Only the people the student chooses. Each site is protected by real sign-in, so visitors have to prove who they are before it opens. Students learn to set up and manage that list themselves.
The class gallery is private to the class. Listings are optional and use a display name the student chooses.
What if a student misses a session?
Each week's lesson stays in the class app with a home review: written steps with screenshots, and short recordings for the trickiest parts. Past weeks stay open, so a student can catch up at home. If they get stuck, they can leave a help flag on that step for the teacher.
Is AI help required?
Copilot is the main coding tool. The class app's AI helper is optional, and every lesson works without it. Students learn to keep personal information out of anything they type into an AI tool.
What happens after the course?
The project belongs to the student. The code stays in their own GitHub account and the website stays in their own hosting account, so they can keep improving it. Students can also export their learning notebook to keep.
What age is the course for?
It's designed for teens in grades 8–12. The professional tools it uses, such as GitHub and Google accounts, require users to be at least 13. Beginners and experienced students learn side by side.