WebForge is a self-contained, gamified platform for learning JavaScript, HTML, and CSS entirely in the browser. There is no backend, no build step, and no account system beyond a local profile. JavaScript lessons run real code in a sandboxed iframe; HTML and CSS lessons render your actual markup and styles live. Nothing is simulated.
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.
WebForge is organized into three independent tracks — HTML, CSS, and JavaScript — each with its own Forge Path of worlds, so a learner who already knows one or two of them can jump straight to the track they actually need. The HTML and CSS tracks are real, complete courses in their own right — document structure through semantic layout for HTML, selectors through responsive design for CSS. The JavaScript track runs deeper, fifteen worlds from your first console.log to closures, generators, and async/await; HTML and CSS are deliberately leaner so they stay approachable for someone filling a gap rather than starting from zero. Each world in every track 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 what your code actually does — real console output for JavaScript, the real rendered DOM for HTML, and real computed styles for CSS. 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, and the syntax highlighter) have been cached by the browser after the first load.
Curriculum Three independent tracks. HTML (7 worlds): document structure, text and semantic elements, links and images, lists and tables, forms, media and embeds, and semantic page layout with accessibility habits woven throughout. CSS (6 worlds): selectors and the cascade, the box model, colors and typography, flexbox, grid, and positioning with responsive design. JavaScript (15 worlds): basics, variables, numbers, strings, conditions, loops, functions, collections (arrays, objects, sets, maps), modules and npm, the DOM and browser APIs, exceptions, object-oriented programming with classes, closures and functional tools, recursion, generators, promises and async/await, real mini-projects, and a capstone set of final challenges. Every world in every track ends in a boss battle and a final exam.
Code editor A purpose-built editor component with line numbers, real-time syntax highlighting for JavaScript, HTML, or CSS depending on the track, tab-based indentation, auto-indent on new lines, bracket closing with type-through, copy, reset, 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 execution, not simulation
JavaScript code runs inside a sandboxed iframe (sandbox="allow-scripts allow-modals", no allow-same-origin), completely isolated from the application's own page so a lesson's code can never touch WebForge's own DOM, storage, or globals. console.log, console.warn, and console.error are captured and streamed back to the on-screen console; uncaught errors and unhandled promise rejections are caught and displayed with their real stack trace. Input-driven exercises can supply scripted input (via an overridden prompt) so grading stays deterministic. HTML and CSS exercises render into a second kind of sandboxed iframe (sandbox="allow-same-origin", scripts disabled entirely) — your markup and styles are rendered by the real browser engine in a live preview panel, and grading reads the actual resulting DOM and computed styles, not a text diff.
Gamification, without imitating any specific platform An original visual identity built around a molten gold-to-amber gradient, XP and level progression across named ranks, daily streaks, a hex-map style world progression screen called the Forge Path with a track switcher for moving between JavaScript, HTML, and CSS, boss battles with a health bar and limited hearts, and a set of medallions (achievements) covering completion, accuracy, streaks, and exploration milestones across all three tracks.
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.
WebForge 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.
WebForge 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 Sandboxed-iframe execution (JavaScript console + HTML/CSS live preview) and the code editor component
course.js Track-aware 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 JavaScript track: lesson, boss battle, and final exam content for each world
html1.js ... html7.js HTML track: lesson, boss battle, and final exam content for each world
css1.js ... css6.js CSS track: 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 — tagged with a track of js, html, or css — describing its lessons, boss battle, and exam onto a shared array; course.js filters and sorts by track and provides the lookup and unlock-state API on top of it. Every track's first world is unlocked from the start, so the tracks are genuinely independent rather than gated behind one another. Adding a new world or lesson means adding data, not touching the engine.
Execution has two modes, chosen per stage by a mode field. JavaScript stages build a full HTML document per run (learner code plus console/error/prompt shims), assign it to a sandboxed iframe's srcdoc (allow-scripts allow-modals), and listen for postMessage events tagged with a unique run ID to stream output back and detect completion — a short grace period after the completion signal absorbs the normal latency of cross-frame messaging so no output is lost. HTML and CSS stages take a simpler path: the learner's markup (or CSS combined with the exercise's fixed HTML skeleton) is assigned directly to a second sandboxed iframe with scripting disabled entirely (allow-same-origin only), so the parent can read the rendered contentDocument synchronously once the iframe's load event fires — no messaging, no race conditions, and no way for a lesson's markup to execute a script. Each run gets a fresh iframe, so there is no shared state between runs. A ten-second watchdog reports a friendly timeout message if a JavaScript run never finishes (for example, an infinite loop).
Grading for code-execution stages depends on the track. JavaScript stages capture the run's console output and check it against an expected output string, a minimum output-line count, or a set of JavaScript boolean expressions evaluated in the same scope as the learner's code. HTML and CSS stages use that same boolean-expression mechanism, but evaluated against the live preview instead — document and getComputedStyle inside a check expression refer to the rendered iframe, so a check can assert things like a specific element existing with specific text, or a specific computed color or layout property.
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. A stable internet connection is required for the first load of each external asset (fonts, icons, and the syntax highlighter); after that, normal browser caching keeps the application usable offline.
MIT License. See LICENSE for the full text.