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 stands for HyperText Markup Language and CSS for Cascading Style Sheets.

The split is deliberate. It exists so each concern can change without breaking the others, letting a designer restyle a whole site by editing CSS alone and a developer add behavior without touching the content.

Working engineers live inside this separation every day, because most bugs start with figuring out which of the three layers is misbehaving.

You already know JavaScript from earlier courses. This course teaches HTML and CSS from zero, then connects your JavaScript to real pages.

A browser, meaning Chrome, Firefox, or 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.

Changing a font and a background color

A designer changing a page's font and background color edits CSS.

Appearance is CSS's whole job. HTML would only change what content exists, and JavaScript would only change what the page does in response to actions.

Getting this mapping automatic is the first real skill of web work, because it turns a vague bug report into a single file to open.

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, JavaScript examples are plain console.log programs so you can follow the logic, and HTML/CSS examples are shown as labelled HTML, CSS, and JavaScript blocks that a browser would combine into one page.

The one layer a page cannot skip

The indispensable layer is HTML.

HTML carries the content itself. CSS and JavaScript enhance a page, and with no HTML there is nothing to style and nothing to script.

That ordering is also a design principle. Building the HTML first and layering the other two on top means the page degrades into something readable rather than something blank when a stylesheet or script fails to load.