Interactive learning · Free course
Web Dev Quests
Ten beginner projects — from a landing page to Snake and a chat app. Each quest has HTML, CSS, JavaScript, and Build steps with a live preview.
- No install
- In-browser live preview
- Saved on this device
Prefer AI prompts? Open Vibe Code Studio →
Complete HTML → CSS → JavaScript → Build on each quest to unlock the next. Saved on this device. Sign in to sync online.
Build a Landing Page
Structure your first web page with headings, text, and links.
Unlocks: HTML structure — headings, paragraphs, and links
Start quest →
Build a Store
Lists, product cards, and prices.
Unlocks: Lists & product cards — <ul>, cards, and prices
Pizza Website
Images, menus, and appetizing layout.
Unlocks: Images & menus — <img>, figures, and menu sections
Music Player
Buttons, flexbox, and playback UI.
Unlocks: Flexbox & controls — layout and button groups
Pet Adoption
CSS Grid and adoption cards.
Unlocks: CSS Grid — responsive card galleries
Weather App
Display data and switch conditions.
Unlocks: Data display — objects, conditionals, and DOM updates
Clicker Game
Score, clicks, and upgrades.
Unlocks: Game loops — score variables and upgrade buttons
Snake
Grid movement and game loops.
Unlocks: Game loops — timers, grids, and keyboard input
Tic Tac Toe
Arrays, win checks, and turns.
Unlocks: Win logic — arrays, turns, and state checks
Chat App
Messages, input, and DOM lists.
Unlocks: DOM lists — append messages and handle forms
Language fundamentals