Explain the difference between the Internet and the World Wide Web.
WEB FOUNDATIONS
Internet & How the Web Works
Start Full Stack MERN from the beginning. Understand what happens behind the scenes when you open a website, how browsers communicate with servers, how DNS finds a server, how HTTP transfers resources, and how HTML, CSS and JavaScript finally become the web page you see.
LEARNING OBJECTIVES
What you will learn
Explain what a client, browser, server and web server do.
Explain IP addresses, domain names and DNS in simple terms.
Break a URL into its important components.
Explain the basic purpose of ports and protocols.
Describe the client-server request and response model.
Explain HTTP requests, responses, methods, headers and status codes.
Explain why HTTPS is used.
Explain how HTML, CSS and JavaScript work together.
Describe the basic browser page-loading and rendering process.
Differentiate frontend, backend, database and API.
Trace what happens when a user enters a URL.
Identify common web-development components in a real application.
Build a correct mental model before starting HTML, CSS and JavaScript.
CONCEPT 01
What are we actually learning?
Before writing a single line of HTML, CSS or JavaScript, you need to understand the environment in which web applications work.
When you open a website, it may look like a single page on your screen. Internally, however, many systems cooperate to produce that page.
Your device runs a browser. The browser communicates with remote systems through the Internet. A domain name is resolved to an IP address. The browser sends requests to a server. The server sends responses containing resources such as HTML, CSS, JavaScript, images and other data.
Understanding this complete chain will make later MERN topics much easier. When you eventually learn Express, REST APIs, React and MongoDB, you will already understand where each technology fits.
MERN development becomes much easier when you understand the complete journey of data before learning individual technologies.
CONCEPT 02
Internet vs World Wide Web
These two terms are often used as if they mean the same thing, but they are not the same.
The Internet is the global network infrastructure that allows computers and devices to communicate with each other.
The World Wide Web is one service that operates on top of that infrastructure. Websites and web applications use technologies such as URLs, HTTP, HTML, CSS and JavaScript to operate on the Web.
Other services can also use the Internet. Email, online gaming, file transfer and many other systems are not simply the World Wide Web.
Think of the Internet as the road network and the Web as one major transportation service using those roads.
| Term | Meaning |
|---|---|
| Internet | The global network of interconnected systems. |
| Web | A system of linked resources and applications accessed through web technologies. |
CONCEPT 03
Client and Server
The client-server model is one of the most important ideas in web development.
A client is the system that requests a resource or service. In normal web browsing, the browser is the client.
A server is a system that receives requests, processes them and sends responses.
The client and server can be physically far apart. They communicate through networks using defined protocols.
When you open codebhavya.com, your browser acts as the client and the web infrastructure serving CodeBhavya provides the requested resources.
- User
- Browser
- Internet
- Server
- Response
- Browser
CONCEPT 04
What is a Browser?
A browser is much more than an application that displays websites.
A browser understands web technologies and provides the environment in which web pages execute.
It sends network requests, receives resources, parses HTML, builds the DOM, applies CSS, executes JavaScript and displays the resulting interface.
Browsers also provide developer tools that allow developers to inspect HTML, CSS, JavaScript, network requests, storage and runtime problems.
The browser is both a network client and an execution environment for web applications.
Google Chrome
Mozilla Firefox
Microsoft Edge
Safari
CONCEPT 05
What is a Server?
A server is a system that provides resources or services to clients.
A web server may receive an HTTP request and return an HTML page, an image, a JavaScript file or other resource.
In modern applications, the server may also execute application logic, authenticate users, validate data, communicate with databases and return JSON responses.
A production application may use several different servers or services rather than one physical machine.
Server Responsibilities
- Receive requests
- Process application logic
- Read or modify data
- Communicate with databases
- Authenticate users
- Return responses
- Serve static resources
CONCEPT 06
IP Addresses
Computers communicate using network addresses. One important type is the IP address.
An IP address identifies a network interface in an IP network.
Humans generally prefer names such as codebhavya.com rather than remembering numerical network addresses.
DNS provides the naming system that helps map domain names to IP addresses.
An IP address identifies a network endpoint, but it should not be treated as a permanent identity for a website. Hosting architectures, load balancers and DNS configurations can change.
IPv4 example: 192.0.2.10
IPv6 example: 2001:db8::10
CONCEPT 07
Domain Names
A domain name provides a human-friendly name for Internet resources.
Instead of asking users to remember an IP address, websites can use domain names.
A domain can have different components, such as a subdomain and registered domain name.
The browser uses DNS to discover the network information needed to communicate with the appropriate server.
https://www.codebhavya.com/JavaScript/
httpsProtocol scheme
wwwSubdomain
codebhavya.comDomain name
/JavaScript/Path
CONCEPT 08
DNS — The Internet's Naming System
DNS helps translate human-friendly domain names into network information.
Suppose you enter codebhavya.com into your browser. Your browser cannot send an HTTP request to a name alone; it needs network information such as an IP address.
DNS allows the domain name to be resolved through the DNS system.
The complete DNS process can involve browser caches, operating-system caches, recursive resolvers and authoritative DNS infrastructure.
DNS is not the web page itself. DNS helps locate the network destination associated with a domain.
- Browser asks for domain information
- Local cache may be checked
- DNS resolver is consulted
- DNS hierarchy is followed when necessary
- IP information is returned
- Browser can continue toward the destination
CONCEPT 09
URLs — Understanding Web Addresses
A URL identifies a resource and provides information about how it should be accessed.
https://www.example.com:443/products/phones?id=25#reviews
httpsScheme / protocol
www.example.comHost
:443Port
/products/phonesPath
?id=25Query string
#reviewsFragment identifier
CONCEPT 10
Ports
A computer can provide many network services. Ports help identify the destination service associated with network traffic.
An IP address helps identify a network endpoint, while a port identifies a service endpoint on that host.
Common web-related ports include 80 for HTTP and 443 for HTTPS.
Developers also frequently run local applications on ports such as 3000, 5000, 5173 or 8000.
localhost identifies your own machine; the port identifies the service endpoint your application is listening on.
http://localhost:3000
http://localhost:5000
https://example.com:443
CONCEPT 11
Packets and Data on the Network
Data sent over networks is transported through networking mechanisms that break communication into manageable units.
At a beginner level, think of network communication as data being carried across a network through packets.
Packets contain information needed for delivery and are processed by networking equipment and protocols.
You do not need to become a network engineer to learn MERN, but understanding that your HTTP communication travels through networking layers helps explain latency, failures and debugging.
Do not imagine the Internet as one direct cable between your browser and a server. Real communication can pass through multiple network devices and intermediary systems.
CONCEPT 12
Protocols — Rules for Communication
Computers need agreed rules to communicate reliably.
A protocol defines how systems communicate and interpret information.
In web development, HTTP is one of the most important application-layer protocols.
Other protocols and technologies operate at different layers of the networking stack.
IP — network addressing and routing
TCP — reliable transport
UDP — connectionless transport
HTTP — web application communication
TLS — cryptographic protection used with HTTPS
CONCEPT 13
HTTP — How the Browser Talks to a Server
HTTP is the foundation of communication between web clients and servers.
HTTP uses a request-response model. The client sends a request and the server sends a response.
HTTP is used not only for HTML pages but also for images, scripts, APIs and other resources.
Modern applications use HTTP extensively for communication between browsers, backend servers and APIs.
GET /JavaScript/ HTTP/1.1
Host: codebhavya.com
Accept: text/htmlHTTP/1.1 200 OK
Content-Type: text/html
<!doctype html>
...CONCEPT 14
HTTP Methods
HTTP methods communicate the intended operation for a request.
Later, when you build Express APIs, these methods will become routes such as GET /students, POST /students and DELETE /students/:id.
Retrieve a representation of a resource.
Submit data or request creation/processing.
Replace a resource representation.
Partially modify a resource.
Request removal of a resource.
CONCEPT 15
HTTP Status Codes
The server uses status codes to communicate the outcome of a request.
Informational
Successful
Redirection
Client-side error
Server-side error
200 — OK
201 — Created
301 — Moved Permanently
400 — Bad Request
401 — Unauthorized
403 — Forbidden
404 — Not Found
500 — Internal Server Error
CONCEPT 16
HTTP Headers
Headers carry metadata and instructions associated with requests and responses.
Headers become extremely important later in MERN development.
Authentication information, content types, caching instructions and many other behaviours are communicated through headers.
Content-Type
Accept
Authorization
Cookie
Cache-Control
User-Agent
Location
CONCEPT 17
HTTPS — Secure HTTP
HTTPS is HTTP protected using TLS.
HTTPS provides cryptographic protection for communication between a client and server.
This helps protect data from being read or modified by unauthorized parties while it travels across the network.
HTTPS is essential for modern production websites and applications.
HTTP explains web communication. HTTPS adds TLS-based protection to that communication.
CONCEPT 18
HTML, CSS and JavaScript
These three technologies have different primary responsibilities in a web page.
HTML ↓ Structure CSS ↓ Appearance JavaScript ↓ Behaviour
| Term | Meaning |
|---|---|
| HTML | Structure and meaning of the document. |
| CSS | Presentation, styling and layout. |
| JavaScript | Behaviour and application logic. |
CONCEPT 19
What Happens When a Browser Loads a Page?
A web page is assembled from multiple resources.
The browser requests the initial document.
The returned HTML is parsed into a DOM tree.
The browser discovers additional resources such as stylesheets, scripts and images and may request them.
CSS is processed to determine presentation and layout.
JavaScript may execute and change the document or request additional data.
The browser then presents the resulting page to the user.
- Navigate to URL
- Resolve network destination
- Connect to server
- Send HTTP request
- Receive HTML
- Parse HTML
- Build DOM
- Load CSS and other resources
- Execute JavaScript
- Calculate layout and paint
- Display interactive page
CONCEPT 20
Frontend and Backend
MERN development becomes much easier once you know where frontend and backend responsibilities live.
Frontend and backend are connected through communication mechanisms such as HTTP APIs.
🖥️ Frontend
- User interface
- Browser interaction
- HTML
- CSS
- JavaScript
- React
⚙️ Backend
- Business logic
- Authentication
- Validation
- APIs
- Server-side processing
- Database communication
- Node.js
- Express
CONCEPT 21
Where Does MongoDB Fit?
A full-stack application often needs persistent data.
A browser should not normally be responsible for directly storing and managing the application's central database.
The backend communicates with the database and applies rules before returning data to the client.
In MERN, MongoDB is the database layer, while Node.js and Express commonly provide the backend layer.
- React UI
- HTTP request
- Express route
- Backend logic
- MongoDB
- Backend response
- React UI update
CONCEPT 22
What is an API?
An API provides a defined way for software systems to communicate.
In MERN applications, a backend API commonly exposes HTTP endpoints that a React frontend can call.
The frontend does not need to know how the database works internally. It communicates with the backend through the API contract.
Later you will build these APIs yourself with Node.js and Express.
GET /api/students Response: { "id": 101, "name": "Anita", "branch": "CSE" }
CONCEPT 23
Static vs Dynamic Websites
Not every website works in exactly the same way.
A simple documentation page may be largely static, while a placement management system may dynamically load student, company and application information.
| Term | Meaning |
|---|---|
| Static | Resources can be served largely as prepared files. |
| Dynamic | Content or responses may be generated based on data, users, requests or application logic. |
CONCEPT 24
Cookies, Sessions and State — First Introduction
HTTP itself is stateless, but web applications often need to remember users and application state.
A browser can store cookies associated with websites.
Cookies can participate in authentication and session mechanisms.
Later in the MERN course we will study authentication, JWTs, cookies and sessions properly. For now, remember that HTTP requests do not automatically carry all application state from one request to the next.
Do not memorize cookies as simply 'login storage'. Cookies have many uses, and secure authentication requires careful design.
CONCEPT 25
Caching — Why Websites Can Load Faster
Browsers and intermediary systems can cache resources.
Caching can reduce repeated downloads and improve performance.
HTTP provides mechanisms that allow clients and servers to communicate caching behaviour through headers.
Caching becomes particularly important when building production web applications.
Caching can improve performance, but stale data and cache invalidation are important engineering problems.
CONCEPT 26
CDNs — Delivering Content Efficiently
Large applications often use Content Delivery Networks.
A CDN distributes or caches content across geographically distributed infrastructure.
A user may receive static resources from a nearby edge location rather than always retrieving them from one origin server.
You do not need to master CDN architecture yet, but you should know why production systems use it.
CONCEPT 27
Putting Everything Together
Now connect all the concepts into one mental model.
This is the foundation for the entire MERN course.
React will eventually control the frontend interface.
Node.js will provide the JavaScript runtime on the server.
Express will help build HTTP APIs.
MongoDB will store application data.
The browser and backend will communicate primarily through HTTP.
- User
- Browser
- DNS
- Internet
- HTTPS
- Web server / application server
- API
- Backend logic
- MongoDB
- Response
- Browser UI
PROGRAM / SYSTEM TRACING
Follow the execution step by step
User enters: https://codebhavya.com/Browser parses the URLBrowser determines the hostDNS resolution is performed when neededNetwork connection is establishedBrowser sends an HTTP requestServer receives the requestServer prepares a responseBrowser receives the responseBrowser parses HTMLBrowser requests additional resourcesCSS is processedJavaScript is executedBrowser renders the pageUser interacts with the pageQUICK REVISION
Remember these essential ideas
Global network infrastructure.
A system of web resources and applications using Internet communication.
The system making a request.
The system providing a service or response.
Resolves domain names to network information.
Network addressing mechanism.
Address identifying a web resource.
Application-layer protocol used for web communication.
HTTP protected using TLS.
User-facing application layer.
Server-side application layer.
Defined interface for software communication.
Persistent data storage system.
Frontend library used later in the MERN stack.
JavaScript runtime used later for backend development.
Backend framework used later to build HTTP APIs.
Database technology used in MERN.
PLACEMENT & INTERVIEW
Explain the concept, don't just memorize it
01What is the difference between the Internet and the Web?
The Internet is the underlying global network infrastructure. The Web is a system of resources and applications that uses web technologies and protocols over that infrastructure.
02What is the client-server model?
The client initiates a request for a resource or service, and the server processes that request and returns a response.
03Why do we need DNS?
DNS provides the naming system that allows human-friendly domain names to be resolved to network information needed to reach the appropriate destination.
04What is HTTP?
HTTP is an application-layer protocol used for communication between clients and servers on the Web.
05What is the difference between HTTP and HTTPS?
HTTPS is HTTP used with TLS-based cryptographic protection.
06What happens after the browser receives HTML?
The browser parses the HTML into a DOM structure, discovers other resources, processes CSS, executes JavaScript and renders the page.
07What is the role of an API in MERN?
The API provides a communication interface between the frontend and backend, commonly using HTTP requests and responses.
08Why does a MERN application need a backend?
The backend can enforce business rules, validate input, authenticate users, communicate with databases and provide controlled APIs to clients.
PRACTICE ARENA
Now apply what you learned
Try these problems without immediately looking at the solution. The goal is to build understanding, not just finish questions.
Trace a Website
Choose any website and write the complete journey from entering its URL until the page appears.
Self-reported completion · complete the work before marking it.
URL Breakdown
Take five real URLs and identify scheme, host, port if present, path, query string and fragment.
Self-reported completion · complete the work before marking it.
Client or Server?
Classify ten real-world web actions as primarily client-side, server-side or involving both.
Self-reported completion · complete the work before marking it.
HTTP Detective
Open browser DevTools, visit a website and inspect one document request. Identify its method, status code, headers and response type.
Self-reported completion · complete the work before marking it.
Design a Web System
Design a simple student portal and identify its browser, frontend, backend, API and database responsibilities.
Self-reported completion · complete the work before marking it.
Explain Without Memorizing
Explain what happens when someone enters https://example.com into a browser using your own words.
Self-reported completion · complete the work before marking it.
KNOWLEDGE CHECK
Test your understanding
Which system normally initiates an HTTP request when a user loads a web page?
What is the main purpose of DNS?
Which HTTP status-code class represents successful responses?
Which technology primarily defines the structure and meaning of web documents?
Which component will later provide the database layer in MERN?
Which component is primarily responsible for server-side JavaScript execution in MERN?
GLOSSARY
Terms to remember
Application Programming Interface
Software used to access and interact with web resources.
System that requests a service or resource.
Domain Name System.
Human-readable name used to identify an Internet destination.
Hypertext Transfer Protocol.
HTTP protected using TLS.
Internet Protocol.
MongoDB, Express, React and Node.js.
Logical endpoint used by network services.
System that provides a service or resource.
Uniform Resource Locator.
LEVEL COMPLETE
You now have the foundation
A MERN application is not just React + Node + Express + MongoDB. It is a complete system in which a browser communicates through networks and HTTP with backend services, which communicate with databases and return data to the user interface.