Front end languages

Think of a website as a house. To build it, you need three core frontend languages, each playing a completely different role: HTML (the skeleton), CSS (the interior design), and JavaScript (the electricity and plumbing).

1. HTML (HyperText Markup Language)

The Role: Structure

What it does: It defines the raw content of the webpage. It tells the browser what is a heading, a paragraph, an image, or a button.

Analogy: The wooden beams, walls, and concrete foundation of a house.

Example: <h1>This is a title</h1>

2. CSS (Cascading Style Sheets)

The Role: Presentation & Style

What it does: It makes the HTML look good. CSS controls the colors, fonts, layouts, spacing, and how the website adapts to mobile screens.

Analogy: The paint on the walls, the furniture, the wallpaper, and the size of the windows.

Example: h1 { color: blue; font-size: 24px; }

3. JavaScript (JS)

The Role: Behavior & Interactivity

What it does: It makes the webpage alive and dynamic. JS handles things that change without reloading the page, like pop-up menus, dark mode toggles, image sliders, or fetching live data.

Analogy: The light switches, smart home automation, and running water that react when you touch them.

Example: button.addEventListener('click', showAlert);

Summary Table