What HTML, CSS and JavaScript Each Do

Why this matters

Beginners debug all symptoms in the same place: they ask the AI to "fix the page" and the tool rewrites everything. Symptoms point at layers, though. Text that says the wrong thing is HTML. Text that overflows the phone is CSS. A button that does nothing is JavaScript. Reading the symptom's layer halves every debugging session in M07 before it starts.

Concepts

HTML is structure and meaning. Tags name the parts: headings, paragraphs, lists, images, form fields with labels, buttons. A screen reader, a search engine and your CSS all read the same tags, so honest tags (a real heading, not big bold text pretending) serve everyone at once. When content is wrong, missing or mislabeled, the fault is here.

CSS is presentation. Colors, sizes, spacing, layout, phone-vs-desktop arrangement. CSS never changes what the page says; it changes how the saying looks. When everything fits on desktop but overlaps on a phone, or text is unreadable, the fault is here. One rule of thumb: if you can describe the problem without mentioning behavior ("the button is too small", "the text runs off the screen"), it is CSS.

JavaScript is behavior. Reading inputs, checking them, computing, showing messages, saving to browser storage. When the page looks right but does nothing (or does the wrong thing) on click, submit or reload, the fault is here. JavaScript reads the HTML structure and changes it in response to events; it never owns the content itself.

What missing layers look like: no CSS means a plain but fully working page (ugly, usable). No JavaScript means a readable page with dead controls (pretty, inert). No HTML means nothing at all. This ordering is also a build order you will reuse in M04: structure first, then look, then behavior.

Worked example

Symptom sorting drill. "The hours say 08:00 to 25:00" is HTML (wrong content). "The hours run off the phone screen" is CSS (layout). "The order button shows no confirmation" is JavaScript (behavior). "Labels vanish when typing" is HTML (placeholder used instead of a label) with a CSS accomplice. Four symptoms, three layers, zero full rewrites needed: each fix touches one layer.

Expected result: any visible page problem assigned to its layer in one line, with the fix direction named ("HTML text", "CSS width rule", "JS submit handler").

The common wrong move

Fixing content problems with styling ("make the wrong hours prettier") or behavior problems with content ("rewrite the text so the button works"). Layers do not substitute; a fix in the wrong layer decorates the bug.

Lab and next step

Lab A07 (paired with lesson 9) practices this sorting on a real broken page. Next, lesson 11 organizes the files themselves: names, folders and the small discipline that keeps projects findable.