Learn by building real projects
Each challenge teaches you the concepts first, then AI builds it while you watch. After it's built, prove you understand. This is how you become a real developer.
Learn the concepts
Complete required lessons first. Understand the principles before building.
Build with AI
Start the challenge — AI builds while contextual learning explains what's happening.
Get certified
Take the quiz about what was built. Pass to earn credits and the Certified Builder title.
Why not just prompt and go?
AI-generated code can have security holes, performance bugs, and issues that look correct but aren't. Understanding the principles means you can review, catch problems, and ship with confidence. Vibe coding without understanding is like driving without knowing the road rules.
Your First Landing Page
Build a professional startup landing page and learn how HTML, CSS, and responsive design work together to create a compelling first impression.
🎯 Learning Objective
Understand page structure, styling fundamentals, and responsive layouts
🔒 Complete these topics first:
Analytics Dashboard
Build a data-rich SaaS dashboard with charts, KPI cards, and a data table. Learn how React components compose together to create complex UIs.
🎯 Learning Objective
Master React components, props, and composing small pieces into big UIs
🔒 Complete these topics first:
Habit Tracker
Build a habit tracking app with streaks, completion animations, and local storage persistence. Learn state management and side effects.
🎯 Learning Objective
Understand useState, useEffect, localStorage, and how apps persist data
🔒 Complete these topics first:
Online Store
Build a product catalog with cart functionality, filters, and a checkout flow. Learn about lists, conditional rendering, and complex state.
🎯 Learning Objective
Master list rendering, filtering, and managing shopping cart state
🔒 Complete these topics first:
AI Chat Interface
Build a ChatGPT-style interface with streaming responses, markdown rendering, and conversation management. Learn about APIs and async data.
🎯 Learning Objective
Understand API calls, async/await, streaming, and the fundamentals of AI integration
🔒 Complete these topics first:
Personal Portfolio
Build a portfolio site with your social profiles imported. Learn about personal branding, content structure, and how to present yourself online.
🎯 Learning Objective
Understand web presence, SEO basics, and responsive personal branding
🔒 Complete these topics first:
Homework Tracker
Build a homework tracker that manages assignments, due dates, and grades by subject. Learn about state management and data persistence.
🎯 Learning Objective
Master component state, localStorage persistence, and organizing data by categories
🔒 Complete these topics first:
Gaming Stats Dashboard
Build a personal gaming stats tracker with match history, win rates, and achievement badges. Learn about data visualization and computed values.
🎯 Learning Objective
Learn data aggregation, chart rendering, and achievement/gamification systems
🔒 Complete these topics first:
Virtual Piggy Bank
Build a savings tracker with goals, transactions, and spending categories. Learn about forms, calculations, and progress visualization.
🎯 Learning Objective
Understand form handling, financial calculations, and visual progress tracking
🔒 Complete these topics first:
Soundboard
Build a 12-pad soundboard with keyboard hotkeys and record-your-own mode. Learn the Web Audio API and keyboard event handling.
🎯 Learning Objective
Understand how browsers play and record audio, and how to wire keyboard shortcuts to UI actions
🔒 Complete these topics first:
Meme Generator
Build a meme maker with classic templates, top/bottom caption inputs, and PNG download. Learn Canvas 2D and image composition.
🎯 Learning Objective
Master the Canvas 2D API — drawing images, layering text, and exporting as a downloadable file
🔒 Complete these topics first:
Which X Are You? Quiz
Build a shareable personality quiz that picks a result based on answers. Learn branching logic and result cards with share URLs.
🎯 Learning Objective
Master conditional rendering, scoring logic, and encoding state into shareable URLs
🔒 Complete these topics first:
Launch Countdown Video
Build a 10-second countdown video that exports as an MP4 with your launch date and brand colors. Perfect for launch-day social posts. Learn frame-based animation — the foundation of every video tool.
🎯 Learning Objective
Understand frame-based animation and how a "video" is really just deterministic rendering, frame by frame
🔒 Complete these topics first:
Fake Chat Screenshot
Build a tool that forges realistic iMessage/WhatsApp threads with avatars, timestamps, and export as image. Learn complex list state and styled bubbles.
🎯 Learning Objective
Master complex array state (messages), conditional bubble styling, and screenshot-as-image export
🔒 Complete these topics first:
Doodle Board
Build an infinite-feeling canvas scribble pad with brush sizes, colors, and one-tap PNG share. Learn mouse/touch events on Canvas.
🎯 Learning Objective
Understand Canvas drawing, pointer events (mouse + touch unified), and exporting artwork
🔒 Complete these topics first:
Daily Word Game
Build a Wordle-style word-guessing game with a shareable result grid. Learn game loops, keyboard input, and sharing.
🎯 Learning Objective
Master game state machines, grid rendering, and Web Share API for viral loops
🔒 Complete these topics first:
Playlist Cover Maker
Build a generator that creates square cover art for Spotify / Apple Music playlists with title, gradient, and optional emoji. Learn layered design exports.
🎯 Learning Objective
Understand layered Canvas composition, gradient rendering, and square export at platform-specific sizes
🔒 Complete these topics first:
Typing Reveal Video
Build a short video that types out a phrase letter-by-letter over a background. Exports as MP4 for TikTok (9:16) or Instagram (1:1). Learn frame-based text animation.
🎯 Learning Objective
Understand frame-perfect text reveals, audio sync, and exporting square + vertical variants from the same composition
🔒 Complete these topics first:
Kids' First Code Blocks
A drag-and-drop block coding toy for young kids (ages 4–7). Drag 'move right', 'jump', 'turn' blocks to move a character. Learn drag-drop and simple interpreters.
🎯 Learning Objective
Understand HTML5 drag-and-drop, how to write a tiny command interpreter, and UI design for non-readers
🔒 Complete these topics first:
Magic 8 Ball
Ask a yes/no question, shake, get a cryptic answer. The original idle toy — 20 lines of code and a bit of CSS shake. Great first-ever build.
🎯 Learning Objective
Master useState, random picks from an array, and CSS transforms for a shake effect
🔒 Complete these topics first:
Lunch Decision Spinner
A prize-wheel style spinner for the "where should we eat?" problem. Add your options, spin, let fate decide. Learn CSS transforms and timed animation.
🎯 Learning Objective
Understand CSS rotate transforms, easing timing functions, and dynamic text on rotating elements
🔒 Complete these topics first:
Band Name Generator
Combine random adjectives + nouns to spit out fake band names, Twitch handles, startup names — whatever. Learn array combinations and remix logic.
🎯 Learning Objective
Understand multi-array random combinations, filtering, and click-to-copy patterns
🔒 Complete these topics first:
Meeting Buzzword Bingo
A 5×5 bingo card that pre-fills with corporate jargon ("synergy", "circle back", "low-hanging fruit"). Tap to mark. First to five in a row wins their soul back.
🎯 Learning Objective
Build a grid game — bingo state machine, win detection, and shuffling logic
🔒 Complete these topics first:
Virtual Pet (Tamagotchi)
A chunky pixel pet that lives in your browser tab. Feed it, play with it, neglect it and it gets sad. Teaches time-based state decay and persistence.
🎯 Learning Objective
Understand stats that change with real time, offline decay calculations, and evolution based on care
🔒 Complete these topics first:
Gig Poster Maker
Generate shareable gig / event posters — pick a preset, plug in your band name, date, venue, export PNG. No design tool needed.
🎯 Learning Objective
Understand layered Canvas compositions, web fonts on canvas, and template-driven design
🔒 Complete these topics first:
PC Build Planner
Build a PC configurator with compatibility checking and price comparison. Learn about complex data relationships and validation.
🎯 Learning Objective
Master complex state management, data relationships, and validation logic
🔒 Complete these topics first:
Multi-Model Comparison Playground
Build a side-by-side LLM playground. Paste a prompt, send it to Claude, GPT, and DeepSeek simultaneously, watch streaming responses race in three columns, and compare cost + latency. The tool every team building with AI eventually reinvents — you build yours in 20 minutes.
🎯 Learning Objective
Understand how multi-provider LLM calls actually work — auth, streaming, cost accounting, and how to keep three async streams in sync without losing your mind.