What is DevLearn?

DevLearn is a single-file, offline-first learning platform. No dependencies, no backend - everything runs in your browser.

💡 One HTML file. Open it, learn, build.

Key Features

Feature	Description
In-browser C++ Compiler	Real GCC via Piston API
Practice Mode	Daily exercises, XP rewards
Subjects and Languages	Course XP bars and per-course levels
Projects	Guided real-world builds
XP + Streaks	Gamified progress system

What You Can Build

DevLearn is designed to help any learner go from guided lessons to real projects. The exact result depends on how many tracks you finish, how much practice you do, and whether you build outside the lessons too.

What You Can Build Now

With the current course set, learners can build real beginner-to-intermediate projects across several areas:

Area	Examples
Apps & Websites	Portfolio sites, dashboards, forms, small APIs, database-backed tools
Programming Tools	File organizers, CLIs, interpreters, debuggable utilities, build templates
Game Tech	2D engine systems, animation controllers, physics sandboxes, AI pathfinding demos
Systems Projects	Toy browsers, OS experiments, schedulers, allocators, networking prototypes
Visual & Audio Experiments	Shader demos, UI mockups, sound mixers, gameplay simulations

What Learners Can Build After Finishing Most Courses

After finishing most of the platform and building the projects, someone could usually make:

Small full-stack apps, hobby game engines, browser prototypes, automation tools, interpreters, networking experiments, and polished portfolio projects.

At that point, DevLearn supports learners who want to build software that feels more serious than tutorial-only projects:

Level	Typical Outcomes
Intermediate Builder	Can ship small apps, tools, or game systems without step-by-step guidance
Advanced Hobbyist	Can build structured engines, simulations, or systems prototypes with multiple subsystems
College-style Foundation	Understands the core ideas behind algorithms, systems, graphics, networking, and architecture

What Moves Someone Toward Professional Level

DevLearn can provide a strong foundation, but professional-level growth usually comes from combining the platform with larger builds and deeper engineering habits.

Next Step	Why It Matters
Larger long-term projects	Teaches architecture, maintenance, tradeoffs, and debugging under real pressure
Testing and profiling	Turns working code into reliable and efficient code
Team workflows	Introduces code review, version control discipline, collaboration, and release practice
Specialization	Helps learners go deeper in systems, web, graphics, tools, security, or game tech

The short version: DevLearn can take a learner from beginner projects to serious hobby software and college-style foundations, especially when paired with consistent project work.

Mini Quiz

Quick knowledge checks help learners review the platform without leaving the docs.

Quick Check

Which area is best for learning algorithms, runtime analysis, and classic problem solving?

File Structure

All data is in the JS block at the bottom: COURSES, PROJECTS, PRACTICE_MODULES, and COURSE_AREAS.

Adding a Lesson

{ name: "Hello World", steps: [ { type:"learn", title:"Title", body:"Content", code:"..." }, { type:"quiz", question:"?", options:["A","B","C","D"], answer:1 }, { type:"fill", question:"Complete: ___", answer:"cout", hint:"hint" }, { type:"code", title:"Try It", body:"Task", starterCode:"..." } ] }

Quiz Types

Type	Fields
`learn`	title, body, code?
`quiz`	question, options[], answer (index)
`fill`	question, answer, hint?
`code`	title, body, starterCode?

XP System

Action	XP
Learn step	+5
Correct quiz/fill	+10
Lesson complete bonus	+course.xpPerLesson
Practice session	+15-30

Progress is stored in localStorage, so your browser can restore it after you close and reopen the tab.

Welcome to DevLearn 👋

Daily Practice