Three languages, one page

Three languages, one page

Every web page you have ever visited is built from three languages, and each one has exactly one job:

• HTML (HyperText Markup Language) describes the page's structure and content: this is a heading, this is a paragraph, this is a button.
• CSS (Cascading Style Sheets) describes the page's appearance: colors, fonts, spacing, layout.
• JavaScript describes the page's behavior: what happens when you click, type, or scroll.

The split is deliberate. It exists so that each concern can change without breaking the others: a designer can restyle a whole site by editing CSS alone, and a developer can add behavior without touching the content. Working engineers live inside this separation every day — most bugs start with figuring out which of the three layers is misbehaving.

You already know JavaScript from earlier courses. In this course you learn HTML and CSS from zero, then connect your JavaScript to real pages.

A browser (Chrome, Firefox, Safari) is the program that reads all three and turns them into the pixels on your screen.

The same button, three ways

Here is one button described by all three languages. Do not worry about the syntax yet, just notice who does what.

HTML says what it is:

<button>Save</button>

CSS says what it looks like:

button {
  background: gold;
  border-radius: 8px;
}

JavaScript says what it does:

button.addEventListener("click", () => {
  console.log("Saved!");
});

Remove the CSS and the button still works, it just looks plain. Remove the JavaScript and it still looks fine, it just does nothing. HTML is the only mandatory layer: no HTML, no page.

JavaScript in the browser

So far you have probably run JavaScript as a standalone program: it reads input, prints output, and exits.

In the browser the same language runs inside a page. Instead of printed text being the whole result, your code can reach into the page and change it: swap text, hide elements, react to clicks.

Two things stay exactly the same:

• The language itself. Variables, functions, arrays, and objects all work identically.
• console.log. It prints to the browser's console, a hidden panel you will open in lesson 9-1.

In this course, runnable exercises are plain console.log programs so you can practice the logic, and HTML/CSS exercises use a live sandbox: you edit the code and the page preview updates.