LEVEL 1
LAUNCHLAB
Claude Design, Claude Code, GitHub & Vercel
CHAPTER 0
WHO WE ARE
Meet your guides
Yibo: Hey Player 01! Welcome to LaunchLab. I'm Yibo, and design is my thing.
LOGO HERE
CHAPTER 1
DESIGN FIRST
Claude Design and prompting
Yibo: Claude Design builds the visual shell of your site. You describe how it should look. No code needed.
MINI GAME: PROMPT FORGE
FINISH THE DIALOGUE TO UNLOCK
CHAPTER 2
BUILD WITH CLAUDE CODE
Your agentic coding sidekick
Nirvan: Claude Code is an agentic coding system that lives in your terminal.
MINI GAME: WHAT'S MY POWER?
FINISH THE DIALOGUE TO UNLOCK
CHAPTER 3
THE WHOLE WORKFLOW
Design > Build > Deploy
Yibo: Here's the whole quest in three moves: DESIGN > BUILD > DEPLOY.
MINI GAME: PIPELINE RUNNER
FINISH THE DIALOGUE TO UNLOCK
CHAPTER 4
GIT QUEST
GitHub: store, share, collaborate
Rishabh: GitHub lets you do three things with code: STORE it, SHARE it, and COLLABORATE on it.
MINI GAME: TERM MATCH
FINISH THE DIALOGUE TO UNLOCK
CHAPTER 5
DEPLOY WITH VERCEL
From repo to real website
Rishabh: GitHub stores your code, but nothing there is a website yet.
MINI GAME: DEPLOY TRAIN
FINISH THE DIALOGUE TO UNLOCK
CHAPTER 6
FILE TYPES
HTML, CSS and JavaScript
Nirvan: Quick-fire round! A basic website is made of three files.
MINI GAME: WHICH FILE?
FINISH THE DIALOGUE TO UNLOCK
CHAPTER 7
BACKEND BOSS
What a plain site can't do
Rishabh: A basic site forgets everyone the moment you close the tab.
MINI GAME: TOKEN GATEKEEPER
FINISH THE DIALOGUE TO UNLOCK
FINAL BOSS
SESSION QUIZ
Defeat the Bug Boss
Yibo: Uh oh... the BUG BOSS has appeared!
MINI GAME: BOSS FIGHT
FINISH THE DIALOGUE TO UNLOCK
Create a website with a tab for each guest speaker session. Each tab can be an interactive game to consolidate what you learned.