HTML, CSS and JavaScript: what does each one do?

When you start in web development, you hear HTML, CSS, and JavaScript all the time, but it's not always clear what each one does. Let's use a house analogy.

HTML: the structure

HTML (HyperText Markup Language) is the skeleton of the house: the walls, the doors, the rooms.

<h1>My house</h1>
<p>This is the living room.</p>

CSS: the decoration

CSS (Cascading Style Sheets) is the paint, furniture, and decoration. It defines colors, sizes, and layout.

h1 {
  color: teal;
  font-size: 2rem;
}

JavaScript: the electricity and interaction

JavaScript is what makes things work and react: turning on a light when you flip a switch, opening the garage door, etc.

document.querySelector('button').addEventListener('click', () => {
  alert('You clicked!');
});

Summary

With these three, you can already build any web page. In the next tutorial we'll build your first page from scratch.