Unit 1 · Module 2

How They Work Together

Three languages, one system

You've got three separate jobs: HTML describes structure, CSS describes appearance, JavaScript describes behavior. But they only become an app when they work together.

The appointment button — all three layers

Step 1: HTML builds it

Structure

<button id="schedule-btn">Schedule Appointment</button>

HTML says "there's a button here, and its id is schedule-btn so we can find it later."

Step 2: CSS styles it

Appearance

#schedule-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

CSS says "make the background green, the text white, add padding so it's not cramped, round the corners."

Step 3: JavaScript makes it work

Behavior

document.getElementById("schedule-btn").addEventListener("click", function() {
  openAppointmentForm()
})

JavaScript says "when someone clicks this button, run the openAppointmentForm function."

Why they had to be three separate languages

If you tried to do all three in one language, it would be a mess. Imagine if HTML had to handle styling AND behavior:

Everything crammed into one tag (don't do this)

<button id="schedule-btn" color="green" padding="10px 20px" onclick="openAppointmentForm()">
  Schedule Appointment
</button>

Already messy. And that's just one button. Now imagine 50 buttons. All with slightly different behavior. Now imagine you need to change the green to blue everywhere. You'd have to touch the HTML on every single button instead of changing one CSS rule.

That's why they split them. Each language owns one concern. HTML owns structure. CSS owns appearance. JavaScript owns behavior. When each one does its job and only its job, the code stays manageable.

The pipeline in real time

When someone visits PetKarma and opens the page, this happens in order:

Browser downloads the HTML file
Browser reads the HTML and builds the structure (oh, there's a button here)
Browser downloads the CSS file and applies the styles (oh, that button is green)
Browser downloads the JavaScript file and attaches the behavior (oh, when that button gets clicked, do this)
User sees a green button on the screen
User clicks the button
JavaScript catches the click and runs the function
The appointment form opens

All three worked together. None of them could do it alone.

The old way — three separate files fighting each other

Before frameworks like Next.js, every single page had three separate files:

One page = three files

about.html
about.css
about.js

The HTML file described the structure. The CSS file styled it. The JavaScript file made it work. And they had to find each other and talk. In the HTML file, you'd explicitly say "go get this CSS file and this JavaScript file":

The old way — HTML referencing its companions

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="about.css">
  </head>
  <body>
    <h1>About Us</h1>
    <p>Welcome to our site</p>
    <button id="contact-button">Contact Us</button>

    <script src="about.js"></script>
  </body>
</html>

Then in the JavaScript file, you'd reach into the HTML and find things by their id:

JavaScript reaching into HTML

document.getElementById("contact-button").addEventListener("click", function() {
  alert("Contact form opening!")
})

Why this got messy — the fragility problem

Imagine your website grew. 50 pages. Each page had three files. That's 150 files.

Now imagine a developer renamed the button from contact-button to contact-btn in the HTML. But they forgot to update the JavaScript file.

The JavaScript would go looking for contact-button, couldn't find it, and silently fail. No error. No warning. The button would look fine. It would sit there. But clicking it would do nothing. You'd have to debug this by opening the browser's developer console and figuring out what went wrong.

Or imagine you wanted to reuse a button on multiple pages. You'd copy the HTML, copy the CSS, copy the JavaScript. Need to update how that button works? Update it in three places. Forget one? Inconsistent behavior across your site.

Interactive moment: Identify the layers

You go to Amazon. You see the search box at the top. You type "coffee mug" into it. A dropdown appears with suggestions. You click one. The search results load.

Which layer did what?

The search box existing and being in the right place? HTML
The search box being styled with a white background and magnifying glass icon? CSS
When you type and suggestions appear? JavaScript — it's listening to what you type, checking a database, and showing results
The search results page loading? JavaScript — it caught your click, sent your search to the backend, got results back, and displayed them

Every interaction you see on a webpage is one of those three layers doing its job. HTML made it. CSS made it look right. JavaScript made it respond.

Module 2 complete

You now understand:

HTML — the skeleton, describing what things are with tags
CSS — the skin, describing how things look with rules
JavaScript — the muscles, describing what happens when users interact
Why they're separate — each one owns one concern, keeps code manageable
How they work together — HTML builds it, CSS styles it, JavaScript makes it work
The old way vs the new way — from three files fighting each other to components that live together

Next up: JavaScript on its own terms. What variables, functions, and types actually are.