How a Website Works: From Typing a URL to Seeing the Page

You type example.com and press Enter. A moment later, a page appears. Behind that moment, a dozen things happen across several computers. Understanding them makes everything else in web development easier.

• You and your browser (Chrome, Firefox, Safari, Edge): the client.
• A server: a computer connected to the internet that stores the site and answers requests.
• DNS: the internet's phone book.
• The network: cables, routers and your internet provider carrying data between you and the server.

A URL has parts:

https://www.example.com:443/blog/post-1?lang=en#comments

• https: the protocol (rules for talking)
• www.example.com: the domain name
• :443: the port (usually hidden)
• /blog/post-1: the path to a page or resource
• ?lang=en: query parameters
• #comments: a fragment pointing to a spot in the page

Computers talk with numbers called IP addresses (such as 93.184.216.34). People prefer names. The Domain Name System (DNS) translates one to the other.

Your browser checks its own cache, then asks your device, then a DNS resolver (often your internet provider's or a public one), which asks other DNS servers until it gets the answer. This takes milliseconds and the result is cached for a while.

Your browser opens a connection to that IP address, using TCP (a reliable transport). With HTTPS, it then agrees on encryption using TLS, the technology that gives the padlock.

During this, the server proves its identity with a certificate issued by a trusted authority. This is how your browser knows it's talking to the real example.com and not an impostor, and why nobody on public Wi-Fi can read your passwords.

HTTP is the language of the web. The browser sends a request such as:

GET /blog/post-1 HTTP/1.1Host: www.example.comAccept: text/html

• GET means "give me this". Other common methods are POST (send data), PUT/PATCH (change) and DELETE.
• Headers carry extras: language, cookies, the type of content wanted.

The server may do very little or a lot:

• Static site: it finds a file on disk (post-1.html) and sends it.
• Dynamic site: it runs code (the backend, written in languages such as Node.js, Python, Java, PHP or Go), possibly asks a database for data, builds the HTML and sends it.

For a social media feed, the backend checks who you are (from a cookie or token), fetches your posts from the database, and returns a page or data.

If you want to understand how apps and servers exchange data, read what is an API.

The server replies with:

• A status code: 200 OK, 301 (moved), 404 (not found), 500 (server error).
• Headers: content type, caching rules, cookies.
• A body: usually HTML.

Status codes are useful clues when debugging. See how to debug any bug.

The browser reads the HTML and creates a tree of elements. It then sees links to other files and requests them too:

• HTML: the structure and content. Headings, paragraphs, links, images, forms.
• CSS: the appearance. Colours, fonts, spacing, layout, and how it adapts to phone screens.
• JavaScript: the behaviour. Menus that open, forms that validate, content that loads without refreshing.
• Images, fonts and videos: fetched as separate requests.

A single page can involve dozens of requests. Browsers fetch many in parallel, and use caches so repeat visits are faster.

Then it renders: calculating layout, painting pixels and responding to your clicks.

• Frontend: what runs in your browser (HTML, CSS, JavaScript, and frameworks such as React). It handles what you see and touch.
• Backend: what runs on the server (application code, business rules, authentication, databases).
• Full-stack developers work on both.

They talk to each other with APIs, usually exchanging JSON.

Suppose you log in to a site:

1. You fill in a form and press the button.
2. The browser sends a POST request with your email and password (encrypted by HTTPS).
3. The server checks the password against a stored hash (never the plain password).
4. If it's right, the server creates a session and sends back a cookie.
5. On each later request, your browser sends the cookie, so the server knows who you are.

Someone has to run the server.

• Shared hosting: cheap, many sites on one machine.
• Cloud platforms (AWS, Azure, Google Cloud): rent computers by the hour. See cloud computing explained.
• Platforms like Vercel or Netlify: deploy a site from Git and let the platform handle servers. If you're new to Git, start with Git for beginners.
• CDN (Content Delivery Network): copies of your files stored in many cities so users get them from a nearby location.

A domain name is separate: you rent it from a registrar and point it at your hosting through DNS records.

• Large images and videos. Compress and use modern formats.
• Too many scripts.
• A distant server. Use a CDN or a closer region.
• Slow database queries.
• No caching.

Browser developer tools (press F12) have a Network tab that shows every request, its size and its time. It's a good place to be curious.

1. Open any website and press F12.
2. Go to the Network tab and reload the page.
3. Click the first request and look at the request and response headers.
4. Switch to the Elements tab and see the HTML tree.
5. Right-click an element, choose Inspect and change some text. You're editing your own copy of the page.

The internet is the global network of computers. The web is a service on top of it, made of pages and links, accessed through browsers using HTTP.

A small piece of data a site stores in your browser. It remembers login sessions, preferences and similar things.

It encrypts the data between your browser and the server and verifies the server's identity. It doesn't mean the site itself is trustworthy, only that the connection is private.

A network of servers across the world that stores copies of your files, so they load faster from nearby.

Learn HTML, CSS and a bit of JavaScript, then build small projects. If you're unsure how to learn in an age of AI tools, read learning to program in the AI era.

Simplified for understanding. Real systems add layers such as load balancers, caches and security checks.