How the Web Works: Browser, Server, HTTP, Domain and Hosting

Before you write your first tag, it helps to understand what happens when you type a website address and press Enter. In a fraction of a second the browser finds the right computer on the internet, asks it for files and turns the text it receives into a page. This knowledge pays off from day one: you will understand why a page "won't open", where a 404 error comes from and which part of a website is your job as a front-end developer.

Client and server

The web follows a client–server model. A client is a program that requests data; for websites it is the browser: Chrome, Firefox, Safari, Edge. A server is a computer that is connected to the internet around the clock, stores the website's files and sends them on request; usually it is a Linux machine in a data centre.

The key idea: a website is stored on the server, not on the user's device. The browser downloads a copy of the page, displays it and keeps some files in its cache to load faster next time. If the owner changes a file on the server, every visitor sees the new version. If you change the page in your own browser, only you will see it, and only until you reload — we will prove this in the DevTools lesson.

The journey of a request: from address to page

Let's go step by step through what happens after you enter https://prowid.com/courses/htmlcss?lang=ru.

Step 1. The browser parses the address

A URL is the full address of a resource on the internet. The browser splits it into parts:

Step 2. DNS: from a name to an IP address

Computers on a network find each other not by names but by numeric IP addresses such as 203.0.113.25. Numbers are hard to remember, so we have DNS (Domain Name System), the internet's "phone book". The browser first asks a DNS server for the domain's IP address and only then connects to the right computer:

Browser → DNS server:     what is the IP address of prowid.com?
DNS server → browser:     prowid.com = 203.0.113.25
Browser → 203.0.113.25:   opening a secure connection (HTTPS, port 443)

The DNS answer is cached, so on a repeat visit this step is almost instant. The nslookup prowid.com command in a terminal shows a site's IP address.

Step 3. The HTTP request

Next the browser sends the server an HTTP request, a text message that follows the rules of the HTTP protocol (HyperText Transfer Protocol). Simplified, it looks like this:

GET /courses/htmlcss?lang=ru HTTP/1.1
Host: prowid.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/140.0
Accept: text/html
Accept-Language: ru,az;q=0.9,en;q=0.8

The first line matters most: the method GET ("give me"), the path and the protocol version. Below it come the headers, service information: which site is needed (Host), which browser is asking (User-Agent), which formats and languages it understands. Modern sites use HTTP/2 and HTTP/3 — they are faster, but the idea is the same.

Step 4. The HTTP response

The server finds the file (or builds the page with a program) and sends a response: a status line, headers and the body, which is the document itself.

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 412
Cache-Control: max-age=600

(an empty line, followed by the response body: an HTML document)

The response body is plain text with HTML markup. Here is what a simple document returned by the server might look like, and below the code is what the browser draws from it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML and CSS course</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 16px; }
    h1 { color: #4338ca; }
  </style>
</head>
<body>
  <h1>HTML and CSS course</h1>
  <p>Start: 1 October, Baku. Duration: 4 months.</p>
  <a href="#">Sign up</a>
</body>
</html>

You will study every line of this document in the next lessons. What matters now is this: the server sends text, and the browser turns it into a page. The Content-Type: text/html header says "this is HTML, render it". With text/plain you would see the same text with angle brackets, as in Notepad.

Step 5. Loading extra resources and rendering

While reading the HTML, the browser finds links to stylesheets, scripts, images and fonts and sends a separate request for each file — loading an ordinary page takes dozens of requests. Then it builds a tree of elements (the DOM) from the HTML, applies CSS, calculates where every box goes and paints pixels on the screen.

Status codes

Every response starts with a three-digit status code. The first digit names the group: 2xx — success, 3xx — redirect, 4xx — an error in the request (client side), 5xx — an error on the server side.

A "404" page is HTML too. The server responds with the 404 code and sends an ordinary document that the site owner designed so visitors don't get lost:

<style>
  .error {
    max-width: 360px;
    padding: 24px;
    text-align: center;
    border: 2px dashed #f59e0b;
    border-radius: 12px;
    background: #fffbeb;
  }
  .error strong {
    display: block;
    font-size: 56px;
    color: #d97706;
  }
</style>

<div class="error">
  <strong>404</strong>
  <p>Page not found. Check the address or go to the home page.</p>
  <a href="#">Home page</a>
</div>

HTTPS: why there is a padlock in the address bar

Plain HTTP sends data as open text: the owner of a public Wi-Fi network or your provider can read it and even tamper with it. HTTPS is the same HTTP inside an encrypted connection (TLS). It gives three guarantees:

• encryption — passwords, card numbers and messages cannot be snooped on the way;
• authenticity — the certificate confirms that you are talking to the real prowid.com, not a fake;
• integrity — nobody can silently inject ads or malicious code into the page.

Today HTTPS is a mandatory standard: browsers mark HTTP sites as "Not secure", geolocation and the camera only work over HTTPS, and search engines rank insecure sites lower. Certificates are free (for example, Let's Encrypt), and most hosting providers enable one with a single click.

⚠️ The padlock only means the connection is encrypted. It does not prove the site is honest: phishing pages have HTTPS too. Always check the domain in the address bar.

HTML, CSS and JavaScript: three layers of one page

A page is built from three technologies, each with its own role:

Let's look at a single course card. First, HTML only: the browser applies its default styles, everything is readable and works, but it looks like a document rather than a website.

<article>
  <h2>HTML and CSS</h2>
  <p>Build websites from scratch: 4 months, Baku.</p>
  <button>Sign up</button>
</article>

Now let's add CSS. Not a single character of the markup changed — only the appearance did:

<style>
  article {
    max-width: 300px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef2ff, #e0f2fe);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  }
  h2 { margin: 0 0 8px; color: #4338ca; }
  button {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: #4f46e5;
  }
</style>

<article>
  <h2>HTML and CSS</h2>
  <p>Build websites from scratch: 4 months, Baku.</p>
  <button>Sign up</button>
</article>

JavaScript adds behaviour, for example changing the button text after a click. Scripts are disabled in this course's live examples, so here is just the code — JavaScript is taught separately:

// find the button on the page
const button = document.querySelector('button');

// on click, replace its text
button.addEventListener('click', () => {
  button.textContent = 'You are signed up!';
});

Domain, hosting and static sites

A domain is the site's name: prowid.com, gov.az. You rent it from a registrar, usually for a year, and renew it. Hosting is space on a server where the site's files live. To make a site open by its name, the domain's DNS settings point to the IP address of the hosting server. An analogy: the domain is the street address, and hosting is the house where your files live.

A static site is a set of ready-made files (HTML, CSS, JS, images) that the server sends as they are, the same for everyone. Such sites are fast, cheap and secure, and you can host them for free on GitHub Pages, Netlify or Cloudflare Pages. A dynamic site builds HTML with a program on the server (PHP, Python, Node.js) for every request, often with data from a database: a personal account area, an online shop.

In this course you build static sites. A typical project structure:

my-site/
├── index.html      ← home page: https://my-site.com/
├── about.html      ← https://my-site.com/about.html
├── css/
│   └── style.css
└── images/
    └── logo.svg

The index.html file is special: when an address points to a folder, for example just https://my-site.com/, the server sends this file.

See it with your own eyes: the Network panel

All requests and responses are visible in the browser's built-in developer tools (DevTools):

1. Open any website, press F12 (on macOS Cmd + Option + I) and choose the Network panel.
2. Reload the page (Ctrl + R, on macOS Cmd + R) — the table fills up with requests.
3. Click the first row with the type document — that is the HTML document itself.
4. In the Headers tab find Status Code and Content-Type; in the Response tab you will see the HTML text the server sent.

The table looks roughly like this (simplified):

Name         Status   Type         Size      Time
htmlcss      200      document     14.2 kB   120 ms
style.css    200      stylesheet    8.1 kB    35 ms
main.js      200      script        5.4 kB    41 ms
logo.svg     200      svg+xml       2.3 kB    22 ms
promo.png    404      png           0.6 kB    18 ms

The first row is the HTML document; the browser requested the other files after reading it. The 404 code next to promo.png means there is no such image on the server. The filters above the table (Doc, CSS, JS, Img) show only files of the chosen type.

💡 The Disable cache checkbox in the Network panel turns off the cache while DevTools is open. It saves the day when you have fixed your CSS but the changes "don't show up".

Common mistakes

"The website is stored on the user's computer." No: the user only has a temporary copy. The original lives on the server, and that is where you change files so that everyone sees the changes.

"HTML is a programming language." HTML is a markup language: it has no variables, conditions, loops or calculations. It isn't "executed"; it describes what the document consists of. Programming on the front end starts with JavaScript. Still, accessibility, SEO and how easy it is to work with CSS and JS all depend on the quality of your markup.

"I bought a domain, so my site is online." A domain is just a name; without hosting it has nowhere to point. You need both: a domain and a server with files (or free hosting like GitHub Pages with its own address).

Sharing a link to a file on your computer. An address that starts with file:// points to your disk — a friend will not be able to open it:

file:///C:/Users/Murad/Desktop/my-site/index.html   ← a file on your disk, only you can see it
https://murad.github.io/my-site/                    ← an internet address, opens for everyone

"404 means the server is broken." A 404 code means the server works, but nothing exists at that path — usually a typo in the address or the file name. Problems with the server itself are 5xx codes.

Summary

• The browser (client) requests files, the server stores and sends them; the website lives on the server.
• The journey of a request: URL → DNS finds the IP address → HTTP request → response with a status code, headers and body → loading CSS, JS and images → rendering.
• Codes: 2xx — success, 3xx — redirect, 4xx — request error (404), 5xx — server error (500).
• HTTPS encrypts the connection and confirms the site is authentic; today it is a mandatory standard.
• HTML is structure, CSS is presentation, JavaScript is behaviour; HTML is a markup language, not a programming language.
• A domain is the site's name, hosting is space for its files; a static site is a set of ready files the server sends as they are.
• The Network panel in DevTools shows every request, its status and the server's response.

Practice

1. Open your favourite website, then the Network panel, and reload the page. Write down the status code and Content-Type of the HTML document and the total number of requests (shown at the bottom of the panel).
2. Add a non-existent path to any site's address, for example /abc-123. Find the request with the 404 code in Network and look at the HTML the server sent in the Response tab.
3. Split three addresses into parts (protocol, domain, path, parameters): the home page of any news site, a Google search result and a product page in an online shop.
4. Save the course card HTML from this lesson in a file called card.html and open it in the browser with a double click. Look at the address bar and explain why this link will not open for a friend. Describe what you would need so that everyone can see the card: which hosting and what the address would be.

💡 In task 1, pay attention to the Type column: how many of the requests are stylesheets, scripts, images and fonts?