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

Every website you've ever visited — including this one — is built from the same three languages. They do three completely different jobs, and understanding the split is the moment web development stops being confusing.

The house analogy

Think of a website as a house:

HTML is the structure — the rooms, walls, doors. "Here's a heading, here's a paragraph, here's a button."
CSS is the decoration — paint, wallpaper, furniture, lighting. "The heading is blue and big, the button is rounded, the page has margins."
JavaScript is the electricity — the wiring that makes things happen. "When you click the button, open a menu."

You need all three for a modern site. A structure with no style is ugly but works; a styled structure with no JS is pretty but static; JS is what brings it to life.

HTML: the skeleton

HTML (HyperText Markup Language) defines what's on the page. It's not really a programming language — it's a markup language. It wraps content in tags:

<h1>Welcome to VelsTech</h1>
<p>This is a paragraph of text.</p>
<button>Click me</button>

Each tag describes its content: <h1> is the main heading, <p> is a paragraph, <img> is an image, <a> is a link. The browser reads this structure and knows how to lay the page out.

CSS: the appearance

CSS (Cascading Style Sheets) controls how it looks. It selects elements and applies styles:

h1 {
  color: #4cc2ff;
  font-size: 3rem;
}

button {
  background: #4cc2ff;
  border-radius: 8px;
  padding: 12px 24px;
}

The name "cascading" means styles apply in layers and can inherit. One CSS rule can restyle every heading on the site at once — that's why CSS makes redesigns a one-file job.

JavaScript: the behavior

JavaScript makes the page do things. It's the only one of the three that's a true programming language with logic:

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

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

JS can read and change the page after it loads, react to clicks and keystrokes, fetch data from servers, and build entire apps. This page's theme toggle and color palette? That's JavaScript at work.

How they fit together in a file

<!DOCTYPE html>
<html>
<head>
  <style>              <!-- CSS here -->
    body { background: #0b0f14; }
  </style>
</head>
<body>
  <h1>Hello!</h1>       <!-- HTML here -->
  <script>             <!-- JavaScript here -->
    alert("Hi");
  </script>
</body>
</html>

In real sites these live in separate files (index.html, styles.css, script.js) and link together — exactly how this site is organized.

Why each one matters

Layer          Job                 Who touches it
──────────────────────────────────────────────
HTML           Structure/content   Everyone (even non-coders can read it)
CSS            Look and feel       Design-minded people love this
JavaScript     Behavior/logic      Programmers

How to start

You can start right now with nothing but a text editor and a browser:

Open Notepad/VS Code and write a few HTML tags.
Save as index.html and open it in your browser.
Add a <style> block and change some colors.
Add a <script> block and make a button show a message.

That's the entire stack of the classic web, in about twenty minutes. HTML says what it is, CSS says how it looks, JavaScript says what it does. Master that trio and you're building websites — like the one you're reading right now.