Web Fundamentals every aspiring Web Developer must know.

Introduction

Starting a journey into web development is exciting, but it's important to learn the basics first. These basics will help you understand how the web works and make smart choices when you start building websites.

What is the Internet?

The Internet is a global network of interconnected networks around the world that communicate using standard protocols.

Sounds confusing right? Let's break it down together.

  • A Network is a group of systems connected via a wired or wireless medium.

  • Networks can be classified into three major types.

    1. LAN – Local Area Network

    2. MAN – Metropolitan Area Network

    3. WAN – Wide area networks.

  • Simply put, the Internet is a collection of multiple WANs.

  • There are mainly two reasons why the Internet is so powerful:

    1. No one owns the Internet (it's independent) and

    2. No one can break the Internet (it's decentralized).

What is the Web?

  • The Web (short for World Wide Web or WWW) is a system of interlinked documents and resources accessed via the Internet.

  • It is one of the main services operating over the Internet, allowing users like us to view and interact with content such as text, images, videos, and more through web browsers.

  • Other services provided by the Internet, besides the Web, include email, file transfer, TELNET, and VOIP.

What is a client-server Architecture?

  • Client - Server Architecture is a fundamental model used in web and network computing that describes how two systems, a Client, and a Server, interact with each other.

  • This is the underlying architecture for many of the services we use daily, such as web browsing, email, file sharing, and more. Understanding how it works is crucial for anyone getting into web development.

    1. What is a Client?

      • This is the requesting device or application that initiates communication with a server.

      • Clients can be anything from a web browser, a mobile app, or even a command-line interface.

    2. What is a Server?

      • This is the responding system that listens for requests from clients and provides the necessary resources or services.

      • Servers can be dedicated machines, computers, or even software programs running on them.

      • "A server is like a restaurant kitchen—when you (the client) place an order (request), the kitchen (server) prepares the meal (data) and sends it back to you."

    3. What is a Web server?

      • A server is a broad term that refers to a computer or a software program designed to manage, store, and process data and to provide services or resources to other computers (clients) over a network.

      • A web server is a specialized server that is responsible for hosting websites and serving web pages to clients (usually web browsers) over the HTTP or HTTPS protocols.

      • This Server handles HTTP requests from clients, processes them, and sends back the appropriate HTTP responses containing the requested HTML documents, images, CSS files, JavaScript, and other resources.

How does a Client-Server Architecture Work?

Step 1: Client Sends a Request

  • The process begins with the client sending a request to the server.

  • This request could be for data, a web page, or any service the server provides.

  • Example: When you type example.com in your browser's address bar, the browser (client) sends an HTTP request to the server hosting the website.

Step 2: Server Receives the Request

  • The server is always open for serving incoming requests. When it receives a request, it processes it to determine what the client is asking for.

  • Example: Let's assume, The server hosting example.com receives the request for the homepage.

Step 3: Processing the Request

  • Processing the Request depending on the nature of the request, the server might need to:

    • Query a database to retrieve information.

    • Run a script or application to generate dynamic content.

    • Fetch a static resource like an HTML, CSS, or image file.

  • Example: The server queries a database for the latest articles to display on the homepage.

Step 4: Server Sends a Response

  • After processing the request, the server sends a response back to the client.

  • This response typically contains the requested resource, such as an HTML document, JSON data, or an image.

  • Example: The server sends the HTML document for the homepage along with any associated CSS, JavaScript, and images.

Step 5: Client Receives and Renders the Response

  • The client receives the response and takes the necessary actions.

  • In the case of a web browser, it parses the HTML, applies the CSS, and executes any JavaScript, rendering the webpage for the user to see.

  • Example: Your browser displays the homepage of example.com with all the content and styling.

Key Components of the Internet

Several key components make the Internet possible. These include:

  • Hardware: Physical devices like computers, servers, routers, switches, cables, and satellites.

  • ISPs (Internet Service Providers): Companies that provide Internet access to individuals and organizations.

  • IP Address: Every device connected to the Internet has a unique IP address, which is like a home address for your computer. There are two types: IPv4 (e.g., 192.0.2.1) and IPv6 (e.g., 2001:0db8:85a3:0000:0000:8a2e:0370:7334).

  • Protocols: Rules that govern how data is transmitted and received over the Internet.

    1. TCP/IP: The Transmission Control Protocol (TCP) and Internet Protocol (IP) work together to ensure data is sent and received correctly. TCP breaks data into packets and ensures they are delivered in the correct order, while IP handles the addressing and routing of these packets.

    2. HTTP (HyperText Transfer Protocol): This is the protocol used for transmitting web pages over the Internet. When you access a website, your browser sends an HTTP request to the server, and the server responds with the requested data.

    3. HTTPS: This is a secure version of HTTP, where the data is encrypted using SSL/TLS (Secure Sockets Layer/Transport Layer Security). HTTPS ensures that data exchanged between your browser and the server is secure from eavesdroppers.

  • Domain Name System (DNS): A system that translates human-readable domain names (like www.example.com) into IP addresses that computers can understand.

    • When you enter a domain name, your device contacts a DNS server to find out the corresponding IP address.

    • To speed up this process, DNS results are often cached (stored) temporarily by your device, your router, and your ISP's DNS servers.

  • Data Centers and Servers: Facilities that store and manage the data and services accessible on the Internet. These are large facilities that house thousands of servers, providing the physical infrastructure that supports websites, cloud services, and other online resources.

  • Internet Backbone: High-capacity data routes that carry Internet traffic across the globe. This is composed of fiber-optic cables that can transmit data at incredible speeds, often through undersea cables that cross oceans.

  • Firewalls: Firewalls are security systems that monitor and control incoming and outgoing network traffic based on predetermined security rules. They act as a barrier between a trusted internal network and untrusted external networks.

How the Internet Works under the hood?

Step 1: Connecting to the Internet

  • Whether you're using a computer, smartphone, or tablet, your device needs to connect to the Internet to access online resources. This connection is made through an ISP (Internet Service Provider).

  • If you're at home, your device connects to a router (often wirelessly via Wi-Fi), which is connected to a modem. The modem is the device that communicates directly with your ISP, sending and receiving data over the Internet.

Step 2: Requesting Data: Entering a URL

  • When you enter a URL (e.g., www.example.com) in your web browser, your device needs to locate and retrieve the data associated with that URL.

  • The browser first needs to translate the domain name into an IP address. This is where the Domain Name System (DNS) comes in. The DNS is like the Internet's phone book. It translates domain names (like www.example.com) into IP addresses (like 192.0.2.1), which are numerical addresses that identify specific servers on the Internet.

Step 3: Routing the Data

  • Data on the Internet is broken down into smaller units called packets. Each packet contains a piece of the data, along with information about its destination (the IP address) and the order in which it should be reassembled.

  • Routers are devices that direct these packets across the Internet. When you request a web page, your packets travel through multiple routers, each one deciding the best path to take based on the current network conditions.

  • For long-distance transmission, your data travels across the high-speed, high-capacity routes that connect different parts of the world. These routes are built using fiber-optic cables, undersea cables, satellites, and other infrastructure.

Step 4: Data Reaches the Server

  • After a long journey, in milli seconds the packets reach the server that hosts the website or service you're trying to access.

  • The server processes your request and sends the requested data back to your device, again breaking it down into packets. These packets travel back through the network, potentially taking different routes, and are reassembled by your device into the original data.

Step 5: Rendering the Data

  • Once your device has all the packets, your browser reassembles them into the web page or content you requested. It processes the HTML, CSS, JavaScript, and other resources to render the web page on your screen.

Conclusion

The Internet is a complex system made up of many connected devices, large networks, and advanced protocols. It uses a mix of hardware, software, and protocols to work, allowing the global exchange of data and information that we use daily. Knowing how the Internet and its services work gives you a good base for learning web development.

Now that you understand the basics of the web, you can start learning HTML. Begin by exploring basic tags and creating your first simple webpage!

Good luck on your journey, and thank you for reading until the end.