Three Languages, Three Jobs
HTML, CSS, and JavaScript are not three ways to do the same thing — they answer three different questions, and mixing up which is which is the root of most beginner confusion. Strip a page back to each layer in turn.
HTML, CSS, and JavaScript are not three ways to do the same thing — they answer three different questions, and mixing up which is which is the root of most beginner confusion. Strip a page back to each layer in turn.
HTML is what it is; CSS is what it looks like
Every web page is made of the same three languages, and each one answers exactly one question about the page.
HTML — what is it?
This is a heading. That is a paragraph. This is a link to somewhere else. Structure and meaning, and nothing about appearance.
CSS — what does it look like?
Headings are 32 pixels and dark green. Paragraphs have room to breathe. The navigation sits in a row. Presentation only.
JavaScript — what happens?
When somebody clicks this, open that. Fetch more results as they scroll. Behaviour, in response to something the visitor did.
Keeping these apart is a genuine skill and it is worth building early. The most common beginner mistake in HTML is reaching for a tag because of how it looks — using h3 because you wanted smaller text, or b because you wanted bold. Those are CSS questions being answered in the wrong language.
JavaScript is what happens when you touch it
JavaScript is a full programming language — variables, conditions, loops, functions — and it is not covered in this track. It is worth knowing what it is for, so you can tell when a problem is not yours yet.
It runs after the page has loaded, and it changes things: text, styles, whole sections of the page appearing and disappearing. If something on a page responds to you without fetching a new page, that is JavaScript.
Does not need JavaScript
Links. Forms that submit. A dropdown menu on hover. Smooth scrolling. An accordion. Nearly all of a personal site, a portfolio, a blog, or a documentation page.
Needs JavaScript
Live search as you type. A map you can drag. Content that loads as you scroll. Anything that changes without the page reloading.
A page with no CSS still works
Turn off the stylesheet on any well-built page and it does not break. It becomes plain — black text, blue underlined links, headings in decreasing sizes — and it remains completely readable and completely usable.
Structure, and nothing else
Browser defaults only. It is ugly and it is completely functional — the heading is a heading, the list is a list, the link works. Every word is readable and the page can be used. This is what a search engine and a screen reader see, and it is why HTML comes first in this track.
That first panel is what a search engine crawls, roughly what a screen reader announces, and what a browser's reader mode produces. It is also what your visitor sees for the first moment before your CSS arrives on a slow connection.
The browser parses, then paints
Between receiving text and showing pixels, the browser runs a fixed sequence. You will never write any of it, and knowing the shape explains several things that otherwise look arbitrary.
- 1
Parse the HTML into a tree
Every element becomes a node with a parent and children. This structure is called the DOM, and it is what CSS selects from and JavaScript manipulates.
- 2
Parse the CSS into rules
Every stylesheet, plus the browser's own defaults, plus anything in a style attribute — collected and sorted.
- 3
Work out the style of every node
For each element, which declarations apply and which win. This is the cascade, and it gets its own chapter because it is where most confusion lives.
- 4
Lay out — calculate every box
Position and size for everything, computed from the top down. Change one width and the browser may have to redo a large part of this, which is why layout is the expensive step.
- 5
Paint, and composite
Fill in the pixels, then stack the layers. Now it is on screen.
One practical consequence: a <script> in the middle of your HTML stops parsing until it has downloaded and run. That is why scripts conventionally go at the end of the body, or carry the defer attribute.
View source is the whole lesson
Every page you have ever visited will show you its own source, for free, right now. This is not a developer feature that was left switched on — the web was designed this way, and it is the reason a generation of people learned to build things by reading other people's.
Ctrl/Cmd + U View source — the HTML the server sentF12 or Ctrl/Cmd + Shift + I Devtools — the live page, after the browser finished with itThose are not the same thing, and the difference matters more the further you get. View source shows the file as delivered. Devtools shows the tree as it exists now, including anything JavaScript has changed since. On a modern site they can look completely different.
Key takeaways
- HTML answers what is it, CSS answers what does it look like, JavaScript answers what happens when you touch it.
- Choosing a tag for its appearance is answering a CSS question in the wrong language.
- A well-built page with no CSS is plain and completely usable. That is what crawlers and screen readers get.
- JavaScript is not needed for links, forms, navigation, or most of a personal site.
- The browser parses HTML into a tree, parses CSS into rules, computes styles, lays out boxes, then paints.
- That tree is the DOM — what CSS selects from and JavaScript changes.
- A script in the middle of the HTML blocks parsing; put it at the end or use defer.
- View source shows the delivered file. Devtools shows the live tree. On a modern site these differ.
Quick check
Answer these to unlock the next chapter — 3 of 4 to pass. You can retake it anytime.
Answer every question to check.
Make a free account to read on
Every chapter is free — an account is how your progress, XP, and streak follow you from your laptop to your phone, and how you show up on the leaderboard. No payment, no trial.