~/VibeHandbook
$39

Chapter 05 · 03

HTML, CSS, and JavaScript

The , in a browser, is built from exactly three languages. You don't need to write them by hand, but you need to know what each one owns.

HTML (HyperText Markup Language) is the structure — the content and its skeleton. It says "here is a heading, here is a paragraph, here is a button." It's the nouns of the page; on its own, HTML is a plain, unstyled document, like a text file with labels. The browser turns your HTML into a live, in-memory tree of objects called the DOM (Document Object Model); when code "changes the page," it's really changing the DOM, and the browser redraws to match.

CSS (Cascading Style Sheets) is the style — how everything looks. Colors, fonts, spacing, layout, left or center, small screen versus large. CSS doesn't change what's on the page, only how it's presented. If HTML is the nouns, CSS is the adjectives.

JavaScript (JS) is the behavior — what happens when you interact. It listens for the click, sends the data to the , shows a spinner, updates the DOM when the answer comes back. HTML and CSS are static; JavaScript makes a page do things. It's the verbs. (The same language also commonly runs the backend, which is why you'll see it everywhere.)

One way to picture the split: HTML builds a tree (the DOM), CSS paints it, and JavaScript reaches in and changes it:

   HTML ─▶ builds the DOM tree        CSS ─▶ styles it     JS ─▶ changes it
   ┌──────────────────────────┐
   │  page (document)          │
   │  ├── header               │      colors, fonts,       on click,
   │  │   └── "My App"         │      spacing applied      update a node
   │  └── form                 │      to each node         → browser redraws
   │      ├── input  (name)    │
   │      └── button "Save"    │
   └──────────────────────────┘

Want it offline?

Get the PDF + EPUB + downloadable prompt library + version updates.

$ Get the PDF — $39