PyForge is a self-contained, gamified platform for learning Python from absolute basics through advanced topics, entirely in the browser. There is no backend, no build step, and no account system beyond a local profile. Every lesson runs real Python through Pyodide (CPython compiled to WebAssembly), so what you write is what actually executes, not a simulated interpreter.
The project is built with plain HTML, CSS, and JavaScript. No frameworks, no bundlers, no package manager. Open index.html and the entire application runs.
PyForge organizes the Python curriculum into fifteen worlds, from printing your first line of output to decorators, generators, and async/await. Each world contains a sequence of lessons, a boss battle that mixes rapid-fire questions with a scoring threshold, and a final exam that unlocks a locally generated certificate of mastery.
Lessons are not passive reading. Every lesson blends short explanations with active practice: multiple choice, predict-the-output, reorder-the-code, fill-in-the-blank, match-the-pairs, drag-token code puzzles, fix-the-bug, and full write-your-own-code exercises graded against real interpreter output. Feedback always explains what happened, what was expected, and what to try next rather than simply marking an answer wrong.
Progress, settings, and statistics persist in the browser's local storage. Nothing is transmitted anywhere. The application works fully offline once its external assets (fonts, icons, syntax highlighting, and the Python runtime) have been cached by the browser after the first load.
Curriculum Fifteen worlds covering basics, variables, numbers, strings, conditions, loops, functions, collections, modules and packaging, files and JSON, exceptions, object-oriented programming, decorators and functional tools, recursion, generators, async and concurrency basics, real mini-projects, and a capstone set of final challenges. Every world ends in a boss battle and a final exam.
Code editor A purpose-built editor component with line numbers, real-time syntax highlighting, tab-based indentation, auto-indent on new lines, bracket closing with type-through, copy, reset, clear console, fullscreen mode, and an execution timer. The editor grows automatically to fit whatever you are writing, up to a sensible maximum, instead of forcing a fixed or manually resized box.
Real Python execution
Code runs through Pyodide, a full CPython build compiled to WebAssembly. Standard library modules, exceptions, classes, generators, comprehensions, and async/await all behave exactly as they would on a local Python installation. Input-driven exercises can supply scripted input so grading stays deterministic.
Gamification, without imitating any specific platform An original visual identity built around a molten ember to magenta gradient, XP and level progression across named ranks, daily streaks, a hex-map style world progression screen called the Forge Path, boss battles with a health bar and limited hearts, and a set of medallions (achievements) covering completion, accuracy, streaks, and exploration milestones.
Reference library Cheat sheets for every world, a spaced-practice flashcard deck, a snippet library with copy-to-clipboard, a randomized quiz generator, per-lesson notes, and bookmarks and favorites.
Personal dashboard A home screen summarizing level, streak, today's quests, and upcoming lessons; a statistics page with hand-built SVG charts (no charting library) for weekly and monthly activity, XP trends, and completion breakdowns by world; and a profile page with a contribution-style activity calendar and per-world mastery bars.
Accessibility and responsiveness Keyboard shortcuts (search, run code, dismiss dialogs), visible focus states, ARIA labeling on interactive controls, high-contrast media query support, and a layout that adapts from desktop down to phone-width screens, including a dedicated mobile navigation drawer.
Local data control
Export progress to a JSON file, import it back on another device or browser, or reset everything and start over. All of it is one localStorage entry with no external dependency.
PyForge has no dependencies to install and no build step. Clone or download the repository, then open index.html directly in a browser (double-click it, or use your file manager's "open with browser"). No local server is required.
The first time you run a code exercise, the browser downloads the Pyodide runtime from a CDN (a few megabytes). This happens once per browser profile and is cached afterward, so subsequent runs start quickly.
PyForge is a static site and deploys to any static host: Netlify, Vercel, GitHub Pages, Cloudflare Pages, or a plain object storage bucket. There is nothing to configure.
Routing is entirely hash-based (#/lesson/w1-l1, #/map, and so on), so no server-side rewrite rules are required, unlike single-page applications built on the History API. Pointing a static host at the repository root with no build command is sufficient.
index.html Application shell and script/style loading order
css/
styles.css Design system: layout, components, pages, responsive rules
animations.css Keyframes and motion utility classes
editor.css Code editor chrome and syntax token colors
js/
storage.js Single source of truth for persisted state (localStorage)
ui.js Toasts, modals, confetti, floating XP feedback
achievements.js Medallion definitions and unlock evaluation
progress.js XP curve, ranks, streaks, mastery, daily quests, self-healing progress repair
stats.js Statistics aggregation and hand-built SVG charts
editor.js Pyodide-backed code editor component
course.js Lookup layer over the content data pushed by js/content
lessons.js Lesson engine: renders and grades every stage type
router.js Hash-based single-page router
app.js Application bootstrap, onboarding gate, global search, shortcuts
pages.js Home, Forge Path map, world lesson list, certificate pages
pages-secondary.js Profile, statistics, settings, achievements, sandbox, library, daily challenge
content/
world1.js ... world15.js Lesson, boss battle, and final exam content for each world
cheatsheets.js Reference sheet data for the Library
flashcards.js Flashcard deck data
quizbank.js Question pool for the daily challenge and quiz generator
State lives in one localStorage key, read and written exclusively through storage.js. Every other module treats PFStorage.getState() as the source of truth and calls PFStorage.update() to mutate it. Subscribers are notified after every write, which is how the sidebar counters and other live UI stay in sync without a framework.
Routing is a small hash-pattern matcher in router.js. Each route maps to a render function that repaints #view-root. There is no virtual DOM; pages render by setting innerHTML from template strings and then wiring event listeners.
The lesson engine in lessons.js defines a single contract that every stage type (multiple choice, reorder, fill-in-the-blank, match, code puzzle, and the code-execution stages) implements: mount into a container and expose a getGrade() function. The session runner in the same file drives lessons, boss battles, and final exams through that shared contract, so adding a new question type only requires one new mount function.
Content is data, not code. Each world file pushes a plain object describing its lessons, boss battle, and exam onto a shared array; course.js provides the lookup and unlock-state API on top of it. Adding a new world or lesson means adding data, not touching the engine.
Grading for code-execution stages runs the learner's code in Pyodide, captures stdout and stderr, and checks the result against an expected output string, a set of Python boolean expressions evaluated in the same namespace, or a minimum output-line count, depending on what the exercise defines.
Settings persist locally and include a light and dark theme, five accent color options, adjustable font size, animation and sound toggles, and two code editor color themes. Accent colors and the base palette are defined as CSS custom properties in styles.css and can be extended by adding a new [data-accent="name"] block.
Any current version of Chrome, Firefox, Safari, or Edge. Pyodide requires WebAssembly support, which all modern browsers provide. A stable internet connection is required for the first load of each external asset (fonts, icons, syntax highlighter, and the Python runtime); after that, normal browser caching keeps the application usable offline.
MIT License. See LICENSE for the full text.