The VS Code Practice Lab
Ten lessons, ten real projects, each one something you can show someone. You build each project yourself in VS Code with Claude Code as your coach, and every lesson has a free video of me building it from scratch as your safety net: try first, watch second. The struggle is where the learning happens; the video means you are never actually stuck. The starred lessons are the big four: a live website, taking payments, your first backend, and a mobile app.
Pick the next lesson (they build on each other, top to bottom).
Copy the coach prompt below into Claude Code in VS Code, add the project brief from the card, and build it with Claude coaching, not doing.
Stuck for more than 15 minutes, or finished and curious? Watch me build that exact project in the free Code Explorer videos →
The coach prompt
Paste this into Claude Code at the start of every project, then add the one-line brief from the lesson card underneath.
You are my coding coach inside VS Code, and I am here to LEARN, not to watch you work. I am practising: treat me as a beginner who wants to end up understanding every file in this project. The project I am building today: [PASTE THE PROJECT BRIEF FROM THE CARD HERE] How we work, every time: 1. Start in plan mode: show me the plan for the whole project as a short list of small steps, each one something we can see working before moving on. Wait for my go. 2. One step at a time. For each step: explain what we are about to do and why in plain words, then build that one piece, then show me how to RUN it and see it working myself before we touch the next step. 3. Make me do the visible parts: I create the files and folders when it is simple, I run the commands you give me in the terminal, I refresh the browser. You handle anything genuinely fiddly, but narrate it. 4. When something breaks, do not silently fix it. Show me the error, explain what it means in one sentence, then let me attempt the fix with your hint before you step in. 5. If the project needs an API key or an account (Stripe, Supabase, Vercel), stop and teach that step properly: what it is, where to sign up, why keys never get pasted into code that gets shared, and how we keep them in a separate file. Then let me do the signup and get the key myself. 6. Keep every explanation under four sentences. I would rather ask a follow-up than scroll. 7. At the end: quiz me. Three quick questions about what we built, then tell me one thing to try changing on my own before the next lesson. Never build the whole thing in one go, even if I ask when tired. The point is the reps.
The ten lessons
Each card: what you build, what it teaches, and the one-line brief to paste under the coach prompt. ⭐ marks the big-four confidence builders.
A web page that roasts whatever you type into it, powered by a real AI model through an API. Small, funny, finished in one sitting, and it teaches the concept everything else builds on.
Brief: Build an AI Roast Generator: a single web page with a text box and a button; whatever I type gets sent to an AI model via an API and a witty roast comes back on screen.
The real lesson in this one is the key. Your Claude subscription does not cover an app calling an AI: the app needs its own API key, billed separately (pennies at this scale). Getting that key, keeping it out of your code, and watching your app use it is the most useful thing this lesson teaches.
The game you already know, built by you. No APIs at all: pure logic. Rules, guesses, state, and win conditions, the thinking muscle behind every app.
Brief: Build a Wordle clone: five-letter word, six guesses, tiles that go green, yellow or grey, with a win and lose screen.
Your own website, actually live on the internet. Not a file on your laptop: a real URL you can send to anyone, deployed with the same tool professionals use.
Brief: Build a one-page personal portfolio site: my name, a short bio, a projects section I can add to, and a contact link. Then deploy it live with Vercel so it has a real URL I can share.
⭐Why the star: this is the "I have a live website" moment. You learn Vercel, the free tool that takes a folder on your laptop and puts it on the internet in about a minute. Every project after this can go live the same way.
A dashboard of live coin prices updating in front of you. Your second API, and this one has a free key: the whole key workflow again at zero cost, with data you can literally watch move.
Brief: Build a live crypto dashboard: pick five coins, fetch their prices from a free crypto API, show them in cards that refresh automatically, green when up and red when down.
Tick off habits daily, watch streaks grow, and it remembers. The first project where your data survives closing the browser: that is a database, and it changes what you can build forever.
Brief: Build a habit streak tracker: I add habits, tick them off each day, streaks count up, and everything is still there when I close and reopen the app.
A page where people can actually send you money. Built on Stripe, the payments company behind half the internet's checkouts, in test mode: fake cards, real flow.
Brief: Build a Buy Me a Coffee page: a tip button with preset amounts that opens a Stripe TEST-mode checkout, and a thank-you page after a successful fake payment.
⭐Why the star: taking payments is the business skill. You learn Stripe end to end: the account, the test keys, the checkout, the confirmation. The distance between "I code a bit" and "I could charge for something" is exactly this lesson.
A private journal with a login: your first backend. Accounts, passwords, and pages only you can see, built on Supabase so you see what a backend actually is.
Brief: Build a diary app with signup and login using Supabase: once I am in, I can write dated entries only I can see, and logging out locks them away.
⭐Why the star: "what is a backend?" answered by building one. Supabase gives you a real backend (users, database, security rules) with a friendly dashboard. After this lesson the frontend/backend divide stops being jargon: you have stood on both sides of it.
An app that installs on your phone with its own icon. Built as a PWA (a progressive web app: a website that behaves like an app), so there is no app store, no gatekeeper, just your app on your home screen.
Brief: Build a mobile-first idea-capture app as a PWA: quick-capture box on top, ideas listed below with a star for favourites, everything saved, installable on my phone's home screen with its own icon.
⭐Why the star: "I made an app" with no app store in the way. You learn what a PWA is and why it is the shortcut to mobile: one codebase, works on any phone, installs from the browser. Showing someone an app on your own phone that you built is the best feeling in this course.
Type a ticker, get the story: price history drawn as a real chart. Combines API + key + live data and adds the skill of making numbers visual.
Brief: Build a stock explorer: a search box for a ticker symbol, fetch its recent price history from a free stocks API, and draw it as a line chart with the company name and latest price above.
A program that runs by itself every morning and hands you a digest. Nobody clicks anything: this is automation, where everything you have learned starts working while you sleep.
Brief: Build a daily AI digest: a script that runs on a schedule each morning, fetches headlines from a few sources, has an AI summarise them into five bullets, and saves or emails me the digest.
Every lesson has a full video of me building the project from scratch, free, in the Code Explorer course → The method that makes you a builder: attempt it yourself first, use the video when you are genuinely stuck or to compare approaches after you finish. Watching first feels faster; building first is what makes it stick.
McCloskey.ai · Resources. Built for people learning to build with AI in VS Code.