⭐ XP Quests

🚀 From Zero to Landing-Page Boss

Twenty lessons. One fake product. At the end you'll vibe code a landing page with AI, understand every single line it writes — and publish it to the real internet.

🌅 Start every day HERE Do today's Warm-Up →   A 5-minute memory workout from lessons you already finished (+5 XP per correct answer). Warming up your memory BEFORE new lessons is the #1 trick for remembering forever.
🌳 Your Skill Tree See all 20 skills as a glowing adventure map — what you've conquered, where you are, and how much XP each skill holds. Open the Skill Tree →

Finish every lesson to unlock your 🎓 printable certificate. Between lessons: fight your 🐛 Tricky Questions, reread 📓 My Notebook, or mess around in the 🎪 Playground.

⭐ How XP works Correct quiz answer = +10 XP. Completed code task = +25 XP. Your score follows you across every lesson (see the badge in the corner). Levels: 🐣 Code Newbie → 🏷️ Tag Tamer (100) → 🎨 Style Wizard (250) → 📐 Layout Legend (450) → ⚡ Script Sorcerer (650) → 👑 Web Master (900).

🧱 Part 1 — HTML: build the walls

  1. Your First Web Page — tags, elements, and your first real page
  2. The HTML Skeleton — doctype, head, body, and the browser tab title
  3. Headings, Lists & Pictures — more bricks, plus attributes
  4. Links — the superpower that makes the web a web

🎨 Part 2 — CSS: paint the house

  1. First CSS — selectors, colors, and fonts
  2. Every Brick is a Box — padding, border, margin, and classes
  3. Flexbox — line your boxes up like a train

⚡ Part 3 — JavaScript: turn on the electricity

  1. First JavaScript — a button that actually does something

🏗️ Part 4 — The mission

  1. The Big Build — assemble your full landing page (45 min)
  2. 👾 FINAL BOSS — vibe code with AI and understand every line

⚡ Part 5 — JavaScript Deep Dive

For after the final boss (or after Lesson 8 if you can't wait): become truly dangerous with JavaScript. Ends with you building a real game. New: in these lessons, your code RUNS live in the practice boxes!

  1. Variables — memory boxes, numbers vs strings, and math
  2. Decisions: if / else — code that chooses its path
  3. Functions — write your own spells
  4. Lists & Loops — arrays, and pages that draw themselves
  5. 🎮 Mini Game: The Click Shop — build a clicker game with everything you know (45 min)

🎬 Part 6 — Vibe Coding Mastery

The end game: direct the AI like a movie director — pro prompts, code detective skills, real debugging, and full creative control. Do this after the final boss (Lesson 10); Lessons 11–15 first is even better.

  1. Prompt Like a Pro — the 5 ingredients of a work order the AI can't mess up
  2. Read AI Code Like a Detective — skim, names, follow the thread, tame the strangers
  3. Debug With AI — console errors, the bug report template, and beating the AI to the fix
  4. 🎬 VIBE BOSS — direct the AI through 3 real features on your page (60 min)

🌍 Part 7 — The Grand Finale

  1. 🌍 Publish Day — put your page on the REAL internet, with a parent (45 min)

📚 Cheat sheets (print these!)

🗓️ A good study day (with your 1-hour blocks) Do 2 lessons per hour block, then take your 15-minute break. Start each new day by redoing YESTERDAY'S quizzes from memory before starting a new lesson — remembering is what makes it stick. Two or three days of this and you'll be at the final boss.