The three languages hiding in every web page

Early on my roadmap comes the front end, the part of a website people actually see and touch. What surprised me when I started was that it is not one thing. Every page is three languages stacked together, each with a job so specific that mixing them up is the first mistake beginners make. Get the split clear and the rest of front-end learning stops feeling like a pile of random syntax.

A page is built like a house

Picture building a house. First the frame goes up: walls, floors, doorways, the structure that decides what exists and where. Then paint, tiles and lighting make it look like somewhere you want to be. Finally the electricity makes switches and appliances actually do something.

A web page is built the same way, in the same order, by three different languages.

flowchart LR
  H[HTML<br/>structure] --> C[CSS<br/>looks]
  C --> J[JavaScript<br/>behaviour]
  J --> P[The page you use]

• HTML (HyperText Markup Language) is the frame. It says what is on the page and what each piece is: this is a heading, this is a paragraph, this is an image, this is a button. No colours, no behaviour, just structure and meaning.
• CSS (Cascading Style Sheets) is the paint and layout. It decides how the HTML looks: colours, fonts, spacing, and how the page rearranges itself to fit a phone screen instead of a laptop.
• JavaScript is the electricity. It makes things happen: a button that opens a menu, a form that checks your email before you submit, content that updates without reloading.

To make that concrete, here is the same button as each language adds its layer. First HTML alone, just structure, no styling:

<button>Add to cart</button>
<p>2 items in your cart</p>

Now CSS gives it a look:

<style>
  button { background: #275350; color: #fff; border: 0;
           padding: 10px 18px; border-radius: 6px; font-size: 15px; }
  p { color: #7A5512; }
</style>
<button>Add to cart</button>
<p>2 items in your cart</p>

And JavaScript makes it actually do something. Click the button:

<button onclick="count++; label.textContent = count + ' items in your cart'">
  Add to cart
</button>
<p id="label">0 items in your cart</p>
<script>let count = 0</script>

Same button, three layers. Here is the split written out:

Keeping the three in separate files is not fussiness, it is maintenance. When the looks live in CSS and the structure lives in HTML, you can restyle a whole site without touching what it says, and fix what it says without breaking how it looks.

Then JavaScript grew guardrails

Here is the twist that confuses newcomers: you will keep hearing about a fourth thing, TypeScript, and wonder if it is a separate language to learn. It mostly is not.

JavaScript has one well-known weakness. It only notices a mistake when the code actually runs, which often means when a user is already on the page. If you expected a number and got the word “seven”, JavaScript happily carries on and breaks something three steps later, far from the real cause.

TypeScript is JavaScript with a safety layer added on top. You label what kind of value each thing is meant to be (a number, a piece of text, a list), and it checks those labels as you type, flagging the mismatch before you ever run the code. It is a “superset”, meaning every bit of JavaScript you already know is still valid, TypeScript just adds the guardrails.

function price(qty) {        // JavaScript: qty could be anything
  return qty * 10
}
price("two")                 // runs, returns "NaN", breaks later, far away

function priceTS(qty: number) {  // TypeScript: qty must be a number
  return qty * 10
}
priceTS("two")               // flagged as you type, before it ever runs

The tools you actually touch

Good news for this stop: the core tools are free and you already have most of them.

Three jobs, not one big blur

The lasting lesson from this stop is the split itself. A front end feels overwhelming when it looks like one giant thing you have to master. It is not. It is structure, then looks, then behaviour, three separate jobs you can learn one at a time, plus an optional safety layer for when the behaviour gets serious. Every framework you meet later is just a fancier way of arranging these same three.

Learn the three jobs, and the front end stops being a blur.

Sources

• freeCodeCamp: HTML, CSS and JavaScript explained for beginners for the structure, style, behaviour split and learning order
• Boot.dev: HTML vs CSS vs JavaScript for what each language is and is not for
• Software Mind: the differences between TypeScript and JavaScript for TypeScript as a typed superset and when it pays off