🎯 Lesson Objectives

By the end of this lesson, you will:

Understand the specific role of HTML, CSS, and JavaScript
Recognize basic code snippets for each technology
Know which technology to use for different tasks
See how they work together to create websites

📖 The Web Trinity

Every website you've ever visited is built with three core technologies working together:

The Formula

HTML + CSS + JavaScript = Every Website on Earth

Think of building a house:

Technology	Role	House Analogy
HTML	Structure & Content	Walls, floors, rooms, doors
CSS	Visual Style	Paint, furniture, decorations
JavaScript	Behavior & Interaction	Electricity, plumbing, smart home features

🦴 HTML: The Skeleton

What It Is:

HTML (HyperText Markup Language) defines the structure and content of a webpage.

It answers the question: "WHAT is on this page?"

What HTML Contains:

Text (headings, paragraphs)
Images
Links
Buttons
Forms
Lists
Tables
Videos

What HTML Looks Like:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to My Site!</h1>
    <p>This is a paragraph of text.</p>
    <img src="photo.jpg" alt="A nice photo">
    <button>Click Me</button>
    <a href="https://google.com">Visit Google</a>
</body>
</html>

Reading HTML - The Basics:

Code	What It Creates
`<h1>...</h1>`	A big heading (h1 = most important)
`<p>...</p>`	A paragraph of text
`<img src="...">`	An image
`<button>...</button>`	A clickable button
`<a href="...">...</a>`	A link to another page
`<div>...</div>`	A container/section

Key Insight

HTML by itself looks very plain — like a Word document with no formatting. That's where CSS comes in.

🎨 CSS: The Clothing

What It Is:

CSS (Cascading Style Sheets) controls the visual appearance of a webpage.

It answers the question: "HOW does this page look?"

What CSS Controls:

Colors (text, backgrounds, borders)
Sizes (width, height, font size)
Spacing (margins, padding)
Fonts (typeface, weight, style)
Layout (where things are positioned)
Animations and transitions
Responsive behavior (mobile vs desktop)

What CSS Looks Like:

CSS

/* Make the heading blue and big */
h1 {
    color: blue;
    font-size: 48px;
    text-align: center;
}
 
/* Style the paragraph */
p {
    color: gray;
    font-size: 18px;
    line-height: 1.6;
}
 
/* Make the button look nice */
button {
    background-color: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
 
/* Change button on hover */
button:hover {
    background-color: #357ABD;
}

Reading CSS - The Basics:

Property	What It Controls
`color`	Text color
`background-color`	Background fill
`font-size`	How big the text is
`padding`	Space inside an element
`margin`	Space outside an element
`border`	Border around an element
`border-radius`	Rounded corners
`width` / `height`	Size of element

Key Insight

CSS transforms plain HTML into beautiful designs. The same HTML can look completely different with different CSS.

⚡ JavaScript: The Brain

What It Is:

JavaScript (JS) adds behavior and interactivity to a webpage.

It answers the question: "WHAT does this page do?"

What JavaScript Does:

Responds to user actions (clicks, typing, scrolling)
Updates content without reloading
Validates form inputs
Creates animations and effects
Fetches data from servers
Stores data locally
Controls media playback

What JavaScript Looks Like:

JavaScript

// When the button is clicked, show an alert
const button = document.querySelector('button');
 
button.onclick = function() {
    alert('Hello! You clicked the button!');
};
 
// Change the heading text when clicked
const heading = document.querySelector('h1');
 
heading.onclick = function() {
    heading.textContent = 'You clicked me!';
};
 
// Count button clicks
let clickCount = 0;
 
button.onclick = function() {
    clickCount = clickCount + 1;
    button.textContent = 'Clicked ' + clickCount + ' times';
};

Reading JavaScript - The Basics:

Code	What It Does
`const x = ...`	Creates a variable that won't change
`let x = ...`	Creates a variable that can change
`document.querySelector('...')`	Finds an element on the page
`element.onclick = function() {...}`	Runs code when clicked
`alert('...')`	Shows a popup message
`console.log('...')`	Prints to developer console

Key Insight

Without JavaScript, websites would be static documents. JavaScript makes them interactive applications.

🔗 How They Work Together

Text

┌─────────────────────────────────────────────────────────┐
│                     WEB PAGE                             │
├─────────────────────────────────────────────────────────┤
│                                                          │
│   HTML (Structure)                                       │
│   "There is a button here"                               │
│        │                                                 │
│        ▼                                                 │
│   CSS (Style)                                            │
│   "The button is blue, rounded, and centered"            │
│        │                                                 │
│        ▼                                                 │
│   JavaScript (Behavior)                                  │
│   "When clicked, the button shows a message"             │
│                                                          │
└─────────────────────────────────────────────────────────┘

🎮 Complete Example

HTML

<button id="myButton">Click Me</button>
<p id="message"></p>

🧠 The Memory Aid

HTML  → WHAT is there     (structure/content)
CSS   → HOW it looks      (style/appearance)
JS    → WHAT it does      (behavior/interaction)

Quick Diagnostic:

If This Is Broken...	Check This Technology
Content is missing	HTML
Page looks ugly/plain	CSS
Buttons don't work	JavaScript
Layout is wrong	CSS (or HTML structure)
Form doesn't submit	JavaScript
Images don't show	HTML (src attribute)
Colors are wrong	CSS

🎮 Interactive Exercise

Identify which technology (HTML, CSS, or JS) is primarily involved:

✅ Technology Identification

0/8

✅ Lesson Summary

The Web Trinity

Technology	Role	Analogy	Question It Answers
HTML	Structure	Skeleton/Frame	WHAT is there?
CSS	Style	Clothing/Decor	HOW does it look?
JavaScript	Behavior	Brain/Nervous System	WHAT does it do?

For Vibe Coding:

When prompting AI, specify which technologies you need:

"Create an HTML structure for..." (just content)
"Add CSS to make it..." (just styling)
"Add JavaScript to..." (just behavior)
"Create a complete webpage with..." (all three)

📝 Mini Quiz

📝 Check Your Understanding

1/3

Which technology defines WHAT is on a page?