1.2 How the Web Works

Time: ~25 minutes

What You'll Learn

• What actually happens when you type a URL and hit enter
• The three languages of the web: HTML, CSS, and JavaScript
• How they work together (and what breaks when they don't)
• Why this matters for your AI-generated code

The Big Picture

Every website you've ever visited is built from three things:

• HTML -- The structure (what's on the page)
• CSS -- The style (how it looks)
• JavaScript -- The behavior (what it does)

That's it. Every single website. Facebook, Google, that side project your AI helped you build -- all three ingredients.

What a Browser Actually Does

When you type a URL and hit enter, here's what happens:

1. Your browser asks a server "Hey, can I have the files for this website?"
2. The server sends back HTML, CSS, and JavaScript files
3. Your browser reads the HTML to build the page structure
4. It applies the CSS to make it look right
5. It runs the JavaScript to make it interactive

HTML: The Structure

HTML is just labeled content. Every piece of text, image, button, and link on a page is wrapped in an HTML tag that says what it is.

<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
<button>Click me</button>
<img src="photo.jpg" alt="A photo" />

Think of HTML like the blueprint of a house. It says "there's a door here, a window there, a wall here." It doesn't say what color the door is or what happens when you open it.

CSS: The Style

CSS controls how everything looks -- colors, sizes, spacing, fonts, layout.

h1 {
  color: blue;
  font-size: 2rem;
}
 
button {
  background: orange;
  padding: 10px 20px;
  border-radius: 8px;
}

CSS is the paint, furniture, and interior design of the house. Same blueprint, totally different look depending on the CSS.

JavaScript: The Behavior

JavaScript makes things happen. Click a button and something changes. Type in a search box and results appear. Scroll down and new content loads.

// When someone clicks the button, show a message
document.querySelector('button').addEventListener('click', () => {
  alert('You clicked the button!')
})

JavaScript is the electricity and plumbing. The house looks done without it, but nothing actually works.

How They Work Together

In practice, modern frameworks like React, Next.js, and Vue combine all three. When your AI generates a component, it often looks like this:

function WelcomeCard({ name }) {
  return (
    <div style={{ padding: '20px', background: '#f0f0f0' }}>
      <h2>Welcome, {name}!</h2>
      <button onClick={() => alert('Hello!')}>
        Say Hi
      </button>
    </div>
  )
}

That's HTML (the div, h2, button tags), CSS (the style prop), and JavaScript (the onClick handler and the function itself) all in one file.

What Breaks and Why

Most bugs in AI-generated code fall into one of three categories:

1. Structure problems (HTML) -- Missing closing tags, wrong nesting, elements in the wrong place
2. Style problems (CSS) -- Layout not working, things overlapping, responsive design broken
3. Behavior problems (JS) -- Clicks don't work, data doesn't load, errors in the console

Knowing which category your bug falls into helps you describe it to your AI tool and get a better fix.

Practice

Open your browser's developer tools (right-click any page, choose "Inspect") and look at:

1. The Elements tab -- this shows the HTML structure
2. The Styles panel -- this shows the CSS applied to each element
3. The Console tab -- this shows JavaScript errors and output

Key Takeaways

• Every website is HTML (structure) + CSS (style) + JavaScript (behavior)
• Modern frameworks combine all three, which is what your AI generates
• Most bugs are structure, style, or behavior problems -- knowing the category helps you fix them
• Browser developer tools let you see all three layers

Next Up

Now that you know what the web is made of, let's talk about how those files get organized -- and why AI projects tend to turn into a mess.

Continue to 1.3 File Structures