The 3 Pillars of the Web

</>

HTML

HyperText Markup Language

The structure — what's on the page

Analogy

🏗 The skeleton Like the frame of a house — it defines rooms, walls, and doors. Without it, there's nothing to build on.

What it does

Defines headings, paragraphs, images, links
Creates the structure browsers can read
Tells the page what elements exist
Uses tags like <h1> <p> <div>

Code

index.html

<header>
  <h1>🎬 Movie Explorer</h1>
  <p>Click an actor to see movies</p>
</header>

<section id="actors">
  <div class="card">
    <img src="brad.jpg" />
    <h2>Brad Pitt</h2>
  </div>
</section>

Live result

🎬 Movie Explorer

Click an actor to see movies

[ actor card ]

✦

CSS

Cascading Style Sheets

The design — how it looks

Analogy

🎨 The paint & furniture If HTML is the skeleton, CSS is everything you see — colors, fonts, spacing, shadows, animations.

What it does

Controls colors, fonts, and sizes
Positions elements on the page
Creates hover effects and animations
Makes pages responsive on any screen

Code

style.css

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  transition: transform .2s;
}

.card:hover {
  transform: translateY(-6px);
}

Live result — hover the cards

🎬
Brad Pitt

🎬
Tom Hanks

🎬
Scarlett J.

JS

JavaScript

ECMAScript / JS

The behavior — what it does

Analogy

⚡ The electricity HTML and CSS make a beautiful house — but JavaScript turns on the lights, opens the doors, and fetches data from the internet.

What it does

Responds to clicks, input, and events
Fetches live data from APIs (like TMDB)
Updates the page without refreshing
Handles logic, math, and conditions

Code

app.js

// Fetch movies from TMDB
async function loadMovies(actorId) {
  const data = await fetch(
    `/person/${actorId}/movie_credits`
  );
  const json = await data.json();
  renderMovies(json.cast);
}

Live demo — click the buttons

0

JavaScript updates the number instantly

The 3 Pillarsof the Web

🎬 Movie Explorer

The 3 Pillars
of the Web