HTML, CSS & JavaScript: The House Analogy

You'll often hear JavaScript mentioned alongside two other technologies: HTML and CSS. Together, these three are the building blocks of every website. Each one has a different job, and the easiest way to understand them is to imagine building a house.

HTML (HyperText Markup Language) is the structure of the house. The walls, the floors, the doors, the windows. It says what things are: "this is a heading," "this is a paragraph," "this is a button," "this is an image."

CSS (Cascading Style Sheets) is the decoration. The paint, the wallpaper, the curtains, the furniture arrangement. It says what things look like: "make the heading big and blue," "put the button on the right," "use a nice font."

JavaScript is the electricity and plumbing. It makes the house do things. When you flip a switch, the light comes on. When you press the doorbell, it rings. When you turn the tap, water comes out. JavaScript says how things behave: "when someone clicks this button, show a message."

Here's a tiny taste of each (don't worry about understanding the details yet):

<button>Click me!</button>

That's HTML. It creates a button. A plain, boring button.

button {
  background: hotpink;
  font-size: 24px;
}

That's CSS. It makes the button big and hot pink. Fabulous.

const button = document.querySelector("button");

button.addEventListener("click", () => {
  alert("You clicked me! 🎉");
});

And that's JavaScript. It makes the button actually do something when you click it: it pops up a message.

Without JavaScript, a web page is like a beautifully decorated house with no electricity. Nice to look at, but you can't do much in it.