A fully client-side, zero-dependency interactive coding environment for learning HTML, CSS, and JavaScript. No servers. No npm. No build tools. Open index.html and start coding.
🌐 Live Demo: arghya29.github.io/DevForge
┌─────────────────────────────────────────────────────────────────────┐
│ ⚡ DevForge [HTML] [CSS] [JS] Auto 0/16 ░░░░ Aa ⌨ ▶ Run │
├────────────┬──────────────────────────┬───┬────────────────────────┤
│ │ 1 <!DOCTYPE html> │ │ 🟢 LIVE PREVIEW │
│ Curriculum │ 2 <html lang="en"> │ │ │
│ ───────── │ 3 <head> │ │ Hello, World! │
│ ● Lesson 1 │ 4 <title>…</title> │ ↔ │ │
│ ○ Lesson 2 │ 5 </head> │ ├────────────────────────┤
│ │ 6 <body> │ │ CONSOLE │
│ │ 7 <h1>Hello!</h1> │ │ › Page loaded! │
│ XP: 20 ├──────────────────────────┤ │ │
│ 🔥 1 streak│ 📖 What is an element? │ │ │
└────────────┴──────────────────────────┴───┴────────────────────────┘
Visit arghya29.github.io/DevForge — nothing to install.
git clone https://github.com/arghya29/DevForge.git
cd DevForge
open index.html # macOS
xdg-open index.html # Linux
start index.html # WindowsNo npm install. No build step. It just works.
DevForge/
├── index.html # Pure HTML structure — zero inline styles or scripts
├── styles.css # All CSS — variables, layout, components, animations
├── curriculum.js # All 16 lesson objects with starter code + instructions
├── app.js # All application logic — editor, preview, XP, shortcuts
│
├── README.md
├── LICENSE # Apache 2.0
├── CONTRIBUTING.md # How to add lessons and contribute
├── CODE_OF_CONDUCT.md # Contributor Covenant v2.1
├── CHANGELOG.md # Version history
├── package.json # Dev tools (ESLint, Prettier, html-validate)
├── eslint.config.js # ESLint rules
├── .prettierrc # Prettier formatting config
├── .prettierignore # Files Prettier should skip
├── .html-validate.json # HTML validator config
├── .gitignore
│
└── .github/
├── workflows/
│ ├── ci.yml # CI checks on PRs to dev + pushes to dev & main
│ └── deploy.yml # Auto-deploys to GitHub Pages on push to main
├── PULL_REQUEST_TEMPLATE.md
└── ISSUE_TEMPLATE/
├── bug_report.md
└── feature_request.md
| File | Role |
|---|---|
index.html |
Skeleton only — every panel, button, modal defined here |
styles.css |
Every CSS rule — variables, layout grid, components, animations |
curriculum.js |
Single CURRICULUM array — add new lessons here, nothing else changes |
app.js |
Brain — sidebar, editor, run/preview, console, XP, keyboard shortcuts |
📖 Detailed architecture and API docs: ARCHITECTURE.md, API.md
| # | Lesson | XP |
|---|---|---|
| 01 | Your First Element | 20 |
| 02 | Headings & Paragraphs | 20 |
| 03 | Lists & Links | 20 |
| 04 | Images & Attributes | 20 |
| 05 | Forms & Inputs | 30 |
| # | Lesson | XP |
|---|---|---|
| 01 | Selectors & Specificity | 25 |
| 02 | The Box Model | 25 |
| 03 | Flexbox Layout | 30 |
| 04 | CSS Grid | 30 |
| 05 | Transitions & Animations | 35 |
| # | Lesson | XP |
|---|---|---|
| 01 | Variables & Types | 25 |
| 02 | Functions | 25 |
| 03 | Arrays & Loops | 30 |
| 04 | DOM Manipulation | 30 |
| 05 | Fetch & Async/Await | 40 |
| 06 | Build a Todo App (capstone) | 50 |
| Feature | Detail |
|---|---|
| Live Preview | Runs inside a sandboxed <iframe> — no server needed |
| Mobile Layout | Responsive sidebar with ☰ toggle; touch-friendly drag resizer |
| Console Panel | Intercepts console.log/warn/error via postMessage from iframe |
| Code Buffers | Each lesson remembers your edits independently in memory |
| State Persistence | XP, streak, autorun, and font size survive page reloads |
| XP & Streak | Points awarded on first run of each lesson |
| Auto-run | Preview updates 0.9s after you stop typing |
| Preview Sizes | Desktop / Tablet (768px) / Mobile (390px) |
| Drag Resizer | Resize editor vs preview split |
| Lesson Search | Filter sidebar lessons in real time |
| Font Size | Slider from 11px to 20px |
| Auto-indent | Enter key matches current line indentation |
| Auto-close | Brackets and quotes auto-close as you type |
| PWA Offline | Installable as standalone app; works offline once loaded |
| Keyboard Shortcuts | Full set — see table below |
| Dark/Light Theme | Toggle between dark and light mode with a persistent preference |
| Completion Confetti | Celebration when all 16 lessons are done |
| Shortcut | Action |
|---|---|
Ctrl + Enter |
Run code |
Ctrl + ] |
Next lesson |
Ctrl + [ |
Previous lesson |
Ctrl + 1 |
Switch to HTML tab |
Ctrl + 2 |
Switch to CSS tab |
Ctrl + 3 |
Switch to JS tab |
Ctrl + Shift + R |
Reset code to starter |
Ctrl + Shift + C |
Copy all code |
Ctrl + Z |
Undo last edit |
Ctrl + Y |
Redo last undo |
Ctrl + Shift + Z |
Redo last undo |
Escape |
Close any open panel |
contributor fork
│
▼
feature branch
│
▼ Pull Request (CI checks run here)
dev ◄─────── all PRs target dev
│
▼ Push to main (CI checks run again)
main ──► GitHub Pages auto-deploys
- All pull requests must target
dev— nevermaindirectly - CI checks run on every PR to
devand every push todevandmain mainis always the clean, deployed version
Deploying on GitHub Pages is the right choice for DevForge — it's 100% static, needs no server, and the included deploy.yml workflow auto-deploys every push to main.
- Go to your repo → Settings → Pages
- Under Source → select GitHub Actions
- Push any commit to
main— the workflow triggers automatically - Live at
https://arghya29.github.io/DevForge/
Contributions are welcome! All PRs must target the dev branch.
Read CONTRIBUTING.md for the full guide. Quick version:
git clone https://github.com/arghya29/DevForge.git
cd DevForge
git checkout dev
# make your changes
git checkout -b feature/your-feature-name
# open a PR targeting devTo add a lesson, open curriculum.js and add an object to any chapter's lessons array:
{
id: "html-06",
tag: "HTML",
title: "Semantic Elements",
xp: 25,
paneTitle: "06 · Semantic Elements",
instruction: `<h2>Writing meaningful HTML</h2>
<p>Use <code><header></code> and <code><main></code>
instead of generic divs.</p>
<div class="hint-box">💡 Try adding a <nav> element!</div>`,
html: `<!DOCTYPE html>\n<html>\n<body>\n <header>My Site</header>\n</body>\n</html>`,
css: `body { font-family: sans-serif; padding: 20px; }`,
js: ``
}The sidebar, progress bar, and nav buttons update automatically.
This project welcomes contributions via:
- GSSoC (GirlScript Summer of Code)
- Hacktoberfest — PRs in October count
- KWOC (Kharagpur Winter of Code)
- Script Winter of Code
- Add a new HTML lesson (semantic elements, tables, multimedia)
- Add a new CSS lesson (custom properties, media queries)
- Add a new JS lesson (objects, classes, localStorage)
- Fix a typo in any lesson instruction
- Improve mobile layout of the sidebar
Why no frameworks?
DevForge is a tool for people learning their first lines of code. A node_modules folder or webpack config would be intimidating and irrelevant. Pure HTML/CSS/JS keeps the project inspectable and educational.
How does the console panel work?
The preview runs in a sandbox="allow-scripts" iframe. Sandboxed iframes can't access the parent window directly, so the app overwrites console.log/warn/error inside the iframe to fire postMessage to the parent, which renders each call in the console panel.
Why is curriculum.js separate from app.js?
A teacher or contributor can add lessons by touching only curriculum.js — with zero risk of breaking app logic.
Licensed under the Apache License 2.0.
Free to use, modify, and distribute — including commercially — as long as you include the original license notice and state any changes made to the source files.
Built with ⚡ by arghya29 and contributors