Open any website and look closely. You see text, pictures, buttons and lots of color. It looks like a single picture sent from somewhere. But in fact, nobody takes a picture of the whole page and sends it to you.
This chapter takes a web page apart, piece by piece, and has you put it back together with your own hands. We’ll use one website the whole way through: a small bakery called Flour House. You’ll watch it being built one layer at a time, then take control of it yourself in the lab. By the end, you’ll know that the page you see is described by three main materials.
1.1What arrives is not a picture
Every time you type a website’s name and press Enter, the program you use to open websites — such as Chrome, Safari or Edge — sends a request out over the internet and gets something back.
Stop and think
Take a guess first: if what comes back isn’t a picture of the page, what is it?
FIG. 1.1 — Same page, two views
Roadside Café
Open daily from 7 a.m.
See the menuThe page you see has a brick-red heading, some text and a yellow button. Tap to see what is behind it.
- BrowserThe program that opens websites
- The program you use to open websites. Its main job is to request files from the internet, read them, and draw them as a web page you can see and click.
This is why the same web page can look slightly different on different devices: each device draws it itself from the same set of instructions. It’s like several musicians playing from the same sheet music. The song is the same, but the sound may differ a little.
Deep dive · for the extra curiousWhat about the pictures on a page? Aren’t those sent as pictures?
<img src="bread.png">, and only then sends another request to fetch that image file. It then places the picture where the HTML says. All the text, the buttons and the layout, the browser draws itself from text. That’s why you can select and copy text on a web page, but not the text in a photo.A common belief
“A website sends a ready-made screenshot, and our device just displays it.”
The instructions the browser receives are written in three languages. Each one has its own clear job and stays out of the others’ way. Let’s meet them one at a time.
1.2Material one: HTML says what’s there
The first language answers the simplest question: what is on this page? Is there a heading? How many paragraphs? Where are the pictures? Is there a button? This language is called HTML.
- HTML · HyperText Markup LanguageThe language of page structure
- The language that says which pieces a web page is made of. It wraps each piece of content in a 'name label', called a tag, that says what that piece is.
A name label, or tag, is written inside angle brackets like this: <h1>, and it usually has a closing partner with a slash: </h1>. The content between the pair is one piece of the page. Read the code below, and you’ll be able to guess what each line is.
<h1>Fresh bread every morning</h1> <p>Our own dough, baked in a charcoal oven, delivered to your door</p> <img src="bread.png" alt="A round loaf of bread"> <button>Order bread</button>
Time to see it with your own eyes. Below is Flour House’s website with HTML only. Tap or point at each line of code and see which piece of the page it is. Notice too how plain it still looks: old-fashioned lettering, a white background, no color. That is how the browser shows a page on its own when nobody has said how it should look.
FIG. 1.2 · HTML only: every line is one piece of the page
The same page as in Lab 01
index.html · tap any lineMatched 0/3
What the browser draws
Fresh bread every morning
Our own dough, baked in a charcoal oven, delivered to your door
Deep dive · for the extra curiousTags say what something 'means', not how it 'looks'
<h1> just because they want big text. But the real job of <h1> is to say this is the most important heading on the page; how big it is, is CSS’s job. Choosing tags that match their meaning is called Semantic HTML. It helps screen readers tell users which heading they are on, and helps search engines understand the page. Also, once the browser has read the HTML, it builds a model of the page in memory called the , which we’ll open up in Chapter 2.1.3Material two: CSS says how it looks
With HTML alone, a web page looks very plain: black text on a white background, in the browser’s basic font, with everything stacked from top to bottom. So the second language steps in to answer: what should each piece look like?
- CSS · Cascading Style SheetsThe language of how things look
- The language that tells the browser what color, size, spacing, font and position each piece should have — without touching the content in the HTML at all.
CSS is written as rules. Each rule has two parts. The first says which pieces the rule applies to — for example, h1 means every main heading. The second part sits inside curly braces and says what to change, and to what value.
h1 {
color: #9C3A15; /* text color */
font-size: 32px; /* text size */
}
button {
background: #E3A72F; /* button background color */
border-radius: 12px; /* rounded corners */
}Stop and think
If we deleted the whole CSS file, would the heading, the paragraph and the button disappear from the page too?
Here is the same Flour House page from the previous figure. This time we’ll add CSS one rule at a time. Turn the rules on one by one and watch the page change its look. Then press Remove all CSS and notice what disappears and what stays.
FIG. 1.3 · Add CSS rule by rule: the look changes, the content doesn’t
The same page as in Lab 01
style.css · 0/4 rules
What the browser draws
Fresh bread every morning
Our own dough, baked in a charcoal oven, delivered to your door
Deep dive · for the extra curiousThe C in CSS stands for Cascade
<h1> bold and bigger than normal text.1.4Material three: JavaScript says what it can do
Now the page has content and a nice look. But it’s still like a poster on a wall: no matter how many times you press the 'Order bread' button, nothing happens, because nobody has said what to do when the button is pressed.
- JavaScriptThe language of behavior
- A programming language that every browser can run. On a web page, it makes the page respond to what the user does — tapping, typing or scrolling — and can change the page instantly, without loading a new one.
The heart of JavaScript on a web page is listening. The code tells the browser: 'Please keep an eye on this button for me. Whenever someone presses it, do this.' Each press, keystroke or scroll is called an .
const button = document.querySelector("button");
button.addEventListener("click", () => {
document.querySelector("h1").textContent = "Thanks for your order!";
});Flour House’s page now has both HTML and CSS. Press the Order bread button first, then turn on the JavaScript switch and press it again. The Event log tells you what happened after each press.
FIG. 1.4 · Turn on JavaScript: the page starts listening to you
The same page as in Lab 01
script.js
// No JavaScript yet // Nobody is listening for the press
Event log · what happens after a press
- No presses yet
What the browser draws · try the button on the page
Fresh bread every morning
Our own dough, baked in a charcoal oven, delivered to your door
Deep dive · for the extra curiousWithout JavaScript, can no buttons be pressed at all?
<a href> takes you to another page on its own, and a button inside a form <form> can send data to the server without any JavaScript (the browser then loads a whole new page). The 'Order bread' button in this chapter is a standalone button, not inside a form, so nothing happens when there is no JavaScript. What JavaScript adds is the ability to change the page the way we want, instantly, without reloading.Deep dive · for the extra curiousThe JavaScript language and the 'browser’s tools' are two different things
document.querySelector or addEventListener are tools that the browser provides, known collectively as Web APIs. That’s why the same JavaScript can also work outside the browser — for example, on a server through a program like Node.js, which has no web page to change but offers other tools instead, such as reading files (we’ll meet it again in Book 02).1.5Hands on: build a web page yourself
That’s enough reading — time to get hands-on. Below is the web page of a small bakery that you can control in all three languages. Each tab controls one material, and every time you change something, the matching code is highlighted so you can see it.
In the lab you control all three layers at once. The status bar above the page always tells you which layers are on and which one just changed. The missions below tick themselves when you succeed.
Lab 01 missions
Done 0/5
No need to tick anything yourself — each mission checks itself off when the lab below reaches the right state.
Turn off all CSS and see what stays (not done yet)
CSS tab → turn off the 'Enable CSS' switch
Done when: The CSS switch is off
Turn on the HTML X-ray (not done yet)
The 'HTML X-ray' button above the page
Done when: The X-ray button is on and the tag labels are showing
Remove the main heading from the HTML (not done yet)
HTML tab → tap 'Main heading' and watch the code
Done when: There is no <h1> line in the HTML code
Press the button with JavaScript off, then turn JavaScript on and press again (not done yet)
Press 'Order bread' → in the JavaScript tab, turn on the switch → press again
Done when: You pressed the button both ways, and with JavaScript on the page responded
Challenge mission: press the button and a bread is added to the list (not done yet)
You need both HTML (to have a list) and JavaScript (to fill it)
Done when: The <ul> list is on the page and has at least 1 bread in it
LAB 01 — Frontend Construction Chamber
The web page playground
Result · what the user sees
- HTML5 pieces on the page
- CSSStyling the page
- JavaScriptOff · nobody listening
What just happened?
Fresh bread every morning
Our own dough, baked in a charcoal oven, delivered to your door
HTML says what is on the page
index.html · the code that matches the screen right now
<body><header>Flour House · Menu · Contact</header><h1>Fresh bread every morning</h1><p>Our own dough, baked in a charcoal oven, delivered to your door</p><img src="bread.png" alt="A round loaf of bread"><button id="order">Order bread</button></body>
1.6What you just discovered
If you tried every mission, you probably noticed three important things. First, when you turned off CSS, the content didn’t go anywhere — only the look changed. Second, when you turned off JavaScript, the page still looked exactly the same, but the button didn’t respond when pressed. And third, the challenge mission needed HTML to provide a list and JavaScript to fill it: the three languages have to work together.
On real websites, these three languages usually live in separate files. The HTML file has lines that tell the browser, 'Go and fetch the CSS and JavaScript files too.' So the browser requests all the files in turn and puts them together.
<link rel="stylesheet" href="style.css"> <!-- fetch the look --> <script src="script.js"></script> <!-- fetch the behavior -->
Before you move on, test your new eye. Read each situation and choose which language is responsible.
FIG. 1.6 — Whose job is this?
Correct 0/6
The page has a box for typing your email
The button is orange with rounded corners
Tap the heart and the number goes up by one
On a phone, the menu moves below the heading
The page has a heading that says “This month’s deals”
Type an email in the wrong format and a warning appears right away
1.7Are these three languages the whole website?
An online store with millions of products, or a social network used by a whole country, is still built from these same three materials. The difference is scale, and the tools used to write it, such as a — which in the end still sends HTML, CSS and JavaScript to the browser.
But be careful not to go too far and think a website is only these three languages. Look at the evidence from the very page you are reading right now.
FIG. 1.7 — What did this very page load?
Real data from your browserReading data from your browser…
These numbers count from when this tab was opened. A size of 0 KB means the browser used a copy it had already saved. To see the list file by file, open the Machine Lens button in the bottom-right corner and choose the BACKEND tab.
There is one question this chapter hasn’t answered yet. In our bakery, the bread names and the order list are written into the code and never change. In a real shop, prices change every day, products sell out, and orders have to reach the shop. Where does that data come from, and who receives the orders? That belongs to the invisible side, which is waiting for you in Book 02.
- FrontendThe side the user sees
- Everything that runs in the browser on the user’s device: the HTML, CSS and JavaScript you just experimented with. The opposite is the Backend, which runs on the service provider’s machines.
SYSTEM SUMMARY
Chapter summary
- 01The browser doesn’t receive a picture of the page. It receives text files and draws the page itself.
- 02HTML says what is on the page, by wrapping content in tags such as <h1> or <button>.
- 03CSS says what each piece looks like. Delete the CSS and the content is all still there.
- 04JavaScript says how the page responds, by listening for events such as a button press.
- 05The three languages have clearly separate jobs, but they must work together to make a complete page.
- 06These three are the core of the frontend, but pages also load images and fonts, and most of the data comes from servers.
End of chapter
Check your understanding
Answered 0/5
Nothing is graded and nobody sees your answers but you. Every choice comes with an explanation — right ones and wrong ones.
1.8Final mission: build a page with what you understand
This time there are no step-by-step instructions. Flour House wants one promo card that matches the brief below. Choose the HTML pieces, CSS rules and JavaScript commands you think it needs. Try the button on the page you built, then press Check my work. You’ll see which requirements pass or fail, with the reason in terms of which language’s job it is. Some parts are traps: they work, but they do the wrong job.
MINI CHALLENGE · Build a web page yourself
Build a promo card that matches the goal. Some parts are traps: they work, but they do the wrong job.
01 · Goal
- R1A heading “Special of the day” is visible on the page
- R2A paragraph describing the offer is visible
- R3A “Book now” button is visible
- R4The button is orange with rounded corners
- R5Pressing the button changes its text to “Booked ✓”
02 · Choose parts
HTML · What is on the page
03 · Your web page (try the button)
The page is still empty, because the HTML has no pieces yet
Check as many times as you like
See the code your parts produce
<body> <!-- still empty --> </body>
One last step: try explaining it in your own words. This isn’t a test — nothing reads or grades your answer. But putting it into your own words is the best way to find out whether you really understand.
Explain it in your own words
What you write stays on your screen. It is not sent or saved anywhere, and nothing is graded.
Learning path
0/9
- Switch to what the browser really receives (not done yet)Figure 1.1: press 'What the browser receives'
- Match HTML code to pieces of the page (not done yet)Figure 1.2: tap at least 3 lines of code
- Apply all 4 CSS rules (not done yet)Figure 1.3: turn on all 4 rules at the same time
- Press the button without and with JavaScript (not done yet)Figure 1.4: press while it’s off, then turn on JavaScript and press again
- Complete all 5 lab missions (not done yet)Lab 01: missions tick themselves when you succeed
- Sort the three languages’ jobs in all 6 situations (not done yet)Figure 1.6: choose an answer for every item
- Answer every question in the end-of-chapter quiz (not done yet)Answer them all — wrong answers are fine and don’t affect the tick
- Pass the Mini Challenge (not done yet)Check your work and pass all 5 requirements
- Explain it in your own words (not done yet)Write at least 30 characters, then press 'Compare with a sample explanation'
This list records what you actually did in this browser — it is not a certificate that you understand. The best test is to explain it to someone else. You can clear the record in the Machine Lens, DATABASE tab.