What Really Happens When You Open a Website? The Journey From Browser to Database

You enter a website URL into Chrome, hit Enter and seconds later, the page loads.

It feels simple.

But, you've never really asked yourself what happens in those few seconds?

Where did your browser get the URL to the website?
From where is the webpage coming from?
What is the communication a login button is dealing with a server?
What are the locations of your account information?

If you're just beginning to learn coding or software development, then it is one of the best places to start in understanding how a website works.

In this guide, we will be taking one simple trip:

Your browser → Internet → Server → Frontend → API → Backend → Database → Back to your screen

Let's break it down without complicated technical language.

1. You enter a Website Address :

Now say, someone opens his browser and types into it :

www.example.com

This address is known as a Uniform Resource Locator (URL). It instructs a browser where to go.

Now that your browser has determined where this site is, it will create a record of that.

That's where DNS can be of help.

What is DNS?

DNS is the acronym for Domain Name System.

Imagine it as the contact application on your mobile phone.

You save:

Amma

But your phone has a phone number stored in that name.

Similarly, you recall:

google.com

Computers must have an IP address to find the web server that is hosting the website.

DNS is used to assist in translating the domain name to the network address.

So, very simply:

Website name → DNS → Server address

2. Your Browser Connects to the Server :

Now your browser knows where to send the request.

Sends a request via the Internet to obtain a Web site.

It's similar to putting an order on the internet.

You say:

I want it on me.

The system of the website receives your request and begins to prepare the response.

The computer that receives and processes these requests is typically referred to as a server.

What is a server?

A server is simply a computer or computing system that provides data or services to other computers.

A web server can be responsible for:

Sending webpage files
Processing requests
Checking login details
Fetching information
Talking to databases

There's no need to envision some secret machine lurking.

Basically, a server is a system that responds to requests.

3. What You See Is What You Get (Frontend) :

As soon as the browser has the files it needs, it can show the website.

This is where Frontend Development can help.

The website that you can see and interact with is the frontend.

For example:

Buttons
Menus
Text
Images
Forms
Cards
Animations

In this regard three technologies are particularly relevant:

HTML — Structure :

HTML (Hyper Text Markup Language) is a language used by the browser to tell it what to show.

For example:

This is a heading.
You can write a paragraph here.
This is a button.

CSS — Appearance :

CSS is used for the appearance of the page.

It can change:

Colours
Fonts
Spacing
Layout
Sizes
Animations

JavaScript — Behaviour :

JavaScript programming is used to make the page interactive.

Click, for instance, in the following way:

“Show Results”

JavaScript can take that action and change the content of the page.

So remember:

HTML = Structure

CSS = Appearance

JavaScript = Behaviour

4. But Where Does the Actual Data Come From?

Now, suppose you are on an online shopping site.

The homepage might load but if you click on “My Orders”, the previous orders should look up.

Where were these data derived?

This is where backend and database come into picture.

5. The API connects different parts :

The term API will be encountered a lot when you are learning web development.

Application Programming Interface is known as API.

This may sound complicated, but it's actually very simple.

Imagine a restaurant :

You're the consumer.
Preparation of the food is done in the kitchen.
Your waiters take your orders to the kitchen and return with it.

In this example:

You = User

Kitchen = Backend

Waiter = API

Food = Data/Response

The API is a means for various components of a software system to communicate.

In this case, the frontend will send a request to an API, which will then be linked to the backend.

6.The Backend is the part that handles all of the work behind-the-scenes :

The Backend is the part of the application that is used for logic and processing in the background.

Suppose you enter:

Email: student@example.com

Password: ******

and click Login.

This is the information that is collected on the frontend.

Then, it goes to backend.

The backend can check:

“Is this user already registered?”
“Is the Key number correct?

To allow or block this login.

The backend responds with a result to the frontend.

That is the reason why a web page is so much more than the page that you see.

7. A database contains information :

But how is it that the backend knows your account details?

Can extract information from a database.

A database is an information storage and organization system that applications can access when required.

A Web site can contain:

User accounts
Profiles
Orders
Blog posts
Comments
Products
Scores

For instance, student platforms may contain:

Student Email Course

John student@example.com CSE

The application will be able to verify your account based on the information that you've stored when you log in.

8. The Complete Journey :

Let's put all of the above together.

Suppose you enter a site and log on.

Step 1

The web address is typed in.

Step 2

DNS is used to locate the server that belongs to that domain.

Step 3

Your browser makes a request.

Step 4

The server returns the resources that are required to display the web page.

Step 5

The Frontend is used to show the webpage, with HTML, CSS and JavaScript.

Step 6

You click Login.

Step 7

Your login attempt is sent over an API from the frontend.

Step 8

The request goes to the backend where it is executed.

Step 9

The back-end validates with the database.

Step 10

The requested result is returned from the database.

Step 11

A response is sent back to the backend.

Step 12

The outcome is displayed on the front end.

So the "simplified" flow is like this:

You

↓

Browser

↓

Internet

↓

Server

↓

Frontend

↓

API

↓

Backend

↓

Database

↓

Response

↓

Your Screen

9. A Real-Life Example: Food Delivery

Let me give you an example that is even closer to you.

Imagine that you want to order some pizza online.

Frontend : you see the restaurants, the menu and can click the order button

API : carries your request to the application backend

Backend : your order is processed

Database : your personal information, the status of your order and other data are stored

Server : processes the requests and provides responses

What you see is only the result of a long process that happened after you pushed the order button.

10. Do You Need to Know Everything at Once?

No, not really.

That’s why many new developers get lost at the beginning.

You don’t need to learn frontend and backend, APIs, databases, and servers at once.

First, get a general understanding of the terms:

Frontend: what the user sees
Backend: what happens on the server
API: how the communication between the server and the client happens
Database: where the information is stored

Once you understand the bigger picture, it will be easier to proceed to particular programming languages, frameworks, and technologies like React, Node.js, MySQL, MongoDB, etc.

Final Takeaway

So, what did we learn today?

A website is rarely a simple HTML file and a browser.

Modern websites and web applications are complex systems with multiple elements.

In short, they have a frontend (what you see), an API (how the communication between the frontend and the backend happens), a backend (what happens on the server), a database (where the data is stored), and a server (that hosts the application).

The next time you press a button on a website or mobile application, remember that a long process has just started.

That’s one of the beautiful things about computer science: you can have a 1-pixel button on a website, and behind it, there is a complex system that consists of hundreds or thousands of lines of code.

Was this guide helpful? If yes, share it with a friend that is starting their coding or software development journey or subscribe to The Student Stack to see more content like this!

Search This Blog

The Student Stack