Programming Crash Course

Learn a concept, then try it

I’m turning a programming crash course into an interactive learning environment. The original material introduces programming through explanations, analogies, and small examples for learners aged ten and older. The web application keeps that teaching sequence and puts a place to experiment beside it.

The course has Python, JavaScript, TypeScript, and Ruby tracks. Each follows the same progression through values, operators, variables, expressions, functions, conditionals, loops, and more. Switching languages lets a learner see how a familiar idea is expressed in another syntax.

Keeping the lesson and the experiment together

Code snippets have Run controls that send examples to the integrated REPL. A learner can inspect the result, change the input, and try again without setting up a local development environment or leaving the lesson.

The REPL can be docked and resized so that the explanation and the experiment remain visible together. Lesson navigation and language selection are part of the same interface, rather than separate tools the learner has to coordinate.

Different runtimes behind one interface

The application uses Vue and TypeScript. Its language runtime service gives the lesson interface a common way to create sessions, execute code, and display results, while each language keeps its own execution path:

• Python runs through Pyodide in the browser.
• Ruby uses CRuby compiled to WebAssembly.
• JavaScript uses a stateful REPL implementation with MathJS support.
• TypeScript is transpiled to JavaScript before execution in the JavaScript REPL.

The runtime work includes preserving state between examples, capturing printed output, and showing execution errors in the context of a lesson. Those details matter when the person using the tool is learning what a variable or function means for the first time.

Teaching is part of the implementation

The content is organized into language-specific lesson modules with a shared structure. The challenge is to keep explanations and examples consistent while respecting the differences between the languages.

This is an interactive prototype that I’m continuing to develop. The work combines curriculum writing, interface design, content processing, and browser-based language execution. The course needs to make both the idea and the result understandable.