Emmet is like a shorthand language for web developers. It’s like a texting slang for code(like in daily life we write no. = number , avg =average , etc =Et cetera ) . Instead of typing out every single bracket and tag, we type a tiny snippet, and then we hit the " Tab " key , and it "explodes" into a full valid HTML.Emmet is a plugin built into almost every modern code editor (like VS Code) that lets us type short abbreviations and transform them into full blocks of code instantly.

The Manual Way (Without Emmet)

If we wanted to create a simple list menu with five items, our hands would have to do a lot of repetitive heavy lifting. We would have to type every bit of it manually like:

1. Type <ul> and hit enter.

2. Type <li>first item</li> .

3. Then we would copy paste the line number-2 , four more times and change the content inside the tag to second item ,third item,fourth item and fifth item.

so it would take quite a time to write and then copy paste and change.Imagine we have 50 items then we have to write so many code and paste and change.

With Emmet, we describe the structure we want using a CSS-like syntax. To get that same items, we just type like this:

ul>li*5 then we hit tab and our code gets created like this and we would just write the content:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

How Emmet Works Inside our Editor?

We don't need to run a special program. We simply type our shorthand in an HTML file and hit the Tab or Enter key. Our editor recognizes the pattern and swaps the text out immediately.

Basic Syntax & Abbreviations

Creating Elements :

We type the name of the tag (without brackets) and hit Tab.

• div → <div></div>

• p → <p></p>

• h1 → <h1></h1>

For Adding Classes, IDs, and Attributes

• Classes (.) : div.box → <div class="box"></div>

• IDs (#): h1#main-title → <h1 id="main-title"></h1>

• Attributes ([]): img[src="demo1.png"] → <img src="demo1.png" alt="">

Nesting Elements (>)

The "greater than" symbol tells emmet to put the next element inside the previous element.

div>p>span

<div>
    <p>
        <span></span>
    </p>
</div>

Example Image:

Multiplication (*)

If we need a list.we don't type <li> five times. we can use multiply .

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Instant HTML boilerplate :

Every HTML file in a project needs a standard head, body, and meta tags to work that makes the stcructure of the webpage. Instead of copying and pasting this from an old project, we just type an exclamation mark ( ! ) and hit Tab or enter.

Shortcut for the html boilerplate : !

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    </body>
</html>

A css selector is the first part of a CSS rule. It is a pattern that tells the browser which HTML elements should be selected to have the style properties (like color, size,border, or margin) applied to them.

Why are CSS Selectors Needed?

Without selectors, CSS would be useless.Selectors allows us to control how each element style looks like . It gives use complete control of the style of each element in html.

It also help us to separate html from css rules which follows the separation of concern where css and html files are kept different.

It also follow DRY("Don't Repeat Yourself.") principle.With just one selector, we can style different pages at once. If we decide that we want our brand color to change from orange to purple, we just only have to change one line of CSS rather than editing every single HTML page.

Common Types of Selectors

Element Selector

It targets all HTML tags of a specific type. It is the most general way to style our site.

• Syntax is h1 { color:red; }

• Target: Every <h1> on the page or Every <p> on the page

Class Selector

Targets elements that have a specific class attribute. We can use the same class on multiple elements.

• Syntax ,it starts with a dot (.) . .highlight { border:1px; } or .box{margin:20px }

• Target: Any element with class="highlight" or class="box".

ID Selector

Targets a single, unique element. An ID should only be used once per page.

• Syntax: Starts with a hash (#). #navbar { padding:5px }

• Target: The one element with id="navbar".

Group Selectors

Used to apply the same styles to multiple selectors at once to keep our code clean.

• Syntax: Separated by commas. h1, h2, p { color: blue; margin:10px }

• Effect: All three elements will turn blue and margin will be 10px on all sides.

Descendant Selectors

Think of CSS selectors as a set of instructions that tell the browser, "Find these specific items and make them look like this."

Here is a breakdown of the selectors you mentioned, ranging from broad to specific.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Element Selector </h1>
    <p>This is styled by element selector (p)</p>
    
    <p class="highlight">Class selector (.highlight)</p>
    
    <div id="main-content">
        <h2>ID Selector (#main-content)</h2>
        <p>Content inside ID element</p>
    </div>
    
    <h3>Group Selector Demo</h3>
    <span class="grouped">Grouped elements</span>
    
    <section class="container">
        <h4>Descendant Selector</h4>
        <p>Any p inside .container</p>
        <div>
            <p>Nested p (also targeted)</p>
        </div>
    </section>
</body>
</html>

Without css the above html code looks like

CSS Fiile with it rules

/* ELEMENT SELECTOR - All h1 tags have rules applied */
h1 { 
    color: navy; 
    text-align: center; 
    margin-bottom: 20px;
}

/* ELEMENT SELECTOR - All p tags have rules applied  */
p { 
    font-family: Arial, sans-serif; 
    margin: 10px 0; 
    color: #333;
    line-height: 1.5;
}

/* CLASS SELECTOR - .highlight class have rules applied */
.highlight { 
    background-color: yellow; 
    padding: 10px; 
    border-left: 5px solid orange; 
    border-radius: 4px;
}

/* ID SELECTOR - #main-content have rules applied */
#main-content { 
    background: linear-gradient(45deg, #e3f2fd, #bbdefb); 
    padding: 25px; 
    border-radius: 10px; 
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Descendant selector inside #main-content  have rules applied*/
#main-content h2 { 
    color: #1976d2; 
    font-size: 24px; 
    margin-bottom: 15px;
}

/* GROUP SELECTOR - h3 and .grouped have rules applied */
h3, .grouped { 
    color: green; 
    font-weight: bold; 
    border: 2px dashed green; 
    padding: 12px; 
    display: inline-block;
    margin: 10px 5px;
    border-radius: 5px;
}

/* DESCENDANT SELECTOR - All p inside .container have rules applied */
.container p { 
    color: darkgreen; 
    font-style: italic; 
    background: #e8f5e8; 
    padding: 15px; 
    margin: 8px 0;
    border-left: 4px solid #4caf50;
    border-radius: 4px;
}

/* LAYOUT */
body { 
    max-width: 900px; 
    margin: 0 auto; 
    padding: 30px; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
}


h4 { margin-bottom: 15px; color: #555; }
div { margin: 10px 0; }

After Css Applied

Basic Selector Priority

When two different rules try to style the same element in an html file, the browser follows a "hierarchy of power" called Specificity.

The internet reaches homes and offices through a layered network of cables, signals, and equipment(hardware device) provided by Internet Service Providers (ISPs).

Data travels from global servers via high-speed fiber optic cables gets routed locally through neighborhood nodes, and enters our building via a wired connection like fiber, cable, or DSL, where a modem converts it for use.

What is a Modem ?

A modem is a device that converts digital data into analog signals (or vice versa) so our network can communicate over phone lines, cable, or fiber from our ISP. Without it, our devices couldn't "communicate" to the internet.

What is a Router ?

A router is a networking device that connects multiple devices, like phones,smart TVs and laptops, to the internet and directs data traffic between them.It acts like a traffic cop for data packets, reading their destination addresses and sending them along the best path across networks. This lets our home devices share one internet connection efficiently.

Switch vs Hub ?

A “ switch “ intelligently connects devices in a local network (LAN) by sending data only to the intended recipient based on MAC addresses, reducing congestion(overcrowding).

A “hub “ broadcasts data to all connected devices blindly, causing collisions and slowdowns—hubs are outdated.

Lets take an example: Office with 20 computers— a switch lets PC1's file reach only PC2 efficiently. A hub floods everyone, its like shouting announcements in a quiet room where only one person needs to hear.

What is a Firewall and why security lives here?

It acts as gatekeeper which monitors and blocks unauthorized traffic between your trusted network and untrusted ones (like the internet) using rules.

Example: It stops hackers scanning our home network ports, like a seccurty guard at a school checking IDs and denying sketchy strangers while letting authorised teacher/student/staff in.

Security lives here because firewalls inspect every packet at the network edge, preventing malware or attacks before they reach devices.

What is Load Balancer ?

A load balancer distributes incoming traffic across multiple servers to avoid overloads, ensuring scalability for high-demand sites by checking servers and routing efficiently to intented part.

Example :Live Sports during peak hours ,it splits millions of streams across server farms so no single server crashes .

How all these devices work together in a real-world setup?

For Home :

ISP (wire/cable) → modem (internet access) → router (traffic direction + Wi-Fi) → switch (wired extras) + firewall (built into router).

Data flows : Device request → router → modem → internet → back the same path.

DNS( Domain Name System) acts like the internet's phonebook, translating easy-to-remember names(url) like "google.com" into numerical IP addresses (like 142.250.190.78) that computers use to find each other online over the internet

Name resolution exists because we humans prefer remembering simple names then complex numbers making the web friendly while computer(network = device + wires + rules) rely on IP address for routing data

DNS Resolution Layers

DNS resolution layers break down the process of turning a domain(human-readable address) like google.com into an IP address across three key levels, like climbing a directory tree.

Root Servers:There are 13 global clusters denoted by “ . “ which act as the internet's starting index. They don't know specific IPs but refer queries to TLD servers (e.g., .com or .in or .edu etc).

TLD Servers :Top-Level Domain(TLD) servers handle extensions like .com, .org, or .in. They point to the domain's authoritative nameservers (NS(name server) records, e.g., ns1.google.com for google.com)

Authoritative Servers : These hold the final records (A/AAAA for IPs) for the exact domain. The resolver queries them last to get the answer, caching it for speed.

What is the dig command and when it is used ?

The “dig”(Domain Information Grope) command is a powerful command line tool for querying(requesting) DNS servers to get detailed records like IP addresses, mail servers, or name servers.DNS admins and developers use it for troubleshooting DNS issues, verifying name resolution, testing specific record types (example: A, MX, NS records), or checking server responses, offering more flexibility and clearer output .

Example: If my site “ example.com ” isn't resolving? Type dig example.com in our terminal ,it reveals the IP (like 192.0.2.1), query time, and any errors, helping spot if our DNS provider glitched.

NS records

NS (Name Server) records, are simple DNS entries that list the official servers responsible for a website's or domain's details, like its IP address

What NS Records Do : It is like a pointer telling the internet whcih nameserver manages a domain DNS deatils such as Ip addresses , or email settings.For example, when we type "example.com," DNS queries follow NS records to reach the right server for resolution.Without it, browsers couldn't find a site's IP address from its name.

NS record is Important because ,proper NS records keep domains working smoothly ,without correct NS records, no one can reach our site because the internet won't know where to look. Multiple NS records add reliability—if one server fails, others step in to prevent downtime.

Recursive Resolver Role

Behind the scenes , when we visit example.com, our device's recursive resolver (like our ISP's DNS helper) starts at the internet's root servers, follows a chain of NS records down to the DNS hierarchy (root → .com servers → domain's NS), and asks those authoritative nameservers for the final details, like the IP address. This delegation makes the whole system fast and distributed.

Example :When we type "google.com" in a browser, it needs the site's IP address to connect. The dig google.com command shows the DNS steps our browser takes behind the scenes to get that.Running dig google.com produces output like this in the terminal

 ; <<>> DiG 9 <<>> @127.0.0.53 goggle.com A
 ; (1 server found)
 ;; global options: +cmd
 ;; Got answer:
 ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 5841
 ;; flags: qr rd ra; QUERY: 1, ANSWER: 0, AUTHORITY: 1, ADDITIONAL: 1

 ;; OPT PSEUDOSECTION:
 ; EDNS: version: 0, flags:; udp: 65494
 ;; QUESTION SECTION:
 ;goggle.com.            IN    A

 ;; AUTHORITY SECTION:
 goggle.com.        300    IN    SOA    ns1.googledomains.com. cloud-dns-hostmaster.google.com. 1 21600 3600 259200 300

 ;; Query time: 32 msec
 ;; SERVER: 127.0.0.53#53(127.0.0.53) (UDP)
 ;; WHEN: Sat Feb 14 06:14:16 UTC 2026
 ;; MSG SIZE  rcvd: 121

When we hit enter after typing the URL, the browser has an engine that grabs the url from the address bar .It first checks the memory(cache) for a quick reply if it doesn’t found the response the browser networking layer spring into action. It is like sending a courier to a warehouse(the server) which is very far way. The courier says , ‘Hey i want the files for yahoo.com’ .The warehouse upon getting this request packs three type of boxes and send them back to the client.

• HTML: Skeleton (Blueprint)of the webpage

• CSS : The paint and decorating samples

• Javascript: The wiring and plumbing

Main parts of a browser :-

A Browser translate raw web files ( HTML ,CSS ,Javascript) into a picture that has behavior we see and click. They oragnize fetching data ,parsing it into trees ( DOM trees / CSSOM tree) ,computing layout and pianting layers.

Breakdown of what browser does :-

• Fetching: Grabs HTML, CSS, and images from the web, like downloading ingredients for a recipe

• Parsing Trees: Breaks HTML into a DOM tree (page structure) and CSS into a CSSOM tree (styling rules), forming the blueprint.

• Layout: It figures out exact positions and sizes for every element, like arranging furniture in a room.

• Painting: It draws pixels onto screen layers for smooth visuals and animations.

• Process Isolation: Runs UI, tabs, and plugins in isolated "sandboxes" to protect our system from malicious sites

Main Component :

1. User Interface: It includes address bar for URLs, tabs for multiple pages, back/forward buttons, bookmarks, and refresh/stop controls.

2. Browser Engine: It is the manager. It coordinates actions between the UI and the Rendering Engine. When we click "Refresh button" the Browser Engine tells the other parts to get to work.

3. Rendering Engine: It is the artist . Its sole job is to display the content. If we use Chrome/Edge, this is Blink; if you use Safari, it’s WebKit; for Firefox, it’s Gecko.

4. Networking: Handles HTTP/HTTPS requests to fetch files

5. JavaScript Engine: Executes JS code (e.g. V8 in Chrome ,SpiderMonkey in Firefox)

6. Storage/Security: Manages cookies, cache, and sandboxing

Networking: how a browser fetches HTML, CSS, JS

A Browser fetch HTML, CSS, and JS through a streamlined networking process starting with a URL input, resolving it via DNS, and sending HTTP requests over TCP connections.

Steps in the fecthing:

• DNS Lookup: Converts domain (e.g., google.com , yahoo.com) to an IP address for server location

• TCP Handshake: Establishes a reliable,secure connection with the server .

• HTTP Request: Sends a GET request with headers (e.g., User-Agent, Accept) specifying HTML/CSS/JS needs; no body for GET is sent

• Server Response: Returns status (e.g., 200 OK), headers (Content-Type: text/html), and resource body.

• Resource Handling: Browser parses HTML firstly, then discovers and fetches linked CSS/JS in parallel via subsequent requests; caches for reuse.

HTML Parsing and DOM

HTML is parsed token-by-token into the Document Object Model (DOM), a tree of nodes representing elements, attributes, and text.

CSS Parsing and CSSOM

CSS rules are parsed into the CSS Object Model (CSSOM), a tree of style rules matched to DOM nodes by selectors. This enables computed styles per element in the browser.

DOM + CSSOM Merge

The browser combines DOM (content) and CSSOM (styles) into a render tree, filtering invisible elements (e.g., display : none ) and including only styled, visible nodes. This render tree drives layout (positioning) and paint (pixel rendering).

HTML (HyperText Markup Language) is the skeleton of a website.It doesn’t provide the color which is provided by CSS and interactivity which Js provides to a wesbite ,HTML provides the essential structure that holds everything together.

The easiest way to understand HTML is the Box Analogy. Every piece of content on a website is wrapped in an invisible box.

• The Opening Tag “<tag>” is like the front of the box.

• The Content is what we put inside the box.

• The Closing Tag “</tag>“ is like the back of the box, sealing it shut.

HTML tags

HTML tags are keywords enclosed in angle brackets “ < “ and “ > “ that indicate how content should be structured or displayed, forming the core of HTML syntax.

Opening tag: It starts with an element, e.g., “

“

Closing tag: It ends the element e.g., “

Content: It just sits/fit between opening and closing tag (

This is first heading content

<h1>Hi , i am inside the h1 tag </h1>

HTML Elements

An HTML element is the complete unit that is opening tag, content (text, nested elements, or attributes), and closing tag, representing building blocks like a paragraph ,heading or image container.

<h1> I am inside Heading Tag 1</h1>
<p>I am inside paragraph tag</p>
<div>This is a container</div>

Common Basic Tags

1. Headers: <h1> to <h6>

   These are for titles and subtitles. <h1> is the most important (the main heading), and <h6> is the smallest.

    <h1>This is a Big Title</h1>
    <h2>This is a Subheading 1</h2>
    <h3>This is a Subheading 2</h3>
   

2. 2. Paragraphs: <p>

   This is for our standard blocks of text.

    <p>This is a sentence inside a paragraph box.</p>
   

3. Containers: <div>

   Big Box:Used to group large sections of content together. It starts on a new line.

4. <span> (The Small Box): Used for small bits of text inside a sentence to style them specifically. It stays on the same line.

    <div>
      <h1>Welcome</h1>
      <p>This is a <span>highlighted</span> word inside a div.</p>
    </div>
   

Self-Closing Elements

Self-closing (or void) elements don't need a closing tag because they don't wrap content; they end with a slash, like <img src="image.jpg" alt="Description" /> or <br />. Examples include <img>, <hr>, and <input>, used for images, line breaks, and form inputs.

    <img src="example.jpg" alt="Sample image">

    <!-- Line break -->
    <br>

    <!-- Horizontal rule -->
    <hr>

    <!-- Input field -->
    <input type="text" placeholder="Enter text">

    <!-- Link to stylesheet (in head typically) -->
    <link rel="stylesheet" href="styles.css">

Block Vs Inline Elements

Block-level elements, like “<div>” and <p> ,<nav>,<header> start on new lines and take full width, stacking vertically to form page sections.

Inline elements, like <span> and <a>, flow within text lines without breaking layout, used for styling words or links

Suppose there are millions or billions of networks (Device + wires + rules =network) connected with each other, for each network to talk to each other, there needs to be some standard rules that the network needs to follow to communicate with each other.If every network makes its own rules “ how to communicate with each other “ ,then it would be impossible to follow each rules to communicate with each other .So there was a need to have some standard rules( protocols)—standardized sets of rules that determine how data is packaged, addressed, and delivered. This is how the rules for effective communication came into existence on the Internet.

The two most important sets of rules for moving data over internet are TCP and UDP.

What happens if data is sent without rules ?

If we send data over the internet without reliable rules,the data sent over the internet often gets lost ,arrives out of order , or data can become corrupted,which leads to unreliable communcation between the sender and reciever . TCP( Transmission Control Protocol) fixes this by providing rules for reliable, ordered delivery of data between devices.

TCP (Transmission Control Protocol)

Transmission Control Protocol (TCP) is a fundamental protocol of internet that ensure that our data over the Internet gets delivered reliably between devices , like when a web page get loaded or we send an email.

TCP is like reliable courier. It focus is accuracy and order. Before sending anything, it focuses on establishing a connection (a" 3 way handshake") to make sure the receiver is ready to receive.If a piece of data goes missing, TCP notices and resends it.

TCP works at the transport layer of networking. It breaks data into small packets, numbers them, and reassembles the packets at the destination(receiver side) .It uses ‘ 3 way handshake ‘ to establish a connection before sending data to the destination, preventing data loss or jumbling.

Problems TCP solves

• Packet Loss -: Packets can be loss(dropped) by congested routers

• Out-of-order Delivery -: Packets may take different physical paths and arrive in the wrong sequence. on the receiver side.

• Data Corruption :- faulty hardware, signal interference or electrical signal drop can lead to corruption of data

• Network Congestion: Sending too much data too fast can overwhelm the receiver or the network

What is the TCP 3-Way Handshake ?

Before data transfer begins,the sender and receiver must agree on sequence numbers and verify that they both are now ready to communicate with each other .This is known as three way handshake.

Step by step working

• SYN (Synchronize) :- the client(sender) sends a packet with a SYN flag set and a random Initial sequence number(ISN),say X .This means, "I want to start a connection with you".

• SYN-ACK (Synchronize-Acknowledge): The server(receiver) receives the SYN from the sender and responds with its own SYN flag and an ACK flag. It sends its own sequence number (Y) and sets the acknowledgment number to X+1. This means, "I received your request; and I also want to connect".

• ACK (Acknowledge): The client sends a final packet with the ACK flag. It sets the acknowledgment number to Y+1. This means, "I Got it! Let’s start sending data".

How Data Transfer Works in TCP?

TCP breaks large data into smaller chunks called segments(packets). Each segment(packets) is assigned a Sequence Number.TCP makes sure Reliability, Order, and Correctness when sending data .

1. Reliability (Retransmission):- If the sender doesn't receive an ACK for a specific segment within a certain timeframe, it assumes the packet was lost and sends it again.

2. Order (Sequencing): The receiver uses the sequence numbers to reassemble the segments in the correct order that was intended, even if they arrived out of sequence.

3. Correctness (Checksum): Every TCP header includes a checksum. If the receiver calculates a different checksum than what was sent from the sender’s side, it knows the data is corrupted and discards it, triggering a retransmission.

4. Flow Control: The receiver tells the sender how much data it can handle at once (the "Window Size") to prevent being overwhelmed with too much data.

Keeping Track: Sequence and Acknowledgements

Once the conversation starts, TCP uses a numbering system to keep things organized.

• Sequence numbers:Every peice of data(packet) gets a number ,like page number of a book.Eeven if the page number 2 arrives before 1,our computer(reciever) know how to put them back in order as connection was established through TCP which ensure correct odering.

• Acknowledgements (ACKs): After the receiver gets a "page," they send a small note back saying, "I got Page 2! Send Page 3 next to me."

Handling Mistakes

Ther world of internet is not error proof or perfect.Sometimes, a packet or many packets gets lost in the digital "pipes".If the client send Page 3 but never receive an "ACK" (confirmation) for it within a certain timeframe, TCP doesn't just give up on that. It assumes the packet was lost and automatically sends it again. This is called retransmission. It ensures that even on a shaky connection due to signal interference ,surge in electricity and poor connection, the final result is a perfect, error-free file.

How a TCP Connection is Closed?

TCP uses a 4-Way Handshake to terminate a connection. This is because TCP is "full-duplex"—either side(sender or receiver) can finish sending data while the other is still talking.

• FIN: The client(sender) sends a FIN (Finish) packet when it has no more data to send.

• ACK: The server(receiver) sends an ACK to acknowledge the client's request. (The server can still send data at this point).

• FIN: Once the server is also done sending data, it sends its own FIN packet.

• ACK: The client sends a final ACK. After a brief waiting period (to ensure the ACK was received), the connection is officially closed.

A server is a powerful computer or software system that stores data, runs applications on it, and delivers content or services to other devices (called clients) over a network like the internet.Think of server as a digital librarian.It’s a computer located elsewhere that holds information (websites, files, or data) and waits for someone to ask for it.

We need to "talk" to servers because our local devices don't store everything or services that we need. When we check the weather or view a profile on facebook, our computer sends a request to a server, and the server sends the answer back.

What is cURL ?

cURL ( Client URL) is a command-line tool used to exchange data with a server.While a web browser like Chrome or Opera or Firefox talks to servers using a visual interface(UI), cURL allows user to do the exact same thing using only text in our terminal.It lets us send HTTP requests directly to servers from our terminal, receiving raw responses without a browser.It supports protocols like HTTP, HTTPS, FTP, and more, running on Windows, macOS, Linux, and other systems.

Simplest Command to Fetch a Webpage

The most basic cURL command fetches a webpage using a GET request, which is the default method.

Command: curl https://google.com

When we run the above command in our bterminal it sends a request to the google.com server and prints the HTML response directly to our screen.

Understanding the Response

When we run the command responses include a status code (like 200 for success,301 Moved Permanently or 404 for not found) and the body data (HTML, JSON, etc.). Add “ -i “ in the command to see headers with the status.

Command: curl -i https://google.com

Running above command shows this

HTTP/1.1 301 Moved Permanently
Location: https://www.google.com/
Content-Type: text/html; charset=UTF-8
Content-Security-Policy-Report-Only: object-src 'none';base-uri 'self';script-src 'nonce-RFQ8DlDmsty6UPq2pvhRog' 'strict-dynamic' 'report-sample' 'unsafe-eval' 'unsafe-inline' https: http:;report-uri https://csp.withgoogle.com/csp/gws/other-hp
Reporting-Endpoints: default="//www.google.com/httpservice/retry/jserror?ei=-kmPaY3uN9vG4-EPq8rCsAk&cad=crash&error=Page%20Crash&jsel=1"
Date: Fri, 13 Feb 2026 15:57:46 GMT
Expires: Sun, 15 Mar 2026 15:57:46 GMT
Cache-Control: public, max-age=2592000
Server: gws
Content-Length: 220
X-XSS-Protection: 0
X-Frame-Options: SAMEORIGIN
Alt-Svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000

<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
<TITLE>301 Moved</TITLE></HEAD><BODY>
<H1>301 Moved</H1>
The document has moved
<A HREF="https://www.google.com/">here</A>.
</BODY></HTML>

Programmers use cURL because it is fast, scriptable, and reliable.

• Testing: Programmer can quickly check if a website or server is working without loading heavy graphics.

• Automation: Programmer can write a script that uses cURL to download a file at a particular time interval

• Debugging: It shows exactly what the server is "saying" behind the scenes, including hidden headers and error codes wheich we get from response.

Two Ways to Talk: GET vs. POST Requests

Most communication with a server falls into one of these two categories-

GET (Requesting Information):This is like asking the digital librarian, "Can I see the Harry Potter book?" We are strictly receiving data without changing anything on the server.

Default: When we type a basic curl command followed by url , it performs a GET request by default.

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1270

<!DOCTYPE html>...

A successful GET response starts with HTTP/1.1 200 OK, followed by headers like Content-Type: text/html and the body (HTML/JSON data)

POST (Sending Information): This is like handing a form to the librarian and saying, *"Please register me for a library card".We are sending a request to the server to cerate or update something .*To tell cURL to "POST" instead of "GET," we use the -X flag .

Command : curl -X POST https://jsonplaceholder.typicode.com/users

HTTP/1.1 201 Created
{"id":1,"name":"John"}

Our browser translates a website's name, like "google.com", into a numerical IP address using DNS(the internet's phone book).When we enter a URL, the browser first checks in the local cache of the browser for the IP. If it is not found, it queries our device's DNS resolver, which asks root DNS servers, then TLD servers (like .com), and finally the site's authoritative server to get the exact IP address.

With the IP we get back from dns, the browser establishes a connection often via HTTPS—sends an HTTP request for the page, and the server responds with HTML, images, and other resources. This happens very fast, i.e., in milliseconds.

Lets take an real like example with user wants to read a book :

What is DNS?

DNS is like the internet’s phone book. When we type a website name (like example.com), DNS translates it into the numbers (IP address) that computers use to locate that site. So we don’t have to remember long numbers(192.168.0.0 – 192.168.255.255) , the DNS does the lookup for us. DNS is like a map that guides our device to the right online address.

Why DNS records are needed ?

DNS records are essential instructions stored on a DNS servers that tells the browser exactly where to find a website and its services.DNS translate human redable domain names into a machine readbale IP addresses, elimating the need to remeber the complex numbers like **192.168.0.0 . Without DNS records browser couldn’t trsnalate the '“ example.com “ into a correct server location .DNS Records are flexible, if a website changes servers, we just update the A record, and the users can keep using the same domain name. They also support security through TXT records for verification and SPF to prevent email spoofing.

What is an NS Record?

NS (Name Server) record, lists the DNS servers responsible for a domain ,like pointing to the "boss/super admin" servers that manage all its details. It tells the internet which nameservers hold the authoritative info, such as IP addresses or email settings, for that domain.

Domains usually have 2+ NS records for redundancy.They're set at our DNS provider and must pair with A/AAAA records for the nameservers themselves.

What is an A Record ?

An A record is a simple DNS entry that links a domain name (like example.com) to its IPv4 address (like 192.0.2.1), acting like a phonebook listing to help our device find the right server online.

Without A records, we would need to memorize/remember and enter numeric IP addresses (complex numbers) for every site, making the internet unusable ,its like trying to call friends by their exact phone numbers instead of names. Multiple “ A “ records can even point to different IPs for load balancing across

Imagine if we want to visit google.com in our browser. Instead of typing the complex IP address ( 142.250.190.14), our device checks DNS servers for Google's A record, which provides that exact IPv4 address so our browser connects directly to their servers.

What is an AAAA Record?

An AAAA record is a DNS entry that links a domain name (like example.com) to its IPv6 address ( like 2001:0db8:85a3:0000:0000:8a2e:0370:7334), it is similar like an A record which does for IPv4 but here it does for IPv6, an expanded internet addressing system.

AAAA records ensure websites work on future-proof IPv6 networks, often alongside A records (IPv4) for compatibility,our phone picks the best match automatically. Without them, IPv6 users might fail to load sites still stuck on IPv4-only setups.

Think as it like updating a city’s old phonebook from old 4-digit numbers (IPv4, running out of options) to new 16-digit numbers (IPv6, plenty to go around).

What is a CNAME Record?

A CNAME record is a DNS entry that creates an alias(stagename / nickname), pointing one domain name ( www.example.com) to another domain name ( example.com), which then resolves to an IP address via its own A or AAAA record.Unlike A records (old -direct to IPv4) or AAAA ( modern-direct to IPv6), CNAMEs links name to name, not to IPs, adding a slight extra lookup step but simplifying management if the target IP changes.It can't mix with other records on the same name, like MX for email.

Think like a company's website where "masterji.chaiCode.com" has a CNAME record pointing to "chaiCode.com". When we type the msaterji address into our browser, DNS follows the alias(nickname/stagename) to the main site, grabs its IP (like from an A record), and loads the page ,which is perfect for redirecting old links or subdomains without changing IPs manually.

What an MX Record ?

An MX record is a DNS entry that tells other email servers which mail server handles incoming emails for your domain, including a priority number to decide the order if multiple servers are listed.MX records enable redundancy (backup servers if the main one fails) and load balancing for high email traffic, ensuring reliable delivery even if your web server (via A record) is separate. Without them, emails to our domain might fail entirely.

Let’s take an example -when we send an email to friend@yourcompany.com, the sender's server checks your company's MX record ( pointing to mail.yourcompany.com with priority 10), connects to that server via SMTP, and delivers the message,like a postal service label directing mail to the right post office branch instead of guessing.

What a TXT Record ?

A TXT record is a flexible DNS entry that stores random(arbitrary) text data tied to a domain, originally for human-readable notes but now mainly for machine readable info like verification codes or email security policies.TXT records power SPF/DKIM/DMARC to fight email spam.

How do all DNS records work together for one website ?

DNS records work together like a football team for a website ,each player/record has its specific role to play like changin the typed url into into a loaded page, email delivery and verifciation.

Flow to show how each records work ,when we type “ www.example.com ” :

1. NS records first direct our device to the right DNS servers owning example.com.

2. CNAME ( if used ) aliases www.example.com to example.com for simplicity.

3. A or AAAA records then provide the actual IPv4/IPv6 address to reach the web server.

4. MX records kick in separately for emails to @example.com, routing to mail servers like

   mail.example.com

5. TXT records add proof, like SPF text to validate senders and prevent spam.

Suppose there are millions or billions of networks (Device + wires + rules =network) connected with each other, for each network to talk to each other, there needs to be some standard rules that the network needs to follow to communicate with each other.If every network makes its own rules “ how to communicate with each other “ ,then it would be impossible to follow each rules to communicate with each other .So there was a need to have some standard rules( protocols)—standardized sets of rules that determine how data is packaged, addressed, and delivered. This is how the rules for effective communication came into existence on the Internet.

The two most important sets of rules for moving data over internet are TCP and UDP.

TCP (Transmission Control Protocol)

Transmission Control Protocol (TCP) is a fundamental protocol of internet that ensure that our data over the Internet gets delivered reliably between devices , like when a web page get loaded or we send an email.

TCP is like reliable courier. It focus is accuracy and order. Before sending anything, it focuses on establishing a connection (a" 3 way handshake") to make sure the receiver is ready to receive.If a piece of data goes missing, TCP notices and resends it.

TCP works at the transport layer of networking. It breaks data into small packets, numbers them, and reassembles the packets at the destination(receiver side) .It uses ‘ 3 way handshake ‘ to establish a connection before sending data to the destination, preventing data loss or jumbling.

3-way handshake

UDP (User Datagram Protocol)

UDP is like a “ speedy bird messenger” .It doesn’t care about the handshake or checking if the data arrived at the destination.It just sends the data as fast as possible .If a piece of data (packet) is lost then its gone, UDP doesn’t look back for that lost data.

Key difference between TCP and UDP

When to use which Protocol (TCP vs UDP)

1. Use TCP when accuracy is non-negotiable. If losing a single packet would break the final result , then we need to use TCP. Let’s take real world example when to use TCP ,Email (SMTP), Web browsing (HTTP/HTTPS), File transfers (FTP).

2. Use UDP when we need speed and need real-time feel are more important then perfect quality.In this scenario, a small glitch is better then a long delay.Real world example are Live Video Streaming of Matches , Online gaming ,voice calls, DNS lookup

What is HTTP ?

HTTP (HyperText Transfer Protocol) is the language a web browser uses to talk to a web-server.If TCP/UDP are a courier Van/truck then HTTP is the content inside the boxes.

HTTP sits on the application layer (the top layer) ,while TCP sits at the transport layer below it.

A website needs to load perfectly without missing any text or multimedia files, so here the comes the use of TCP as it is reliable and makes sure every data packets arrive in the same excat order and are not lost .When we type a url ,our browser opens a TCP connection first and then sends the HTTP request through the secure connection.

Why HTTP does not replace TCP ?

HTTP is the language that web-browser uses to talk to web-server.HTTP focues on semantics (methods, headers, status codes ), but it lacks TCP core functionality like packet ordering, acknowledgement and retransmission of packets lost and flow control.

TCP is like a courier service that gurantess that every package arrive intact, in the right order , and also notfies the sender that package has been delivered correctly. HTTP is like the shipping label and packaging slip on the packages, speacifying “ Deliver webpage content for this “X” URL with these headers “ ,but it relies entirely on the TCP (courier) for actual transport.

Prerequisite for git to work :

To have git work locally, we need to install git on our machine

When git is installed on our machine and we start working on a project. When we run the command “ git init “ on our terminal in the current working directory, then a “ .git “ folder is created in our directory which is hidden by default in almost every operating system. This is due to protect the integrity of the project.The .git contains entire history of the project changes and if we delete this .git folder or change something in it then we corrupt our version control history; our project is there but history is gone .So “ .git “ folder is the git brain. Every changes are saved in this folder and it contains all the details about our commit history , branches , metadata etc.
A .git folder have objects, refs ,HEAD , index and config files and folders.We dont usually touch them directly ,only git manages it.

Git Objects

Blob : it has just raw file content, no filename, folder permissions are stored.if there are two files with the same content git ignores one blob.

Tree (Directory structure)

Tree represents the filename , folder structure and which blog belongs to which file

Commit

Commit contains pointer to a tree , parent commit, author , the timestamp, and commit message. it doesn’t directly store the file, it points to a tree which in turn points to a blob(which contains raw content).Each commit points backward to its parent.This creates a chain .

What happens when we work with git commands?

Suppose we are working on a project and run ‘git init’ command to configure our project to save our history of changes. Suppose we did some in a file script.js and when we run “ git add script.js “ . the following things happen:

• Git reads file content

• Create a blob object

• Git calculates SHA-1 hash of for that content

• Git stores blob in .git/objects

• git updates the index(staaging area)

The staging area is preprating for next commit

When we run “ git commit -m “Added feature 1” the following things happen

• Since blob is in the staging area it takes from it

• creates a tree object

• creates a commit object pointing to the tree that was created

• links to the previous commit

• Updates branch pointer (like main/master)

How Git Uses Hashes ?

Every git object has a hash code which looks like e4d909c290d0fb1ca068ffaddf22cbd0 .If we change one character, then the hash also changes completely.
Why hash is imporatant?

• commit hash depends upon tree hash

• tree hash depends upon blob hashes

• Blob hash depends on file content

so if someone modifies a file in old history, then everything changes from blob hash to treehash to commit hash ,so it leads to integrity in our project.

1. In the phase of software development journey, version control system(VCS) are like tracking machines which helps us to manage code . If VCS is not there then its cumbersome to manage code.

   Suppose a developer makes a mistake in the code and it break the whole application, and the developer can’t remember where to look at in the code.This is where VCS comes handy where it allows a developer to get back to the previous section where the application was working .

What happended before Version Control System(VCS)?

In software development before VCS was introduced, the developers used to have a pendrive containing the source of the project , each developer was working on different features and saving it on their pendrive but the problem arose when the the final application was to be tested, where each user would have their own copy with different features.The final apllication would have duplicate code of many developers if it were to be merged finally. There was no tracking history of which developer worked on which feature and suppose there was bug in the application, there was no way to track it to the source that easily becasue many developers have worked on the same project. These issues made the project time-consuming, cumbersome, deadline for the project got delayed and project cost increased as it needs more developers to remove the bug .

How VCS came into Rescue?

Due to the pendrive problem where every developer was working in parallel on the same project on the pendrive and saving on it and when the final project was to be tested then there was issues of duplicate features and if theres was a bug in the code then theres was no way of tracking the code and it was also time consuming to get back to the original working timeline . To save this issue, VCS was introduced. The Linux kernel team needed a better system to work and save their timeline changes. So Linus Torvalds created GIT.

What does Git have?

• Everyone has a full copy of the project

• Everyone has their own timeline of changes made in the project

• Everyone can track their change history

• Easy to revert back to the working timeline

• Branching feature

• Very fast

Git solved many problems for developers around the world, where every developer can have copy of the project and work on it independently, have a history of changes done in the project ,go back to the timeline of working feature and can also save it .The time taken for fixing the bug when pendrive/mail/floppy-disk was used mostly for development .

How GIT works ?

Git is an independent distributed version control system which allows a developer to keep the history of changes in the project .So in simple terms, git allows multiple developers to work on a project and keep the history of changes and can undo those changes if needed.

Why Git is Used?

• It allows mutiple developers to work on same project independently with the help of branches.

• Every developer has its own local history of changes when they work in a project.

• Git doesn’t requires internet to work on.It works on the local machine without internet but git need to be installed first on the local machine

• Since git has history of changes tracked,we can always revert back to the working phase of the project if any bugs comes.

Git Basics and Core Terminologies

1. Repository (Our "Project") : It is a folder that contains all files of our project and it also contains a hidden folder called “ .git “ which has all the history of our changes in the project.

2. Commit ("Snapshot") : It is like a snapshot/picture of our changes in the project.when we commit a change then we tell git to keep a snapshot of all of our changes and store them in a database/file .A commit id which is always unque, and a message explaining changes in the project.

3. Branch : It is like a pointer to our commit. In old git version the default branch name was master and now mostly main is used. When a developer wants to add a feature on a project ,then it can create a branch which will work in parallel without breaking the already stable code.After testing the developer can merge it with main branch.

4. HEAD : It is like a marker which points to the current working branch or commit .So it points to the current active version of the project

Git basic Commands

git init

This command initialized the current directory into a git repository and create a “ .git “ hiddent folder in it which will save all the changes commited by the developer. git init command lets us use all the git commands after it was run.

git status

It tells us exactly what is happedning in our project currently.it tells if there are changes to commit or which files user have changed or what is git ignoring.

git add

It adds the all changes to staging area before we commit changes.
git add filename : It is the command we run when we want to put our code to the staging area.
git add . : It is command that put all the files changes to the staging area.

git commit

If the code is in the staging area then it takes everything from it and take a snapshot and save it in the project history.

usage : git commit -m “ change message “

git log

It tells the history of our commits that we have made in our project.

git log : It shows a detailed history of commits with complete id , time , autthor etc.

git log —oneline : It shows the short version of git commit history

Real World Example

Imagine we start a new Project in our Local machine.

Prerequisite for git to work in our project , git needs to be installed in our local machine first.

1. initialize git in our project with command “ git init “

2. Create a file with command “ code index.js” or “ touch index.js “

3. Check Status with command “ git status “ . It will show a new file that was created and it has not been tracked yet

4. With command “ git add index.js “ we move the file to the staging area.

5. With command “ git commit -m ‘‘initail commit : create new js file “ .

6. To verify our changes we use the command “ git log “