How a Website Works: Client & Server
When you open a website in a browser, communication happens between your device and another system on the Internet.
Your browser usually acts as a client. It sends a request to a server, and the server processes that request and sends a response back.
The basic flow is:
Client → Request → Server → Response → Client
Understanding this process is one of the most important foundations of web development.
What Is a Client?
A client is software or a device that requests resources or services from a server.
In web development, a web browser commonly acts as a client.
Examples include:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
- Opera
Suppose you enter a website address into Chrome.
Chrome needs resources from the website’s server, so it sends a request.
In simple terms:
Client = Sends a Request
What Is a Server?
A server is a computer system or software service that receives requests from clients, processes those requests, and sends responses.
A web server may provide:
- HTML files
- CSS files
- JavaScript files
- Images
- Videos
- Documents
- API data
- Dynamically generated content
In simple terms:
Server = Receives Request + Processes Request + Sends Response
Client vs Server
| Client | Server |
|---|---|
| Sends requests | Receives requests |
| Receives responses | Sends responses |
| Often interacts directly with the user | Provides resources or services |
| A browser can act as a client | A web server can serve website resources |
The client and server work together to make websites and web applications function.
What Is a Request?
A request is a message sent by a client to a server asking for a resource or action.
For example, your browser may request:
- A homepage
- A product page
- An image
- Search results
- User information
- API data
Suppose you open a product page.
Your browser effectively asks the server:
“Please send me the resources or data required for this product page.”
That is a request.
What Is a Response?
A response is the server’s reply to a client’s request.
For example:
Client: Send me the product page.
Server: Here is the requested page or data.
The server may return HTML, images, JSON data, or other resources depending on the application.
The basic communication is:
Client → Request → Server
Then:
Server → Response → Client
What Is the Request-Response Cycle?
The communication process between a client and server is commonly called the request-response cycle.
The basic flow is:
Client → HTTP Request → Server → HTTP Response → Client
Let’s understand it step by step.
Step 1 — User Performs an Action
A user might:
- Enter a website address
- Click a link
- Search for something
- Open a product
- Submit a form
- Log in to an account
Step 2 — Client Sends a Request
The browser creates and sends a request to the appropriate server.
For example:
Browser → “Send me the homepage.”
Step 3 — Server Receives the Request
The server receives the request and determines what resource or action is required.
Step 4 — Server Processes the Request
For a simple static resource, the server may return an existing file.
For a dynamic application, the server may need additional processing.
For example:
Server → Backend → Database
Step 5 — Server Sends a Response
After processing the request, the server sends an appropriate response back to the client.
Step 6 — Browser Receives the Response
The browser receives the response and processes the returned resources.
Step 7 — User Sees the Result
The browser displays the resulting page or updates part of the application.
How Does a Website Work?
At a beginner level, remember this flow:
User → Browser → Request → Server → Response → Browser → User
A more web-specific version is:
Client → HTTP Request → Server → HTTP Response → Client
When you open a website:
- You enter a website address.
- The browser determines where to send the request.
- The browser establishes the required connection.
- The browser sends a request.
- The server receives the request.
- The server processes it.
- The server sends a response.
- The browser receives the response.
- The browser processes the returned resources.
- The result is displayed to you.
What Is HTTP?
HTTP = Hypertext Transfer Protocol
HTTP is a request-response protocol used for communication on the Web.
A simplified flow is:
Client → HTTP Request → Server
Server → HTTP Response → Client
You do not need to understand all HTTP details yet. We will study HTTP and HTTPS in more detail in a later class.
Static Website Request
A simple static website may contain prebuilt files such as:
- HTML
- CSS
- JavaScript
- Images
A simplified flow can be:
Browser → Server → Website Files → Browser
The browser requests resources, and the server returns the appropriate files.
Dynamic Website Request
A dynamic web application may require server-side logic and stored data.
A simplified flow can be:
Browser → Server → Backend → Database
Then:
Database → Backend → Server → Browser
For example, an e-commerce website may retrieve current product information from a database before returning the result.
What Is Backend?
The backend is the server-side part of a web application.
Backend logic can perform tasks such as:
- Processing forms
- Checking login information
- Retrieving products
- Creating orders
- Updating information
- Checking user permissions
- Communicating with a database
In simple terms:
Frontend = What users see and interact with
Backend = Server-side logic and processing
Backend development will be covered in detail later in this course.
What Is a Database?
A database is an organized system used to store and manage data.
A web application may store:
- User accounts
- Product information
- Orders
- Blog posts
- Customer information
- Inventory
- Settings
For example, when a customer searches for a product, backend logic may retrieve matching information from a database.
A simplified flow is:
Client → Server → Backend → Database
Then:
Database → Backend → Server → Client
Practical Example: Online Computer Shop
Imagine a customer opens an online computer shop and clicks a laptop product.
The flow might look like this:
Customer → Browser → Request → Server → Response → Browser → Product Page
What happens?
1. Customer
Clicks the laptop product.
2. Browser / Client
Sends a request.
3. Server
Receives the request.
4. Backend
May process the request.
5. Database
May provide product information.
6. Server
Creates and sends a response.
7. Browser
Receives and processes the response.
8. Customer
Sees the product page.
This is a practical example of client-server communication.
Practical Example: Login System
Suppose a user enters an email and password and clicks Login.
A simplified flow is:
User → Browser → Login Request → Server → Backend → Database
The application processes the request.
Then:
Database → Backend → Server → Response → Browser → User
The browser may then display a dashboard, an error message, or another appropriate result.
This is an example of a dynamic web application.
Client-Server Architecture
A system in which clients request resources or services from servers is commonly described as client-server architecture.
A simplified architecture is:
User
↓
Browser / Client
↓
HTTP Request
↓
Server
↓
Backend
↓
Database
The result can then travel back:
Database
↓
Backend
↓
Server
↓
HTTP Response
↓
Browser
↓
User
Not every request needs a backend or database, but this model helps explain how many modern web applications work.
Common Beginner Mistakes
- Thinking the client and server are the same thing.
- Thinking a browser is the Internet.
- Thinking every request must use a database.
- Thinking a server only stores website files.
- Confusing frontend and backend.
- Memorizing the request-response diagram without understanding each step.
- Assuming every website uses exactly the same architecture.
New & Difficult Words
| Term | Meaning |
|---|---|
| Client | Software or device that requests a resource or service |
| Server | A system that receives requests and provides responses |
| Request | A message asking for a resource or action |
| Response | A server’s reply to a request |
| HTTP | Hypertext Transfer Protocol |
| Frontend | The user-facing part of an application |
| Backend | The server-side logic of an application |
| Database | A system used to store and manage data |
| Static Website | A site that can serve prebuilt resources |
| Dynamic Website | A site/application where content may be generated or retrieved dynamically |
| Architecture | The high-level structure of a system |
Important Notes
Remember:
Client → Sends Request
Server → Receives Request
Server → Processes Request
Server → Sends Response
Client → Receives Response
The most important flow is:
Client → HTTP Request → Server → HTTP Response → Client
For a dynamic application:
Client → Server → Backend → Database
and:
Database → Backend → Server → Client
Practice Questions
- What is a client?
- What is a server?
- What is a request?
- What is a response?
- What does HTTP stand for?
- What is the request-response cycle?
- What is backend development?
- What is a database?
- What is the difference between a client and a server?
- Does every request require a database?
- What is the difference between a static and dynamic website?
- Explain what happens when you open a product page.
- Explain a basic login request.
- Draw the client-server communication flow.
Assignment
Choose any e-commerce or business website.
Imagine that you open one of its product or service pages.
Draw this basic flow:
User → Browser → Request → Server → Response → Browser → User
Then draw a dynamic application flow:
Client → Server → Backend → Database
Database → Backend → Server → Client
Write 5–10 sentences explaining what each component does.
Quiz
1. What is a client?
A client is software or a device that requests resources or services from a server.
2. What is a server?
A server is a system that receives requests, processes them, and sends responses.
3. What is a request?
A request is a message asking a server for a resource or action.
4. What is a response?
A response is the server’s reply to a client request.
5. What does HTTP stand for?
Hypertext Transfer Protocol.
6. Is a web browser a client?
Yes. A web browser commonly acts as a client.
7. Does every request require a database?
No. Some resources can be served without accessing a database.
8. What is backend logic?
Backend logic is server-side processing used to handle application operations and data.
Interview Questions
Q: What is client-server architecture?
Client-server architecture is a model where clients request resources or services and servers receive those requests, process them, and return responses.
Q: What is the difference between a client and a server?
A client requests resources or services, while a server receives and processes requests and sends responses.
Q: What is the request-response cycle?
It is the communication process where a client sends a request to a server and the server processes it and returns a response.
Q: What is the role of a backend?
The backend handles server-side application logic, data processing, authentication, database communication, and other server-side operations.
Q: What role does a database play in a web application?
A database stores and manages application data that backend logic can retrieve, create, update, or delete when required.
Class Summary
In Class 02, you learned how websites and web applications communicate using the client-server model.
The most important flow is:
Client → Request → Server → Response → Client
For HTTP communication:
Client → HTTP Request → Server → HTTP Response → Client
A dynamic application may also involve:
Client → Server → Backend → Database
Understanding client-server communication will make upcoming topics such as domains, DNS, HTTP, APIs, backend development, and databases much easier.