From 312e6210cf7e08e32fee686bec022e6d1b89db58 Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Tue, 28 Oct 2025 22:02:11 +0530 Subject: [PATCH] Docs: started new docs for Internet Topic --- docs/internet/browser-devtools.mdx | 1 + docs/internet/cdn.mdx | 1 + docs/internet/clients-and-servers.mdx | 109 ++++++++++++++++ docs/internet/dns.mdx | 147 ++++++++++++++++++++++ docs/internet/firewalls.mdx | 1 + docs/internet/how-internet-works.mdx | 159 +++++++++++++++++++++++ docs/internet/http-vs-https.mdx | 173 ++++++++++++++++++++++++++ docs/internet/introduction.mdx | 110 ++++++++++++++++ docs/internet/ip-addresses.mdx | 121 ++++++++++++++++++ docs/internet/nslookup.mdx | 1 + docs/internet/ping-and-traceroute.mdx | 1 + docs/internet/quiz.mdx | 1 + docs/internet/routing-and-packets.mdx | 1 + docs/internet/security-basics.mdx | 1 + docs/internet/tcp-ip-model.mdx | 1 + docusaurus.config.js | 4 +- sidebars.ts | 78 +++++++++++- src/theme/MDXComponents.js | 2 + 18 files changed, 906 insertions(+), 6 deletions(-) create mode 100644 docs/internet/browser-devtools.mdx create mode 100644 docs/internet/cdn.mdx create mode 100644 docs/internet/clients-and-servers.mdx create mode 100644 docs/internet/dns.mdx create mode 100644 docs/internet/firewalls.mdx create mode 100644 docs/internet/how-internet-works.mdx create mode 100644 docs/internet/http-vs-https.mdx create mode 100644 docs/internet/introduction.mdx create mode 100644 docs/internet/ip-addresses.mdx create mode 100644 docs/internet/nslookup.mdx create mode 100644 docs/internet/ping-and-traceroute.mdx create mode 100644 docs/internet/quiz.mdx create mode 100644 docs/internet/routing-and-packets.mdx create mode 100644 docs/internet/security-basics.mdx create mode 100644 docs/internet/tcp-ip-model.mdx diff --git a/docs/internet/browser-devtools.mdx b/docs/internet/browser-devtools.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/internet/browser-devtools.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/internet/cdn.mdx b/docs/internet/cdn.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/internet/cdn.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/internet/clients-and-servers.mdx b/docs/internet/clients-and-servers.mdx new file mode 100644 index 0000000..d96c7a8 --- /dev/null +++ b/docs/internet/clients-and-servers.mdx @@ -0,0 +1,109 @@ +--- +title: "Clients and Servers" +description: "Understand how clients and servers form the backbone of the Internet — how requests and responses flow, what roles each plays, and how they communicate using protocols." +tags: [internet, client-server, networking, web, protocols] +sidebar_label: Clients & Servers +--- + +The Internet operates on a simple yet powerful concept: **clients and servers**. Every time you browse a website, watch a video, or send an email, your device (the *client*) communicates with another system (the *server*) that provides the requested data or service. + +## The Core Idea + +Think of the Internet as a giant conversation. Your computer, phone, or browser **asks questions** and servers **reply with answers**. + +In this model: +* The **client** initiates communication. +* The **server** listens, processes, and responds. + +## What Is a Client? + +A **client** is any device or software that requests resources or services from a server. + +Common examples: +* Web browsers (like Chrome, Firefox, Edge) +* Mobile apps +* Command-line tools (like `curl` or `wget`) + +Clients don’t store the data permanently, they only display or use it temporarily. + +```mermaid +graph TD + A[User - Client] -->|Request| B[Server] + B -->|Response| A +``` + +## What Is a Server? + +A **server** is a system (computer or application) that **stores**, **manages**, and **serves** data to clients over a network. It runs specialized software like: +* **Web servers** (e.g., Apache, Nginx) +* **Database servers** (e.g., MySQL, MongoDB) +* **Mail servers** (e.g., Postfix) + +Servers are designed for **reliability** and **availability**, often running 24/7 in data centers. + +## How Clients and Servers Communicate + +Communication follows a **request-response model**, using **protocols** such as HTTP or HTTPS. + +1. The client sends a **request** to a server. +2. The server **processes** the request. +3. The server sends a **response** (like an HTML page or JSON data). + +Here’s a simplified example: + +```http +GET /home HTTP/1.1 +Host: codeharborhub.github.io +``` + +The server replies: + +```http +HTTP/1.1 200 OK +Content-Type: text/html + + + Welcome to CodeHarborHub! + +``` + +## Real-World Example + +When you visit **https://codeharborhub.github.io**: +* Your browser (the client) sends a request. +* GitHub Pages (the server) finds and returns the website files. +* The browser displays them on your screen. + +You never directly see the server, but every webpage you view comes from one. + +## Types of Client–Server Architecture + +| Type | Description | Example | +|------|--------------|----------| +| **1-Tier** | Client and server on the same machine | Local software like MS Word | +| **2-Tier** | Direct client-server communication | Web browser ↔ Web server | +| **3-Tier** | Includes a database layer | Browser ↔ App server ↔ Database | +| **N-Tier** | Distributed services and APIs | Modern cloud-based systems | + +## Security & HTTPS + +When data travels between client and server, security is essential. With **HTTPS**, information is encrypted using **SSL/TLS**, preventing eavesdropping and tampering. + +```mermaid +sequenceDiagram + participant Client + participant Server + Client->>Server: Request (HTTPS) + Server-->>Client: Response (Encrypted) +``` + +## Key Takeaways + +* **Clients** request data or services. +* **Servers** store and deliver that data. +* They communicate through **standard protocols** (HTTP, HTTPS, FTP, etc.). +* The **request–response model** is at the heart of how the Internet works. +* Modern systems often involve **multiple servers and APIs** behind the scenes. + + +> “Every click, every page, every message you send, is just one client talking to one server somewhere in the world.” \ No newline at end of file diff --git a/docs/internet/dns.mdx b/docs/internet/dns.mdx new file mode 100644 index 0000000..249c810 --- /dev/null +++ b/docs/internet/dns.mdx @@ -0,0 +1,147 @@ +--- +title: "Domain Name System (DNS)" +description: "Explore the Domain Name System (DNS) — the backbone of the Internet that translates human-readable names into IP addresses. Learn its structure, types of records, and how the DNS resolution process works." +tags: [dns, networking, internet, domain, ip, infrastructure] +sidebar_label: DNS +--- + +The **Domain Name System (DNS)** is one of the most essential — yet often overlooked components of the Internet. It’s what allows us to use memorable names like `codeharborhub.github.io` instead of complex numerical IP addresses. + +DNS acts as the **Internet’s phonebook**, translating **domain names** into **IP addresses** so browsers can locate and communicate with servers worldwide. + +## Why DNS Exists + +Computers communicate using numbers (IP addresses), not words. Before DNS, users had to manually look up and remember numeric addresses — an unscalable and error-prone process. + +DNS was created to solve this by introducing a **distributed, hierarchical naming system** that’s: +* **Human-friendly**: You type names, not numbers. +* **Scalable**: Works across billions of domains. +* **Automatic**: Queries happen invisibly in milliseconds. + +## DNS Hierarchy Overview + +The DNS system is hierarchical, like a tree: + +```mermaid +graph TD + A[Root Zone - .] --> B[Top-Level Domains - .com, .org, .io] + B --> C[Second-Level Domains - example.com] + C --> D[Subdomains - blog.example.com] + D --> E[Hostnames - www, mail] +``` + +Each level plays a specific role in locating resources on the Internet. + +## How a DNS Query Works (Step-by-Step) + +When you enter a URL such as **https://codeharborhub.github.io**, your browser performs several steps to find its IP address: + +```mermaid +sequenceDiagram + participant User + participant Browser + participant Resolver + participant RootServer + participant TLDServer + participant AuthoritativeServer + + User->>Browser: Enter codeharborhub.github.io + Browser->>Resolver: Request IP address + Resolver->>RootServer: Ask for .io TLD info + RootServer-->>Resolver: Return .io TLD name servers + Resolver->>TLDServer: Ask for github.io info + TLDServer-->>Resolver: Return authoritative server + Resolver->>AuthoritativeServer: Ask for codeharborhub.github.io + AuthoritativeServer-->>Resolver: Return IP address + Resolver-->>Browser: 185.199.108.153 + Browser->>185.199.108.153: Send HTTP Request +``` + +All this happens in a fraction of a second. + +## The Four Key DNS Server Types + +| Server Type | Description | +|--------------|--------------| +| **DNS Resolver (Recursive Resolver)** | Usually provided by your ISP or a public DNS service (like Google `8.8.8.8`). It initiates and manages DNS lookups on your behalf. | +| **Root Name Server** | The top-level of DNS — knows where to find TLD servers (like `.com`, `.io`, `.net`). | +| **TLD Name Server** | Stores information about domains under a specific top-level domain. | +| **Authoritative Name Server** | The final authority — provides the actual IP address for a domain. | + +## Common DNS Record Types + +DNS uses **resource records (RRs)** to store information. Each type serves a specific purpose: + +| Record Type | Description | Example | +|--------------|--------------|----------| +| **A** | Maps a domain to an IPv4 address. | `codeharborhub.github.io → 185.199.108.153` | +| **AAAA** | Maps a domain to an IPv6 address. | `example.com → 2606:2800:220:1:248:1893:25c8:1946` | +| **CNAME** | Alias for another domain name. | `www.example.com → example.com` | +| **MX** | Mail server record (used for email routing). | `example.com → mail.example.com` | +| **TXT** | Stores arbitrary text info (SPF, DKIM, verification). | `v=spf1 include:_spf.google.com ~all` | +| **NS** | Identifies the authoritative name servers for a domain. | `example.com → ns1.example.net` | + +## DNS Caching — Speed Optimization + +To reduce lookup time and network load, DNS results are **cached** at multiple levels: +* **Browser Cache** – Short-term memory for recently visited domains. +* **Operating System Cache** – Local DNS records stored temporarily. +* **Resolver Cache** – Managed by ISPs or public DNS resolvers. + +Each record has a **TTL (Time To Live)** that defines how long it stays valid before a recheck. + +## Practical Example — DNS Lookup Flow + + + + You type `codeharborhub.github.io` → DNS finds its IP → Browser connects → Website loads. + It’s that simple — all automatic. + + + 1. The browser checks its cache. + 2. If not found, it asks the **local resolver**. + 3. The resolver queries **root**, **TLD**, and **authoritative** servers. + 4. The IP is returned and cached. + 5. The browser sends the HTTP request to that IP. + + + +## DNS in Action — Simulation + +```jsx live +function DnsDemo() { + const [resolved, setResolved] = React.useState(false); + const resolve = () => setResolved(true); + + return ( +
+

DNS Resolution Simulation

+

Domain: codeharborhub.github.io

+ + {resolved &&

IP Address: 185.199.108.153

} +
+ ); +} +``` + +## Security in DNS + +DNS was designed for speed and reliability — not security. Attackers exploit this through methods like: + +* **DNS Spoofing / Cache Poisoning:** Injecting false IP mappings. +* **DNS Hijacking:** Redirecting users to malicious servers. +* **Amplification Attacks:** Overloading DNS servers to cause downtime. + +To counter these, **DNSSEC (Domain Name System Security Extensions)** was introduced. It digitally signs DNS data, ensuring authenticity and integrity. + +## Key Takeaways + +* DNS is the **Internet’s distributed naming system** that maps domain names to IP addresses. +* The DNS hierarchy consists of **Root**, **TLD**, and **Authoritative** servers. +* DNS uses various **record types** (A, AAAA, CNAME, MX, TXT) to manage different data. +* **Caching** makes DNS fast, while **DNSSEC** makes it secure. +* Every click, website, or API request starts with a DNS lookup — it’s the silent foundation of the web. + +:::tip +Learn about [IP Addressing](./ip-addresses.mdx) — the numerical system that identifies every device on the Internet. +::: \ No newline at end of file diff --git a/docs/internet/firewalls.mdx b/docs/internet/firewalls.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/internet/firewalls.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/internet/how-internet-works.mdx b/docs/internet/how-internet-works.mdx new file mode 100644 index 0000000..c50e259 --- /dev/null +++ b/docs/internet/how-internet-works.mdx @@ -0,0 +1,159 @@ +--- +title: "How the Internet Works" +description: "Understand how data travels across the Internet, how devices communicate through packets and protocols, and how requests move between clients, servers, and networks." +tags: [internet, networking, data-transfer, tcp-ip, communication] +sidebar_label: How the Internet Works +--- + +The Internet may seem like magic — you type a URL, and a webpage instantly appears. But behind that simplicity lies an incredibly complex system of **data transmission, routing, and communication protocols** that make it all possible. + +## The Journey of a Web Request + +When you visit a website like `https://codeharborhub.github.io`, your browser follows a precise set of steps to fetch the data. + +```mermaid +sequenceDiagram + participant User as User Device (Client) + participant DNS as DNS Server + participant Server as Web Server + participant Router as Internet Routers + + User->>DNS: Query domain (codeharborhub.github.io) + DNS-->>User: Return IP address + User->>Router: Send HTTP/HTTPS Request + Router->>Server: Forward request to destination + Server-->>User: Send Response (HTML, CSS, JS) +``` + +
+ +Let’s break down what happens in this process + +## Step-by-Step: How It Works + +1. **DNS Resolution:** When you enter a domain name, your device first asks a **DNS server** to translate it into an IP address (like `142.250.190.78`). DNS works like the **phonebook of the Internet**, mapping human-readable names to machine-readable numbers. + +2. **Establishing a Connection:** Once the IP is known, your browser connects to the destination server using the **TCP/IP protocol** — the backbone of Internet communication. + +3. **Request and Response:** The browser sends an **HTTP request** asking for a webpage. The server processes the request and replies with an **HTTP response**, which contains HTML, CSS, and JavaScript files. + +4. **Rendering the Page:** The browser interprets these files, builds the page structure (DOM), applies styles, executes JavaScript, and displays the final page you see. + +## Visualizing the Process + + + + You can think of the Internet like a **postal system**: + * Your message (data) is packed into **envelopes** (packets). + * The **address** (IP) tells routers where to deliver it. + * Routers act like **post offices**, ensuring it reaches the right destination. + * The server opens it, prepares a reply, and sends it back the same way. + + + + In technical terms: + * Data is **split into packets** (small chunks). + * Each packet includes a **header** (source, destination, sequence info). + * Packets may take **different routes** through routers and switches. + * Once all packets arrive, the system **reassembles** them in the correct order. + + + +## Data Transmission in Action + +```jsx live +function PacketFlow() { + const [stage, setStage] = React.useState(0); + const steps = [ + "Sending DNS request...", + "Connecting via TCP/IP...", + "Sending HTTP request...", + "Routing through Internet nodes...", + "Receiving response: 200 OK", + ]; + return ( +
+

Internet Packet Simulation

+

{steps[stage]}

+ +
+ ); +} +``` + +Click through the stages to simulate a real-world data flow + +## The Role of Protocols + +The Internet relies on **protocols** — sets of rules that define how data is sent and received. +Here are some of the most important ones: + +| Protocol | Full Form | Purpose | +|-----------|------------|----------| +| **HTTP / HTTPS** | HyperText Transfer Protocol (Secure) | Transfers web content between browsers and servers. | +| **TCP / UDP** | Transmission Control / User Datagram Protocol | Controls data delivery — TCP ensures reliability, UDP prioritizes speed. | +| **IP** | Internet Protocol | Defines addressing and routing rules for data packets. | +| **DNS** | Domain Name System | Resolves domain names to IP addresses. | +| **FTP / SFTP** | File Transfer Protocol | Transfers files between systems securely. | + +## The TCP/IP Model in Practice + +```mermaid +graph TB + A[Application Layer - HTTP, DNS, FTP] --> B[Transport Layer - TCP, UDP] + B --> C[Internet Layer - IP] + C --> D[Network Access Layer - Ethernet, Wi-Fi] +``` + +Each layer has a defined responsibility: + +* **Application Layer:** User-facing protocols (HTTP, DNS, FTP). +* **Transport Layer:** Handles packet reliability and sequencing. +* **Internet Layer:** Manages IP addressing and routing. +* **Network Access Layer:** Defines how devices physically connect (cables, Wi-Fi, fiber). + +## How Data Finds Its Path + +When a packet leaves your computer, it doesn’t travel in a straight line. +It hops through **multiple routers**, sometimes across countries or continents. + +```mermaid +graph LR + A[User Device] --> B[Local Router] + B --> C[ISP Network] + C --> D[Internet Backbone] + D --> E[Destination Server] +``` + +Each router reads the packet header, checks its destination, and forwards it closer to the target. + +## Common Misconceptions + +:::warning +The Internet is not a single entity or controlled by one organization. It’s a **decentralized network** maintained by thousands of independent systems working together. +::: + +:::tip +Every time you click a link or send a message, your data travels through **multiple networks**, often across countries, before reaching its destination. +::: + +## Key Takeaways + +* The Internet transmits data through **packets** using **TCP/IP** protocols. +* **DNS** resolves domain names into IP addresses. +* **Routers** and **switches** direct data across multiple networks. +* Protocols like **HTTP**, **HTTPS**, and **FTP** define communication rules. +* The Internet is decentralized, fast, and fault-tolerant — designed to keep working even when parts fail. \ No newline at end of file diff --git a/docs/internet/http-vs-https.mdx b/docs/internet/http-vs-https.mdx new file mode 100644 index 0000000..59b4254 --- /dev/null +++ b/docs/internet/http-vs-https.mdx @@ -0,0 +1,173 @@ +--- +title: "HTTP vs HTTPS" +description: "Understand the key differences between HTTP and HTTPS — how data travels over the Internet, why security matters, and how SSL/TLS encryption protects users and websites." +tags: [http, https, web, protocols, encryption, ssl, tls, security] +sidebar_label: HTTP vs HTTPS +--- + +When you browse the Internet, you’ve probably noticed some websites start with **http://** and others with **https://**. That single letter **‘S’** makes a world of difference — it stands for **Secure**. + +In this lesson, you’ll learn what HTTP and HTTPS mean, how they work, and why modern websites must use HTTPS for both **security** and **trust**. + +## What Is HTTP? + +**HTTP (Hypertext Transfer Protocol)** is the foundation of data communication on the web. +It defines how a client (like your browser) and a server exchange information. + +When you type a URL like `http://example.com`, your browser sends an **HTTP request** to the server, which responds with an **HTTP response** containing the website content. + +```mermaid +sequenceDiagram + participant Client as Browser + participant Server as Web Server + + Client->>Server: HTTP Request (GET /index.html) + Server-->>Client: HTTP Response (200 OK + HTML Content) +``` + +This is how every web page loads — request, response, and render. + +## The Problem with HTTP + +HTTP sends data **in plain text**, meaning anyone who intercepts it (like hackers on public Wi-Fi) can read it. + +This exposes sensitive information such as: +* Login credentials +* Personal details +* Payment data + +Without encryption, your data can be **stolen or altered** mid-transfer. + +## Enter HTTPS — The Secure Protocol + +**HTTPS (Hypertext Transfer Protocol Secure)** is the **secure** version of HTTP. It uses **SSL/TLS (Secure Sockets Layer / Transport Layer Security)** to encrypt the data before sending it across the Internet. + +```mermaid +sequenceDiagram + participant Client as Browser + participant Server as Secure Server + participant Certificate as SSL/TLS Certificate Authority + + Client->>Certificate: Verify SSL Certificate + Certificate-->>Client: Valid Certificate Issued + Client->>Server: Encrypted Request + Server-->>Client: Encrypted Response (200 OK) +``` + +This ensures: +* Data is **encrypted** (cannot be read by others) +* The website is **authenticated** (you’re connected to the right server) +* Data integrity is **preserved** (no tampering during transit) + +## How HTTPS Works — Step by Step + + + + 1. Browser connects to a website using HTTPS. + 2. The website sends its **SSL certificate** for verification. + 3. The browser checks if it’s valid and trusted. + 4. Once verified, an **encrypted connection** is established. + 5. Secure data exchange begins. + + + + * HTTPS uses **port 443** (HTTP uses port 80). + * The browser and server perform an **SSL/TLS handshake**. + * A **session key** is generated for encryption. + * Data is exchanged using **symmetric encryption** for speed. + * Certificates are validated via **Certificate Authorities (CAs)**. + + + +## SSL/TLS Handshake (Simplified) + +```mermaid +sequenceDiagram + participant Browser + participant Server + + Browser->>Server: Client Hello (Supported Ciphers) + Server-->>Browser: Server Hello (Chosen Cipher + Certificate) + Browser->>Server: Verify Certificate + Generate Session Key + Server-->>Browser: Session Established + Note over Browser,Server: Secure Communication Begins +``` + +This process happens every time you visit a secure website — often in milliseconds. + +## Comparing HTTP vs HTTPS + +| Feature | **HTTP** | **HTTPS** | +|----------|-----------|------------| +| **Port** | 80 | 443 | +| **Encryption** | No | Yes (SSL/TLS) | +| **Security** | Vulnerable to eavesdropping | Secure and encrypted | +| **Speed** | Slightly faster (no encryption) | Modern HTTPS is optimized (HTTP/2, QUIC) | +| **SEO Ranking** | No boost | Google ranks HTTPS sites higher | +| **Trust Indicator** | No padlock | Padlock shown in browser | +| **Data Integrity** | Can be modified | Protected from tampering | + + +## Demo: Simulating HTTP vs HTTPS + +```jsx live +function HttpVsHttpsDemo() { + const [secure, setSecure] = React.useState(false); + + return ( +
+

{secure ? "HTTPS Secure Mode" : "HTTP Insecure Mode"}

+

+ {secure + ? "🔒 Encrypted connection established. Your data is safe!" + : "⚠️ Data sent in plain text. Anyone can read it!"} +

+ +
+ ); +} +``` + +## Browser Indicators + +Modern browsers clearly show whether a site is secure: +* **Padlock icon** = HTTPS (secure) +* **Warning or Not Secure** = HTTP (unsafe) +* **Red alert or blocked** = Invalid certificate + +## Why HTTPS Matters + +* **Protects users** from data theft and manipulation. +* **Builds trust** with visitors — especially for login or payment pages. +* **Improves SEO ranking** — Google penalizes non-HTTPS sites. +* **Enables modern APIs** like geolocation, service workers, and PWA features (they require secure origins). + +## How to Enable HTTPS on Your Website + +1. Get a valid **SSL/TLS certificate** + * Use free options like [Let’s Encrypt](https://letsencrypt.org/) +2. Configure your **web server** + * Apache: enable `mod_ssl` + * Nginx: use `ssl_certificate` directives +3. Redirect all HTTP traffic to HTTPS (`301 Redirect`) +4. Test your configuration on [SSL Labs](https://www.ssllabs.com/ssltest/) + +## Quick Math — Encryption Strength (KaTeX) + +Encryption complexity increases exponentially with key length: + +$$ +Security \propto 2^n +$$ + +Where `n` = key size (in bits). +So a 256-bit AES encryption has $2^{256}$ possible combinations — practically unbreakable. + +## Key Takeaways + +* **HTTP** is fast but insecure; **HTTPS** is encrypted and trusted. +* HTTPS relies on **SSL/TLS certificates** to secure data transfer. +* Modern browsers, APIs, and SEO favor HTTPS-only sites. +* Implementing HTTPS is now **essential**, not optional. diff --git a/docs/internet/introduction.mdx b/docs/internet/introduction.mdx new file mode 100644 index 0000000..6d57f45 --- /dev/null +++ b/docs/internet/introduction.mdx @@ -0,0 +1,110 @@ +--- +title: "Introduction to the Internet" +description: "Understand what the Internet really is, how it connects billions of devices, and learn about the systems and protocols that make global communication possible." +tags: [internet, networking, www, http, dns] +sidebar_label: Introduction +--- + +The **Internet** is the invisible web of connections that powers almost everything we do — from loading a webpage to sending a message across the globe. It’s not a single machine or network but a massive system of **interconnected computers** communicating through agreed-upon rules called **protocols**. + +## What Is the Internet? + +At its core, the Internet is a **network of networks**. Every device connected to it — whether it’s your phone, a data center, or a satellite — follows these same protocols to exchange information. + +:::info +Many people confuse the **Internet** with the **World Wide Web (WWW)**. The Internet is the **infrastructure** (the cables, routers, and data pathways), while the Web is a **service** built on top of it — using browsers and HTTP to access websites. +::: + +```mermaid +graph TD + A[User Device] --> B[Router] + B --> C[Internet Service Provider - ISP] + C --> D[DNS Server] + D --> E[Web Server] + E --> F[Website Content Delivered] +``` + +This diagram shows the typical journey of a web request. When you open a site, your device connects through your **router**, passes through your **ISP**, queries a **DNS server** to find the site’s location, and finally reaches the **web server** that sends the page back. + +## How the Internet Works + + + + When you type a URL like **https://codeharborhub.github.io**, your browser first asks a **DNS server** to find the matching IP address. + It then connects to that address using **HTTP or HTTPS**, downloads the data, and displays it as a webpage. + + + + 1. The browser sends an **HTTP request** to the server. + 2. The request is split into packets and routed through various networks using **TCP/IP**. + 3. The server responds with an **HTTP response**, usually containing HTML, CSS, or JS files. + 4. **HTTPS** adds a layer of encryption, ensuring data privacy during transmission. + + + +## A Simple HTTP Request in Action + +```jsx live +function InternetExample() { + return ( +
+

Browser Request Simulation

+

Client → DNS → Server → Response

+ +
+ ); +} +``` + +When you click the button, imagine your browser requesting data from a remote server — and getting a **“200 OK”** response if everything works correctly. + +## Core Components of the Internet + +| Component | Role | +| ----------- | ---- | +| **Client** | The end-user device (like a browser or mobile app) that requests data. | +| **Server** | The machine that processes requests and sends back responses. | +| **DNS** | Converts domain names (like `codeharborhub.github.io`) into IP addresses that computers understand. | +| **ISP** | Connects users to the global Internet infrastructure. | +| **Router** | Directs data packets between networks, ensuring they reach the right destination. | + +## Understanding Data Transfer + +The rate of data transfer (speed) can be described mathematically: + +$$ +Speed = \frac{Data\ Size}{Time} +$$ + +For example, downloading a **10 MB** file in **5 seconds** means: + +$$ +Speed = \frac{10}{5} = 2\ \text{MB/s} +$$ + +While this looks simple, real-world speeds depend on factors like bandwidth, latency, and network congestion. + +## The TCP/IP Model + +The Internet runs on a layered system known as the **TCP/IP model**, which defines how data moves from one point to another. + +```mermaid +graph LR + A[Application Layer] --> B[Transport Layer] + B --> C[Internet Layer] + C --> D[Network Access Layer] +``` + +Each layer has a specific job: + +* **Application Layer:** Handles data for applications (HTTP, DNS, FTP). +* **Transport Layer:** Ensures reliable delivery (TCP, UDP). +* **Internet Layer:** Routes packets using IP addresses. +* **Network Access Layer:** Manages physical connections (Ethernet, Wi-Fi). + +## Key Takeaways + +* The Internet is a **global system** that connects billions of devices. +* Communication happens through **clients**, **servers**, and **routers** using standard protocols. +* **DNS** resolves domain names, and **TCP/IP** ensures reliable data transfer. +* Security protocols like **HTTPS** protect your information online. \ No newline at end of file diff --git a/docs/internet/ip-addresses.mdx b/docs/internet/ip-addresses.mdx new file mode 100644 index 0000000..189c5c7 --- /dev/null +++ b/docs/internet/ip-addresses.mdx @@ -0,0 +1,121 @@ +--- +title: "DNS and IP Addresses" +description: "Understand how DNS and IP addresses work together to make the Internet human-friendly — learn what happens when you type a URL, how domain names are translated, and why IP addresses matter." +tags: [dns, ip, networking, internet, domain, protocols] +sidebar_label: "DNS & IP Addresses" +--- + +When you visit a website like **codeharborhub.github.io**, your browser doesn’t actually understand the name, it only understands **numbers**. These numbers are called **IP addresses**, and the system that translates human-friendly names into them is called the **Domain Name System (DNS)**. + +## What Is an IP Address? + +An **IP (Internet Protocol) address** is a unique identifier assigned to every device connected to the Internet. It’s like a *postal address* for computers, it tells other systems **where** to send or receive data. + +### Two Common Versions: + +| Version | Format | Example | Usage | +|----------|---------|----------|--------| +| **IPv4** | 32-bit (4 numbers separated by dots) | `192.168.1.1` | Most widely used, limited supply | +| **IPv6** | 128-bit (hexadecimal separated by colons) | `2400:cb00:2048:1::c629:d7a2` | Modern, supports billions of devices | + +## What Is DNS? + +The **Domain Name System (DNS)** is often described as the *phonebook of the Internet*. It translates easy-to-remember domain names (like `google.com`) into machine-readable IP addresses (like `142.250.190.78`). + +Without DNS, you’d have to memorize long strings of numbers just to visit your favorite websites. + +## How DNS Works — Step by Step + +Let’s walk through what happens when you type **https://codeharborhub.github.io** into your browser: + +```mermaid +sequenceDiagram + participant User + participant Browser + participant DNSResolver + participant RootServer + participant TLDServer + participant AuthoritativeServer + + User->>Browser: Enter codeharborhub.github.io + Browser->>DNSResolver: Request IP address + DNSResolver->>RootServer: Ask for .io TLD info + RootServer-->>DNSResolver: Return TLD name servers + DNSResolver->>TLDServer: Ask for github.io info + TLDServer-->>DNSResolver: Return authoritative DNS + DNSResolver->>AuthoritativeServer: Ask for codeharborhub.github.io + AuthoritativeServer-->>DNSResolver: Return IP address + DNSResolver-->>Browser: 185.199.108.153 + Browser->>185.199.108.153: Send HTTP Request +``` + +
+ +Each lookup happens in milliseconds — that’s the magic of the Internet’s infrastructure. + +## DNS Components Explained + +| Component | Description | +|------------|--------------| +| **DNS Resolver** | The first point of contact — usually operated by your ISP or a public service (like Google DNS `8.8.8.8`). | +| **Root Servers** | The highest level in DNS — directs the query to the correct top-level domain (like `.com`, `.org`, `.io`). | +| **TLD Servers** | Handle requests for specific top-level domains. | +| **Authoritative Name Servers** | Contain the final IP record for the domain. | + +## Types of DNS Records + +| Record Type | Purpose | Example | +|--------------|----------|----------| +| **A** | Maps a domain to an IPv4 address | `example.com → 93.184.216.34` | +| **AAAA** | Maps a domain to an IPv6 address | `example.com → 2606:2800:220:1:248:1893:25c8:1946` | +| **CNAME** | Alias to another domain | `www.example.com → example.com` | +| **MX** | Mail server record | `example.com → mail.example.com` | +| **TXT** | Stores text info (often for verification) | `v=spf1 include:_spf.google.com ~all` | + +## Real-World Analogy + +Think of **DNS** like asking for directions: +* You know the **name** of a restaurant (domain name). +* You ask a **directory service** (DNS) for its address. +* You drive to that **location** (IP address). + +Without DNS, you’d have to remember every single street address (IP) manually. + +## Fun Fact + +The first DNS system was invented in **1983** by **Paul Mockapetris**, replacing a single centralized text file (`hosts.txt`) that originally stored all Internet addresses! + +## DNS and Security + +Since DNS is critical to Internet functionality, it’s also a target for attacks like: +* **DNS Spoofing (Cache Poisoning):** Fake responses redirect users to malicious sites. +* **DNS Hijacking:** Attackers modify DNS settings to steal traffic. + +To mitigate this, technologies like **DNSSEC (Domain Name System Security Extensions)** ensure authenticity and integrity of DNS responses. + +## Quick Demo + +```jsx live +function DnsLookupDemo() { + const [ip, setIp] = React.useState(""); + const lookup = () => setIp("185.199.108.153"); + return ( +
+

DNS Lookup Simulation

+

Domain: codeharborhub.github.io

+ + {ip &&

IP Address: {ip}

} +
+ ); +} +``` + +## Key Takeaways + +* **IP addresses** identify devices; **DNS** translates names to addresses. +* The DNS process involves **resolvers**, **root servers**, **TLD servers**, and **authoritative servers**. +* Common record types: **A**, **AAAA**, **CNAME**, **MX**, **TXT**. +* **DNSSEC** helps secure DNS lookups from tampering. +* Every website you visit goes through a DNS lookup first — it’s the Internet’s invisible phonebook. + +> “Every website starts with a name, but it’s DNS that tells your browser where that name truly lives.” \ No newline at end of file diff --git a/docs/internet/nslookup.mdx b/docs/internet/nslookup.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/internet/nslookup.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/internet/ping-and-traceroute.mdx b/docs/internet/ping-and-traceroute.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/internet/ping-and-traceroute.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/internet/quiz.mdx b/docs/internet/quiz.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/internet/quiz.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/internet/routing-and-packets.mdx b/docs/internet/routing-and-packets.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/internet/routing-and-packets.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/internet/security-basics.mdx b/docs/internet/security-basics.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/internet/security-basics.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/internet/tcp-ip-model.mdx b/docs/internet/tcp-ip-model.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/internet/tcp-ip-model.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docusaurus.config.js b/docusaurus.config.js index ca5cd68..aa7707e 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -154,7 +154,7 @@ const config = { }, { to: "/tutorial/github/introduction-to-github", - html: '🐙 JavaScript', + html: '🐙 GitHub', position: "left" }, { @@ -321,7 +321,7 @@ const config = { // theme: prismThemes.vsDark, darkTheme: prismThemes.dracula, // darkTheme: prismThemes.github, - additionalLanguages: ["powershell", "php", "bash"], + additionalLanguages: ["powershell", "php", "bash", "http"], }, docs: { sidebar: { diff --git a/sidebars.ts b/sidebars.ts index c0b3942..70f23e5 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -458,6 +458,13 @@ const sidebars: SidebarsConfig = { label: "Cybersecurity", href: "/cybersecurity/", }, + + // Internet + { + type: "link", + label: "Internet", + href: "/internet/introduction/", + }, ], css: [ @@ -909,12 +916,75 @@ const sidebars: SidebarsConfig = { description: `A practical, hands-on collection of learning resources for everyone building real-world cybersecurity skills. This index groups tutorials, tool guides, labs, and checklists organized from fundamentals (networking, cryptography, web security) to offensive and defensive workflows (pentesting, DFIR, incident response). Each entry includes clear objectives, step‑by‑step exercises, and ethics-first guidance so you can practice safely in labs and apply what you learn to production-ready security work. Use the "Getting Started" path to move from beginner-friendly topics to specialized tool tutorials and certification-ready material.`, }, items: [ - 'cybersecurity/resources/glossary', - 'cybersecurity/resources/books-and-courses', - 'cybersecurity/resources/tools-list', - 'cybersecurity/resources/links', + "cybersecurity/resources/glossary", + "cybersecurity/resources/books-and-courses", + "cybersecurity/resources/tools-list", + "cybersecurity/resources/links", + ], + }, + ], + + internet: [ + "internet/introduction", + { + type: "category", + label: "Basics", + link: { + type: "generated-index", + title: "Internet Basics", + description: + "Learn how the Internet works — from clients, servers, and IP addresses to DNS and HTTP protocols.", + keywords: ["internet", "basics", "http", "dns", "ip"], + }, + items: [ + "internet/how-internet-works", + "internet/clients-and-servers", + "internet/ip-addresses", + "internet/dns", + "internet/http-vs-https", + ], + }, + { + type: "category", + label: "Advanced Concepts", + link: { + type: "generated-index", + title: "Advanced Internet Concepts", + description: + "Explore deeper topics like TCP/IP model, routing, CDN, firewalls, and cybersecurity basics.", + keywords: ["internet", "tcp/ip", "routing", "cdn", "firewall"], + }, + items: [ + "internet/tcp-ip-model", + "internet/routing-and-packets", + "internet/cdn", + "internet/firewalls", + "internet/security-basics", + ], + }, + { + type: "category", + label: "Tools & Utilities", + link: { + type: "generated-index", + title: "Internet Tools & Utilities", + description: + "Get familiar with practical tools like ping, traceroute, nslookup, and browser developer tools.", + keywords: [ + "internet tools", + "ping", + "traceroute", + "nslookup", + "devtools", + ], + }, + items: [ + "internet/ping-and-traceroute", + "internet/nslookup", + "internet/browser-devtools", ], }, + "internet/quiz", ], }; diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js index 3c92aa0..3cba36c 100644 --- a/src/theme/MDXComponents.js +++ b/src/theme/MDXComponents.js @@ -12,6 +12,7 @@ import { FaReact } from "react-icons/fa"; import LiteYouTubeEmbed from "react-lite-youtube-embed"; import DocsCard from '@site/src/components/DocsCard'; import DocsCards from '@site/src/components/DocsCards'; +import ComingSoon from '@site/src/components/ComingSoon'; export default { // Re-use the default mapping @@ -27,4 +28,5 @@ export default { AdsComponent, DocsCard, DocsCards, + ComingSoon, };