You type an address, press enter, and a page appears in about a second. In that second, your device finds a computer somewhere in the world, opens a secure connection to it, requests the page, receives dozens of files, and assembles them into what you see. This primer walks through each step.
It is the first step in our building for the web learning path and assumes no background.
Step 1: finding the server with DNS
Every computer on the internet has a numeric address, called an IP address. People do not remember numbers well, so we use domain names like example.com instead.
When you type a domain name, your device asks the Domain Name System (DNS) to look up the matching IP address. DNS works like a phone book for the internet, spread across many servers worldwide. The answer is usually cached, so the next visit is faster.
Step 2: a secure connection with HTTPS
Your browser now contacts the server at that address. Almost every site today uses HTTPS, the secure version of the web's basic protocol, HTTP. Before any page data is exchanged, the browser and server agree on encryption keys, and the server proves its identity with a certificate issued by a trusted authority.
The result: nobody between you and the site, such as someone on the same public Wi-Fi, can read or alter what you send and receive. The padlock or similar indicator in the address bar means this check succeeded. It means the connection is private; it does not mean the site itself is trustworthy.
Step 3: requesting the page
The browser sends a request: "Please send me the page at this address." The server sends back a response with a status code and the content. You have seen some status codes:
- 200 OK. Here is the page.
- 301 Moved Permanently. The page lives at a new address; the browser follows automatically.
- 404 Not Found. No page exists at this address.
- 500 Internal Server Error. Something broke on the server.
Step 4: building the page from three languages
The response is mostly HTML, which the browser reads and then requests the other files it mentions. Three languages work together:
- HTML describes the structure and content: headings, paragraphs, images, links, forms. It is the skeleton.
- CSS describes the presentation: colors, fonts, spacing, layout, and how the page adapts to different screen sizes. It is the clothing.
- JavaScript adds behavior: menus that open, forms that check your input, content that updates without reloading the page. It is the muscle.
A typical page triggers dozens of additional requests for stylesheets, scripts, images, and fonts. How many there are, and how large, largely determines how fast the page feels.
Front end and back end
Web work is often split in two:
- The front end is everything that runs in your browser: the HTML, CSS, and JavaScript, and the design and experience they create.
- The back end runs on servers: the code that handles sign-ins, processes orders, applies business rules, and talks to the database.
When you place an order, the front end collects your choices and sends them to the back end, which checks stock, charges the card through a payment service, records the order, and sends back a confirmation for the front end to display.
Databases: where the information lives
Most sites that do more than display fixed text keep their information in a database: products, prices, accounts, orders, articles. The back end reads from and writes to it. When a store updates a price, it changes one row in the database, and every page that shows that product reflects the change.
Many sites also connect to other systems through APIs, defined ways for one program to request data or actions from another. A store's site might use one API for payments, another for shipping rates, and another for its inventory system.
Content delivery networks and caching
A visitor in Tokyo and a server in Texas are far apart, and distance adds delay. A content delivery network (CDN) keeps copies of a site's files on servers around the world and delivers them from the location closest to each visitor.
Caching is the general idea behind this: keeping a ready copy of something so it does not have to be rebuilt or fetched from far away every time. Browsers cache files too, which is why a site you visit often loads faster.
Putting it together
Type an address and, in about a second: DNS finds the server, HTTPS secures the connection, the browser requests the page, a CDN or server responds, HTML arrives and calls for CSS, JavaScript, and images, and the browser assembles the page. Behind the scenes, the back end may have queried a database and called several APIs to produce it.
Every one of those steps can be slow, misconfigured, or broken. That is why building and testing websites well is a real discipline, and the subject of the next two steps in this path.
Try it yourself
Open any website on a computer, right-click the page, and choose "Inspect" (or "Inspect element") to open your browser's developer tools. Then:
- Open the Network tab and reload the page. Count roughly how many requests it makes and find the largest file.
- Find one request with a status code other than 200, if there is one.
- Open the Elements tab and hover over the HTML to see which part of the page each piece builds.
Look up any unfamiliar term in our glossary.