How the Web Actually Works · Module 1 · From URL to pixels
HTML, CSS and JS: who owns what
6 min read · lesson 2 of 4
Every web page is three languages with a strict division of labour. Confusing their jobs is the root of most beginner bugs.
HTML — structure and meaning
HTML says what things ARE: a heading, a navigation, a button, an image. Semantic HTML (nav, main, button) is what screen readers and search engines read.
CSS — appearance
CSS says how things LOOK: colour, spacing, layout, what happens on hover. If a page looks wrong, the bug is almost always CSS — not HTML.
JavaScript — behaviour
JS makes things DO: respond to clicks, fetch data, update the page. If a button does nothing, the bug is in JS.
<!-- HTML: what -->
<button class="save">Save</button>
/* CSS: how it looks */
.save { background: #2dd4bf; padding: 8px 16px; }
// JS: what it does
saveBtn.addEventListener("click", () => save());If content is missing, check HTML. If it's ugly, check CSS. If it's inert, check JS. That triage alone fixes half of all beginner debugging.
Practice
Open any page in DevTools, delete a node in the Elements panel (HTML), then change a colour in Styles (CSS). Reload to restore.