how websites work: a guide for new developers

A website is a collection of files and programs kept on a computer called a server. When you visit one, your browser asks that server for a page, the server sends back text written in HTML, and your browser turns that text into the page you see. Everything else is detail about how the asking, the sending and the turning work.

This guide follows one visit from start to finish, then looks at what the server and the browser each do. Along the way you can run small programs that copy each step.

The short version

1. You type an address, or click a link.
2. Your browser finds out which server holds that site.
3. It connects and sends a request: please send me this page.
4. The server sends back a response: a status and the page’s HTML.
5. The browser reads the HTML and asks for anything else it mentions, such as styles, scripts and pictures.
6. It puts it all together and draws the page.

On a fast connection this takes well under a second, and it happens every time you open a page.

Step 1: the address

A web address is called a URL. It has several parts, and each one tells the browser something different. JavaScript can split one up for you:

const address = new URL("https://www.example.com/shop/shoes?size=6#reviews");
console.log(address.protocol);
console.log(address.hostname);
console.log(address.pathname);
console.log(address.search);
console.log(address.hash);

https:
www.example.com
/shop/shoes
?size=6
#reviews

• https: is the protocol: the rules for the conversation. The s stands for secure.
• www.example.com is the domain, the name of the site.
• /shop/shoes is the path: which page on that site.
• ?size=6 is the query, extra details for the server, such as a search or a filter.
• #reviews is the fragment. It never goes to the server at all. The browser uses it to jump to part of the page.

Step 2: finding the server

Computers on the internet find each other by number. That number is called an IP address and looks something like 203.0.113.10. Names like example.com exist for people. The Domain Name System, or DNS, is the internet’s phone book: your browser asks it for the number that belongs to a name and gets one back.

The answer is remembered for a while, so the next visit can skip this step.

Step 3: the request

With the number in hand, the browser connects to the server and sends a request. A request is text with a set layout. Stripped down, a request for that shoe page looks like this:

GET /shop/shoes?size=6 HTTP/1.1
Host: www.example.com
Accept: text/html

GET means fetch something. The first line says what, and the lines below add details, such as which site, since one server can hold many. Sending a form usually uses POST instead, which carries what you typed along with the request.

Because the address starts with https, the browser and server set up encryption before anything else is sent. Anyone in between, such as the café Wi-Fi, can see which site you connected to, but not which page you asked for or what came back.

Step 4: the response

The server answers with a status code, some details about what it is sending, and then the content itself:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html lang="en-GB">
...

The status code is a quick summary of how it went. The ones you will meet most:

• 200 OK: here is the page.
• 301 Moved Permanently: this page lives at a new address now, and the browser follows it.
• 404 Not Found: there is nothing at that path.
• 500 Internal Server Error: something broke in the server’s own code.

A server is a program that turns requests into responses. Here is a pretend one in Python. It keeps its pages in a dictionary and looks up each path:

pages = {
    "/": "<h1>Home</h1>",
    "/about": "<h1>About us</h1>",
}

def handle(path):
    if path in pages:
        return 200, pages[path]
    return 404, "<h1>Page not found</h1>"

for path in ["/", "/about", "/prices"]:
    status, body = handle(path)
    print(path, status, body)

/ 200 <h1>Home</h1>
/about 200 <h1>About us</h1>
/prices 404 <h1>Page not found</h1>

Real web servers do far more, such as handling thousands of visitors at once, but the core job is exactly this.

Step 5: the browser builds the page

The HTML that comes back is a text file describing the page’s content and structure. It usually mentions other files:

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <meta charset="utf-8">
  <title>Shoes</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <h1>Shoes in size 6</h1>
  <img src="/pictures/trainers.jpg" alt="White trainers">
  <script src="/shop.js"></script>
</body>
</html>

As the browser reads it, it sends another request for every file mentioned: the stylesheet, the picture and the script. A busy page can need dozens of these. Each language has its own job:

• HTML says what is on the page: headings, paragraphs, pictures, links and forms.
• CSS says how it looks: colours, fonts, spacing and layout.
• JavaScript says how it behaves: what happens when you click, type or scroll.

The browser turns the HTML into a tree of elements in memory, called the DOM, works out where everything goes using the CSS, paints it on the screen and runs the JavaScript. From then on, JavaScript can change the page without asking the server for a new one.

Pages built for each visitor

Some sites send the same files to everyone. These are static sites: the server hands over whatever it has stored.

Most sites you use every day are dynamic. The server runs a program that builds the HTML for each request, which is how a shop shows your basket and a course site shows your progress. That program can be written in PHP, Python, Ruby, Java, C#, Go or JavaScript, and it usually reads from a database using SQL. This PHP builds a greeting that depends on the visitor and the time:

<?php
$visitor = "Sam";
$hour = 9;
$greeting = $hour < 12 ? "Good morning" : "Good afternoon";
echo "<h1>$greeting, $visitor!</h1>\n";
echo "<p>You have 3 lessons left this week.</p>\n";

<h1>Good morning, Sam!</h1>
<p>You have 3 lessons left this week.</p>

The browser only ever receives the finished HTML. It never sees the PHP that made it.

Front end and back end

You will hear these words a lot. The front end is everything that runs in the browser: HTML, CSS and JavaScript. The back end is everything on the server: the program, the database and the stored files. Many developers specialise in one side, and full-stack developers work on both.

How a site remembers you

Each request stands on its own, so a server cannot tell two visits apart by default. Cookies solve this. A cookie is a small piece of text the server asks the browser to store and send back with every later request to that site. One cookie can hold a long random code that the server matches to your account, which is how you stay signed in.

Common misunderstandings

The internet and the web are the same thing

The internet is the network of connected computers. The web is one service on top of it, alongside email, online games and video calls.

A website lives in your browser

The browser only shows a copy of what the server sent. Close the tab and that copy is gone. The real files stay on the server.

The padlock means a site is trustworthy

It means the connection is private. It says nothing about who runs the site, so a scam page can have one too.

Every site needs a database

A portfolio or a small business page can be a handful of HTML and CSS files. A database comes in when a site has to store things people do, such as accounts, orders or posts.

A short exercise

Add a contact page to the pretend server, so that /contact returns 200 and the heading Contact us. Then make its loop check four paths: home, about, contact and prices. Copy the code into the playground from the button at the bottom of the page and choose Python.

One possible answer

pages = {
    "/": "<h1>Home</h1>",
    "/about": "<h1>About us</h1>",
    "/contact": "<h1>Contact us</h1>",
}

def handle(path):
    if path in pages:
        return 200, pages[path]
    return 404, "<h1>Page not found</h1>"

for path in ["/", "/about", "/contact", "/prices"]:
    status, body = handle(path)
    print(path, status, body)

/ 200 <h1>Home</h1>
/about 200 <h1>About us</h1>
/contact 200 <h1>Contact us</h1>
/prices 404 <h1>Page not found</h1>

One new line in the dictionary made a whole new page. Many real sites keep their pages in a database instead, but the lookup works the same way.

Related reading

• HTML document structure explained, for what goes inside the HTML file a server sends.
• Selecting DOM elements in JavaScript, for how JavaScript finds parts of the page once the browser has built it.

Your next step

Every website, from a one-page portfolio to a huge shop, starts with an HTML file. Gwecode’s HTML Level 1 begins with what a web page really is, then builds up headings, links, pictures, lists, tables and forms one short lesson at a time, with a live preview beside your code. Its level check has you build an about-me page of your own. Every lesson is free and runs in your browser. Create a free account to keep your progress, and start with the lesson below.

questions