Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 1 · 1 / 8What happens when you open a URL
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1What happens when you open a URL
01 / 09Overview

What happens when you open a URL

You'll learn what happens between typing a web address and seeing the page.

Why it mattersEvery app you build talks to servers the same way, so this picture helps you find bugs later.
about 60 min
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
How the web worksMDN Web Docs · 15 min · English
MMamun's noteRead it all. The road and shop picture at the top is worth slowing down for. Skim "Packets explained", you do not need it yet.
ArticleOptional
What is a URL?MDN Web Docs · 10 min · English
MMamun's noteRead up to the part on absolute and relative URLs. Stop before "Semantic URLs".
03 / 09

See it step by step

From a web address to a page on your screen.

domain"rafi.github.io"
path"/"
request.txt
11. You type https://rafi.github.io/ and press Enter
22. Browser asks DNS: what is the number for rafi.github.io?
33. Browser sends a request to that number: GET /
44. Server sends a response: 200 OK + index.html
55. Browser reads the HTML and asks for style.css and photo.jpg
66. Browser draws the page
You type the URL. The browser splits it into how to talk (https), which server (rafi.github.io) and which page (/).
Step 1 / 7
04 / 09

Explanation

You type prothomalo.com and press Enter. A second later the news is on your screen. Where did it come from? It was not on your laptop. Something had to go and fetch it.

Opening a web page is asking another computer for files, and getting them back. That other computer is called a server. Your browser is the one asking.

A web address, called a URL, tells the browser where to ask:

https://www.prothomalo.com/sports
  • https:// is how to talk. The s means the conversation is locked so others cannot read it.
  • www.prothomalo.com is the domain, the name of the server.
  • /sports is the path, which page you want on that server.

Computers do not find each other by name. They use numbers, called IP addresses, like 104.18.32.7. So first the browser asks DNS to turn the name into a number. DNS works like the contact list on your phone. You tap "Ammu", the phone finds the number for you.

Then the browser sends a request to that number: "please give me /sports". The server sends back a response. The response starts with a status code:

  • 200 means OK, here is your page.
  • 404 means not found. The server is there, but that path does not exist.

The first file is usually HTML, the content of the page. Inside it the browser finds links to more files: CSS for the look, JavaScript for what the page does, and images. It asks for each one the same way. Then it puts everything together and draws the page. This is called rendering.

People often think a 404 means "the internet is down". Not yet. A 404 proves the server answered. Only the path was wrong. Check for a typo after the /.

When you read a URL, read it in three parts: how to talk, which server, which page.

Words to recognise
URLdomainpathDNSIP addressserverrequestresponsestatus code200404
05 / 09

Code tour

Click a line number with a ring to read the note for that line.

index.html4 notes
<!-- What the server sends back for https://rafi.github.io/ -->
Mentor note · line 1
This is the first file the browser gets, the HTML. It arrived in a response with status 200.
2<!DOCTYPE html>
3<html>
4 <head>
5 <title>Rafi's page</title>
<link rel="stylesheet" href="style.css">
7 </head>
8 <body>
9 <h1>Hi, I'm Rafi</h1>
<img src="photo.jpg" alt="Rafi at Cox's Bazar">
<script src="app.js"></script>
12 </body>
13</html>
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3In https://www.daraz.com.bd/phones, which part is the path?
  2. 2 / 3What does DNS do?
  3. 3 / 3The browser shows a 404. What does that tell you?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with What happens when you open a URL?

09 / 09

Done

You can now
Split a URL into its parts and explain how the browser gets a page and what 200 and 404 mean.
Next: Reading HTML structure Back to Phase 1
On this page
  1. 01What happens when you open a URL
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1What happens when you open a URL
01 / 09Overview

What happens when you open a URL

You'll learn what happens between typing a web address and seeing the page.

Why it mattersEvery app you build talks to servers the same way, so this picture helps you find bugs later.
about 60 min
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
How the web worksMDN Web Docs · 15 min · English
MMamun's noteRead it all. The road and shop picture at the top is worth slowing down for. Skim "Packets explained", you do not need it yet.
ArticleOptional
What is a URL?MDN Web Docs · 10 min · English
MMamun's noteRead up to the part on absolute and relative URLs. Stop before "Semantic URLs".
03 / 09

See it step by step

From a web address to a page on your screen.

domain"rafi.github.io"
path"/"
request.txt
11. You type https://rafi.github.io/ and press Enter
22. Browser asks DNS: what is the number for rafi.github.io?
33. Browser sends a request to that number: GET /
44. Server sends a response: 200 OK + index.html
55. Browser reads the HTML and asks for style.css and photo.jpg
66. Browser draws the page
You type the URL. The browser splits it into how to talk (https), which server (rafi.github.io) and which page (/).
Step 1 / 7
04 / 09

Explanation

You type prothomalo.com and press Enter. A second later the news is on your screen. Where did it come from? It was not on your laptop. Something had to go and fetch it.

Opening a web page is asking another computer for files, and getting them back. That other computer is called a server. Your browser is the one asking.

A web address, called a URL, tells the browser where to ask:

https://www.prothomalo.com/sports
  • https:// is how to talk. The s means the conversation is locked so others cannot read it.
  • www.prothomalo.com is the domain, the name of the server.
  • /sports is the path, which page you want on that server.

Computers do not find each other by name. They use numbers, called IP addresses, like 104.18.32.7. So first the browser asks DNS to turn the name into a number. DNS works like the contact list on your phone. You tap "Ammu", the phone finds the number for you.

Then the browser sends a request to that number: "please give me /sports". The server sends back a response. The response starts with a status code:

  • 200 means OK, here is your page.
  • 404 means not found. The server is there, but that path does not exist.

The first file is usually HTML, the content of the page. Inside it the browser finds links to more files: CSS for the look, JavaScript for what the page does, and images. It asks for each one the same way. Then it puts everything together and draws the page. This is called rendering.

People often think a 404 means "the internet is down". Not yet. A 404 proves the server answered. Only the path was wrong. Check for a typo after the /.

When you read a URL, read it in three parts: how to talk, which server, which page.

Words to recognise
URLdomainpathDNSIP addressserverrequestresponsestatus code200404
05 / 09

Code tour

Click a line number with a ring to read the note for that line.

index.html4 notes
<!-- What the server sends back for https://rafi.github.io/ -->
Mentor note · line 1
This is the first file the browser gets, the HTML. It arrived in a response with status 200.
2<!DOCTYPE html>
3<html>
4 <head>
5 <title>Rafi's page</title>
<link rel="stylesheet" href="style.css">
7 </head>
8 <body>
9 <h1>Hi, I'm Rafi</h1>
<img src="photo.jpg" alt="Rafi at Cox's Bazar">
<script src="app.js"></script>
12 </body>
13</html>
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3In https://www.daraz.com.bd/phones, which part is the path?
  2. 2 / 3What does DNS do?
  3. 3 / 3The browser shows a 404. What does that tell you?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with What happens when you open a URL?

09 / 09

Done

You can now
Split a URL into its parts and explain how the browser gets a page and what 200 and 404 mean.
Next: Reading HTML structure Back to Phase 1
On this page
  1. 01What happens when you open a URL
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You type prothomalo.com and press Enter. A second later the news is on your screen. Where did it come from? It was not on your laptop. Something had to go and fetch it.

Opening a web page is asking another computer for files, and getting them back. That other computer is called a server. Your browser is the one asking.

A web address, called a URL, tells the browser where to ask:

https://www.prothomalo.com/sports
  • https:// is how to talk. The s means the conversation is locked so others cannot read it.
  • www.prothomalo.com is the domain, the name of the server.
  • /sports is the path, which page you want on that server.

Computers do not find each other by name. They use numbers, called IP addresses, like 104.18.32.7. So first the browser asks DNS to turn the name into a number. DNS works like the contact list on your phone. You tap "Ammu", the phone finds the number for you.

Then the browser sends a request to that number: "please give me /sports". The server sends back a response. The response starts with a status code:

  • 200 means OK, here is your page.
  • 404 means not found. The server is there, but that path does not exist.

The first file is usually HTML, the content of the page. Inside it the browser finds links to more files: CSS for the look, JavaScript for what the page does, and images. It asks for each one the same way. Then it puts everything together and draws the page. This is called rendering.

People often think a 404 means "the internet is down". Not yet. A 404 proves the server answered. Only the path was wrong. Check for a typo after the /.

When you read a URL, read it in three parts: how to talk, which server, which page.

Words to recognise
URLdomainpathDNSIP addressserverrequestresponsestatus code200404

You type prothomalo.com and press Enter. A second later the news is on your screen. Where did it come from? It was not on your laptop. Something had to go and fetch it.

Opening a web page is asking another computer for files, and getting them back. That other computer is called a server. Your browser is the one asking.

A web address, called a URL, tells the browser where to ask:

https://www.prothomalo.com/sports
  • https:// is how to talk. The s means the conversation is locked so others cannot read it.
  • www.prothomalo.com is the domain, the name of the server.
  • /sports is the path, which page you want on that server.

Computers do not find each other by name. They use numbers, called IP addresses, like 104.18.32.7. So first the browser asks DNS to turn the name into a number. DNS works like the contact list on your phone. You tap "Ammu", the phone finds the number for you.

Then the browser sends a request to that number: "please give me /sports". The server sends back a response. The response starts with a status code:

  • 200 means OK, here is your page.
  • 404 means not found. The server is there, but that path does not exist.

The first file is usually HTML, the content of the page. Inside it the browser finds links to more files: CSS for the look, JavaScript for what the page does, and images. It asks for each one the same way. Then it puts everything together and draws the page. This is called rendering.

People often think a 404 means "the internet is down". Not yet. A 404 proves the server answered. Only the path was wrong. Check for a typo after the /.

When you read a URL, read it in three parts: how to talk, which server, which page.

Words to recognise
URLdomainpathDNSIP addressserverrequestresponsestatus code200404