How Computers Run Your Code
What actually happens between typing a line of code and seeing a result on screen.
What you'll learn
- Describe the path from source code to a running program
- Explain the difference between an interpreted language and a compiled one
- Explain what a browser's rendering engine does with HTML
Explanation
Every app you have ever used, from a calculator to a chat app, boils down to the same basic loop: a device reads instructions, and its processor carries them out one step at a time, extremely fast.
Source code is a to-do list for a machine. You write it in a language designed for humans to read — like JavaScript, Python, or HTML. Computers don't understand that text directly. Something has to translate it.
There are two common translation strategies:
- Compiled languages (like C++ or Go) are translated entirely into machine code ahead of time, producing a program the CPU can run directly.
- Interpreted languages (like Python and JavaScript) are translated line by line, while the program runs, by another program called an interpreter (or a "runtime").
Your browser contains a JavaScript interpreter (for logic) and a rendering engine (for HTML and CSS). The rendering engine reads HTML and builds a tree of objects called the DOM (Document Object Model), reads CSS and figures out how each object should look, and then paints pixels to your screen. JavaScript can change the DOM after the fact — that's what makes a page interactive instead of just a static document.
You do not need to memorize CPU architecture to build software. You do need this mental model: text you write → translated by a runtime → instructions a machine executes → visible result. Every bug you'll ever debug lives somewhere in that pipeline.
From source code to screen
Source code → Interpreter/Compiler → Machine instructions → CPU executes → (for web pages) Rendering engine paints the DOM to pixels on screen.
Example
A minimal HTML page. The browser's rendering engine turns this text into a heading and a paragraph on screen.
<!doctype html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello, browser!</h1>
<p>This paragraph exists because the rendering engine read this text.</p>
</body>
</html>Try it yourself
Change the heading text or add a second paragraph, then press Run.
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Guided exercise
Guided exercise
Add a second heading `<h2>How I run code</h2>` and a paragraph describing one program you use daily, inside the `<body>`.
Checks: Page still has exactly one <h1> · Page has at least one <h2> · Page has at least one <p>
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Stuck? Get a hint.
Independent exercise
Independent exercise
Build a small page with one <h1>, exactly three <p> paragraphs, and one <ul> unordered list containing at least two <li> items describing steps code takes to run.
Checks: Exactly one <h1> · Exactly three <p> paragraphs · Exactly one <ul> · plus 1 hidden check
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Stuck? Get a hint.
Common mistakes
- Assuming Python and JavaScript run the same way just because both are 'interpreted' — their runtimes, standard libraries, and execution environments differ completely.
- Forgetting to close HTML tags, which can make a rendering engine guess your structure incorrectly.
- Confusing the DOM (a live, in-memory tree) with the original HTML text (a static file).
Knowledge check
Takeaway
Every program you write is text that a runtime translates into machine instructions — keeping that pipeline in mind makes debugging far less mysterious.
Summary
Source code is translated by an interpreter or compiler into instructions a CPU executes. In browsers, a rendering engine turns HTML and CSS into the DOM and pixels on screen, and JavaScript can change that DOM afterward.
References
Your notes
Notes save automatically.
Finished this lesson?
Mark it complete to track your progress and schedule a future review.
AI tutor
The optional AI tutor isn't enabled in this deployment. All lessons, exercises, quizzes, and search work fully without it.