Client-Server
Model and HTTP
Basics
How the web actually works behind the
scenes
• By the end of this lecture, you should be
able to:
• Explain the client–server model in
the web context.
• Describe the HTTP
request/response cycle.
Learning Outcomes • Identify common HTTP methods
and status codes.
• Understand the role of HTTPS in
secure communication.
Client-Server Model
Client Sends requests
(e.g., typing URL,
(Browser) clicking link).
Processes
requests, sends
Server back responses
(HTML, CSS,
JSON, etc.).
Communication is over
HTTP/HTTPS protocol.
Separation of frontend
(client) and backend
(server).
Why Client–
Server Model Supports scalability (many
clients can connect).
Matters
Enables platform
independence (any browser
can talk to any server).
HTTP = HyperText Transfer Protocol.
HTTP Basics Stateless protocol: server does not
remember previous requests.
Communication = series of requests
and responses.
Example: Loading google.com
makes dozens of HTTP requests (HTML,
CSS, JS, images).
Structure of
HTTP Request
• Method (GET, POST, etc.)
• URL (resource address)
• Headers (metadata: User-
Agent, Content-Type,
Cookies)
• Body (optional, usually in
POST/PUT)
Structure of
HTTP Response
• Status Line (status code +
message)
• Headers (server info, content-type,
caching)
• Body (HTML, JSON, image, etc.)
Common HTTP
Status Codes
• 200 OK – Successful request.
• 301 Moved Permanently –
Redirect to another URL.
• 404 Not Found – Resource not
available.
• 500 Internal Server Error –
Something broke on server.
HTTPS
• HTTPS = HTTP + TLS/SSL
encryption.
• Ensures:
• Confidentiality (data encrypted).
• Integrity (data not altered).
• Authentication (valid server
identity).
• Always look for padlock in
browser.
Open Browser DevTools → Network
tab.
Load google.com.
Activity Observe:
• Requests made (HTML, CSS, JS, images).
• Methods used (mostly GET).
• Status codes (200, 301, etc.).
• Headers (User-Agent, Content-Type).
Client–Server = Browser Server
communication.
HTTP = stateless protocol with
request/response cycle.
Methods = GET, POST, PUT, DELETE.
Summary
Status codes = 200, 301, 404, 500.
HTTPS = secure HTTP with TLS/SSL.
How Does the
Internet Works?
How do
Websites work?
Exploring Websites Locally:
Using 1. Right-click on any element and
select "Inspect."
Chrome
Developer
Tools 2. Modify HTML or CSS directly in the
browser.
3. Changes are local and reset upon
refresh.
Edit and Experiment:
- Change button text (e.g., "Google
Search" to "My Search").
Practical
Example
- Modify headlines on websites like
TechCrunch or BBC News.
Note: Changes are not permanent;
they refresh back to the original.
Next Steps:
Looking - Deep dive into HTML, CSS,
Ahead and JavaScript.
- Learn to create and host
your own websites.
