Chapter 1: Internet Basics
Before you can build for the web, you must first understand the web itself. The internet is not a magical cloud; it is a massive, physical network of connected computers that communicate using a set of standardized rules.
Understanding these foundational concepts is the first and most critical step in becoming a competent web developer. This chapter will demystify the core components that make browsing a website possible.
The Client-Server Model
At its core, the internet operates on a simple but powerful concept: the client-server model. Imagine a restaurant. You, the customer, are the client. The kitchen, where the food is prepared, is the server. You place an order (a request), and the kitchen prepares and sends back your food (a response).
- The Client: This is the device you use to access the internet, such as your laptop or smartphone, and more specifically, the web browser application (like Chrome or Firefox) running on that device. The client's job is to request information.
- The Server: This is a powerful computer, often stored in a large data center, that is always on and connected to the internet. Its job is to store website files (HTML, CSS, JavaScript) and serve them to clients when they are requested.
The Request-Response Cycle
When you type a website address into your browser and press Enter, your browser (the client) sends a request over the internet to the correct server. The server finds the requested files and sends them back as a response. Your browser then assembles these files and displays the website on your screen. This happens in milliseconds.
IP Addresses & DNS: The Phonebook
How does your browser know which server to send the request to? Every device connected to the internet has a unique identifier called an IP (Internet Protocol) Address, like 172.217.167.78. Think of it as the server's unique phone number.
Memorizing these numbers would be impossible. This is where DNS (Domain Name System) comes in. The DNS is the internet's global phonebook. It translates human-readable domain names (like google.com) into computer-readable IP addresses.
# The sequence of events:
1. You type google.com into your browser.
2. Browser asks DNS: "What is the IP for google.com?"
3. DNS responds: "172.217.167.78"
4. Browser connects to 172.217.167.78 directly.
HTTP/HTTPS: The Language of the Web
Once the client knows the server's address, it needs a standardized language to communicate. This is HTTP (Hypertext Transfer Protocol).
A client's HTTP request includes:
- A Method: The action the client wants to perform (
GETto retrieve data,POSTto submit data). - A Path: Which specific resource is being requested (e.g.,
/about.html).
The server's HTTP response includes:
- A Status Code: A number indicating the result.
200 OK(success),404 Not Found(error),500 Internal Server Error. - The Body: The actual content requested (the HTML code).
HTTPS is the secure version. The communication between your client and the server is encrypted, protecting sensitive information like passwords.
How Browsers Render Websites
A web browser is a complex piece of software. When it receives files from a server, it goes through a critical rendering process:
- Parsing HTML: Builds a tree of elements called the DOM (Document Object Model).
- Parsing CSS: Builds a tree of styles called the CSSOM.
- Creating Render Tree: Combines DOM and CSSOM to know what to display.
- Layout: Calculates the exact size and position of every element.
- Painting: Paints the pixels onto your screen.
Mini Task: Find an IP
- Open your computer's Terminal or Command Prompt.
- Type
ping codewithmsmaxpro.meand hit Enter. - Look at the output. You will see the exact IP address of the server hosting this website right now!