Ship code.
Defeat bosses.
CodeQuest doesn't do toy exercises. You'll build real multi-stage projects that mirror actual software work — and face boss fights ripped from production codebases. Fix the bug, refactor the mess, ship the feature. That's how you level up.
Boss Fights
Real-world debugging
Projects
Multi-stage builds
Fix it or fail. Every learning path ends with a boss fight — a real-world coding crisis pulled from the kind of problems professional developers face every week. No hand-holding. No multiple choice. Just you, a broken codebase, and a ticking clock.
01
Read the brief
A panicked Slack message. A failing CI pipeline. A client demo in two hours. You get the scenario and the broken code — just like a real job.
02
Diagnose & fix
Read the error. Trace the logic. Find the bug, the missing edge case, the architectural flaw. Write the fix in a live code editor with real-time feedback.
03
Ship & earn
Your fix runs against automated tests. Pass them all and the boss falls — you earn epic loot, rare XP, and a badge that proves you can handle pressure.
JavaScript
◆ Epic
The Broken SPA
"The client demo is in 90 minutes. The app loads, but the dashboard data never appears. The fetch calls look fine. Console shows no errors. Something is silently failing — find it." A single-page app with async race conditions, a stale closure trapping the wrong state, and a promise chain that swallows errors. You'll need to trace the data flow, fix the timing bugs, and get the dashboard rendering before the clock runs out.
HTML
◆ Rare
The Accessibility Audit
"We just got a compliance report back. The signup form fails 11 WCAG checks. Screen readers can't navigate it. The submit button does nothing on keyboard. Legal says fix it by Friday." A form built entirely with divs, no labels, no ARIA, no semantic structure. You'll restructure it with proper HTML elements, add keyboard navigation, fix focus order, and make every field screen-reader accessible — all without breaking the existing CSS.
CSS
◆ Epic
The Responsive Meltdown
"The marketing site looks perfect on desktop. On mobile it's completely broken — overlapping text, invisible buttons, a horizontal scroll bar that won't die. Launch is tomorrow." A layout built with fixed widths, absolute positioning, and hardcoded pixel values. You'll refactor it to use Grid, Flexbox, and container queries — making it work from 320px to ultrawide without a single media query hack.
Python
◆ Epic
The Overnight Script
"The data migration script ran overnight and crashed at row 47,000 of 200,000. It doesn't log which rows failed. It doesn't resume. The client needs the migration done by morning." A fragile script with no error handling, no checkpointing, and file paths hardcoded to someone else's machine. You'll add try/except blocks, implement resume-from-failure logic, fix the path handling with pathlib, and make it production-grade.
SQL
◆ Epic
The Query That Killed Prod
"The analytics dashboard went down at 2 PM. Database CPU pinned at 100%. The culprit is a report query that's been running for 40 minutes. Find it. Fix it. Don't lose the data." A monstrous query with nested subqueries, missing indexes, an accidental cartesian join, and a WHERE clause that defeats every index. You'll rewrite it using CTEs, add the right indexes, and bring the execution time from 40 minutes to under 2 seconds.
AI / ML
◆ Mythic
Ship an Agent
"The product team wants a support agent that can search our docs, answer customer questions, and escalate when it's not confident. Prototype due Monday. The RAG pipeline is half-built and hallucinating." A RAG system with a broken retrieval step, wrong chunking strategy, no re-ranking, and a prompt that lets the model make things up. You'll fix the embedding pipeline, tune the retrieval, add confidence thresholds, and ship an agent that actually gives reliable answers.Stage by stage. Each path includes a multi-stage project that grows with you. No throwaway exercises — you're building a complete piece of software across multiple missions, just like a real sprint cycle. Every stage adds a feature, and by the end you've shipped something you can actually show people.
01
Scaffold
Set up the project structure, define the architecture, write the first working version. Ugly is fine — functional is the goal.
02
Iterate
Add features stage by stage. Each mission builds on the last — new capabilities, better patterns, real complexity. Like sprints on a product team.
03
Ship
Polish, handle edge cases, write clean code. The final stage delivers a project you'd put in a portfolio or deploy to production.
JavaScript
5 Stages
Task Commander
Build a fully interactive task management app in the browser — no frameworks, no dependencies. Pure JavaScript, DOM manipulation, and local persistence.01Render a static task list from a JavaScript array. Wire up an input field and add-button to push new tasks.
02Add edit, delete, and complete toggles. Use event delegation to handle clicks on dynamically created elements.
03Implement filtering (all / active / completed) and a live search bar using higher-order array methods.
04Persist tasks to localStorage. Handle page reload, corrupted data, and quota-exceeded edge cases.
05Add drag-and-drop reordering, keyboard shortcuts, and an undo/redo stack. Polish for production.
Final output
A deployable task manager with full CRUD, persistence, keyboard accessibility, and drag-and-drop — built without a single library.
HTML
4 Stages
Docs Station
Build a multi-page documentation site with perfect semantics, full accessibility, and SEO that actually ranks — using nothing but HTML.01Create the homepage with semantic landmarks: header, nav, main, footer. Structure a content hierarchy with proper heading levels.
02Build a multi-step contact form with validation attributes, fieldsets, legends, and accessible error messaging.
03Add a documentation section with code samples, data tables, and embedded media. Make every element screen-reader navigable.
04Implement SEO meta tags, OpenGraph cards, structured data markup, and a sitemap. Audit with Lighthouse and fix every issue.
Final output
A fully accessible, SEO-optimised documentation site that scores 100 on Lighthouse accessibility and best practices.
CSS
5 Stages
Synth UI Kit
Design and build a complete component library from scratch — buttons, cards, modals, forms, a responsive grid — all powered by custom properties and zero JavaScript.01Define design tokens as custom properties: colours, spacing scale, type scale, border radii. Build a base reset and typography system.
02Create button and input components in multiple sizes and variants. Add focus states, disabled states, and micro-transitions.
03Build card, modal, and notification components. Implement a flexible Grid layout system with named areas.
04Add dark mode via custom properties. Implement container queries so components adapt to their parent, not the viewport.
05Build a showcase page that demonstrates every component. Add scroll-driven animations and view transitions for polish.
Final output
A production-ready CSS design system with dark mode, responsive components, and a living showcase — portfolio-grade work.
Python
5 Stages
File Forge
Build a CLI file-processing toolkit that watches directories, transforms files, and generates reports — the kind of automation script every dev team wishes they had.01Parse command-line arguments with argparse. Read a directory of files and print a structured inventory (name, size, type, modified date).
02Add file filtering by extension, date range, and size. Output results as formatted tables or CSV using comprehensions.
03Implement batch rename, move, and copy operations. Add dry-run mode and undo support with a JSON operation log.
04Add file-watching with change detection. Auto-process new files as they land in a watched directory.
05Write pytest tests for every command. Add --verbose and --quiet output modes. Package with a pyproject.toml for pip install.
Final output
An installable CLI tool with batch file processing, a watch mode, full test coverage, and professional packaging.
SQL
4 Stages
Metric Vault
Build the analytics layer for a SaaS product from scratch — schema design, data loading, complex queries, and a reporting pipeline that a product team could actually use.01Design a normalised schema for users, subscriptions, events, and invoices. Write CREATE TABLE statements with proper constraints and foreign keys.
02Load sample data and write queries for core metrics: MRR, churn rate, active users. Use JOINs, GROUP BY, and date functions.
03Build advanced reports with CTEs and window functions: cohort retention, revenue growth rate, running totals, percentile rankings.
04Optimise every query. Add indexes, run EXPLAIN, eliminate sequential scans. Write a materialized view for the heaviest report.
Final output
A complete SaaS analytics schema with optimised queries for MRR, churn, cohort analysis, and executive reporting.
AI / ML
5 Stages
Knowledge Agent
Build a RAG-powered AI assistant that ingests a knowledge base, retrieves relevant context, and answers questions accurately — with confidence scoring and source citations.01Load documents, chunk them intelligently, and generate embeddings using a pre-trained model. Store vectors in a local index.
02Build the retrieval pipeline: query embedding, similarity search, and re-ranking. Test retrieval precision against known questions.
03Wire retrieval to an LLM with a system prompt that constrains answers to retrieved context. Add source citations to every response.
04Implement confidence scoring. Route low-confidence queries to a fallback path. Add conversation memory for multi-turn dialogue.
05Build an evaluation harness: test against a golden dataset, measure retrieval recall, answer accuracy, and hallucination rate. Iterate until metrics pass.
Final output
A production-grade RAG assistant with retrieval, citation, confidence routing, conversation memory, and a passing eval suite.