CSS is used to style HTML, but before styling anything, CSS must know:

Which element should be styled?

That’s where CSS selectors come in.

CSS selectors are like addresses.
They help CSS find and target specific HTML elements on a webpage.

Without selectors:

• CSS wouldn’t know where to apply styles

• Every element would look the same

So, selectors are the foundation of CSS.

CSS Selectors Explained with a Real-World Analogy

Imagine you are in a classroom:

• Saying “Everyone stand up” → targets all students

• Saying “Students wearing blue shirts stand up” → targets a group

• Saying “Rahul, stand up” → targets one specific person

CSS selectors work in the same way.

Element Selector

The element selector targets HTML elements by their tag name.

Example

p {
  color: blue;
}

What it does

• Targets all <p> elements

• Applies the same style everywhere

When to use

• When you want to style all elements of one type

Before Styling

<p>This is a paragraph</p>
<p>This is another paragraph</p>

After Styling

All paragraphs turn blue

Class Selector

The class selector targets elements using a class name.

It starts with a dot (.).

Example

.highlight {
  background-color: yellow;
}

<p class="highlight">Important text</p>

What it does

• Targets only elements with class="highlight"

• Can be reused multiple times

When to use

• When styling multiple elements in a similar way

ID Selector

The ID selector targets one unique element.

It starts with a hash (#).

Example

#main-heading {
  color: red;
}

<h1 id="main-heading">Welcome</h1>

What it does

• Targets only one element

• IDs must be unique

When to use

• For special or unique elements

Group Selector

The group selector lets you apply the same style to multiple selectors.

Example

h1, h2, p {
  font-family: Arial;
}

What it does

• Styles all listed elements together

• Reduces repeated CSS code

When to use

• When multiple elements need same styling

Descendant Selector

The descendant selector targets elements inside another element.

Example

div p {
  color: green;
}

What it does

• Targets <p> elements inside a <div>

• Does not affect paragraphs outside

Why it’s useful

• Helps in structured and clean styling

• Very common in real projects

>

Basic Selector Priority (Very High Level)

When multiple selectors target the same element, CSS follows a priority rule.

Simple Priority Order:

1. ID selector (highest)

2. Class selector

3. Element selector (lowest)

Example

p { color: blue; }
.text { color: green; }
#para { color: red; }

The text becomes red because ID has the highest priority.

Before and After Styling Example

HTML

<p class="note">This is a note</p>

CSS

.note {
  color: purple;
  font-size: 18px;
}

Result

The paragraph becomes larger and purple, clearly showing how selectors work.

Why CSS Selectors Are the Foundation of CSS

• Every CSS rule starts with a selector

• Without selectors, CSS is useless

• Strong selector knowledge = better layouts

If you master selectors:

• CSS becomes easier

• Debugging becomes simpler

• Styling feels logical, not confusing

Final Thoughts

CSS selectors are not hard —
they just need clear understanding and practice.

Start with:

• Element selectors

• Class selectors

• ID selectors

Once these are clear, advanced CSS becomes much easier.

Learn selectors well — and CSS will stop feeling scary.

HTML stands for HyperText Markup Language.

HTML is used to:

• Create the structure of a webpage

• Tell the browser what content exists

• Organize text, images, links, buttons, etc.

In simple words:

HTML is the skeleton of a webpage.

Just like the human body needs a skeleton to have shape,
a webpage needs HTML to exist in a structured form.

HTML as the Skeleton of a Webpage

Think of a webpage like a house:

• HTML → structure (walls, rooms)

• CSS → design (colors, styling)

• JavaScript → behavior (interactions)

Without HTML, there is nothing to style or interact with.

What an HTML Tag Is

An HTML tag is a keyword wrapped inside angle brackets < >.

Example:

<p>

Tags tell the browser

“This content has a specific meaning or role.”

Opening Tag, Closing Tag, and Content

Most HTML tags come in pairs.

Example:

<p>Hello World</p>

Here:

• <p> → Opening tag

• </p> → Closing tag

• Hello World → Content

What an HTML Element Means

This is a very important concept.

HTML Element = Opening tag + Content + Closing tag

Example:

<p>Hello World</p>

The entire line is one HTML element.

Difference between Tag and Element

• Tag → <p> or </p>

• Element → <p>Hello World</p>

Many beginners confuse this — so remember:

Tags build elements.

Self-Closing (Void) Elements

Some HTML elements do not have content.

They are called:

• Self-closing elements

• Void elements

Examples:

<img src="image.jpg">
<br>
<hr>

These elements:

• Do not have closing tags

• Are complete by themselves

Block-Level vs Inline Elements

HTML elements behave differently on the page.

Block-Level Elements

• Take full width

• Start on a new line

Examples:

<div>
<h1>
<p>
<section>

Inline Elements

• Take only required width

• Stay in the same line

Examples:

<span>
<a>
<strong>

Commonly Used HTML Tags

Here are some basic and commonly used tags for beginners:

Simple Examples to Understand Better

Paragraph

<p>This is a paragraph</p>

Heading

<h1>Main Heading</h1>

Div and Span

<div>
  <span>Inline text</span>
</div>

These are the most used tags in real projects.

Tags Explained Using an Analogy

Think of HTML like labelled boxes:

• Tag → Box label

• Content → Item inside the box

• Element → Complete box

This helps the browser understand how to treat the content.

Encourage Yourself to Inspect HTML in the Browser

Right-click on any webpage → Inspect

You’ll see:

• Real HTML

• Real tags

• Real elements

This is one of the best ways to learn HTML.

Keep This in Mind as a Beginner

• Don’t memorize all tags

• Focus on understanding structure

• Practice small examples

• HTML becomes easy with repetition

Final Thoughts

HTML is simple, logical, and beginner-friendly.

Once you understand:

• What a tag is

• What an element is

• Block vs inline behavior

You build a strong foundation for CSS and JavaScript.

HTML is not hard —
it just needs clear understanding and practice.

If you are a beginner, you probably write HTML like this:

<div>
  <h1></h1>
  <p></p>
</div>

Typing every opening tag, closing tag, indentation —
it works, but it feels slow and repetitive.

Now imagine doing this again and again for:

• Lists

• Cards

• Forms

• Layout sections

This is where Emmet saves your time.

What Emmet Is ?

Emmet is a shortcut language for writing HTML faster.

You write a short expression → Emmet expands it into full HTML.

In one line:

Emmet helps you write more HTML by typing less.

It’s not a new language,
it’s just a productivity tool built into code editors.

Why Emmet Is Useful for HTML Beginners

For beginners, Emmet:

• Reduces typing effort

• Helps focus on structure, not syntax

• Makes HTML feel less boring

• Builds confidence quickly

Important point:

1.Emmet does NOT replace HTML

2.it only helps you write HTML faster

How Emmet Works Inside Code Editors

Emmet is built into modern editors like:

• VS Code (recommended)

• Sublime Text

• Atom

How it works:

1. You type an Emmet abbreviation

2. You press Tab (or Enter)

3. Editor expands it into HTML

No extra setup needed in VS Code.

Basic Emmet Syntax and Abbreviations

Emmet uses simple symbols:

Creating HTML Elements Using Emmet

Emmet Abbreviation

div

Press Tab

Expanded HTML

<div></div>

Another example:

p

<p></p>

Adding Classes, IDs, and Attributes

Class

div.container

<div class="container"></div>

ID

section#hero

<section id="hero"></section>

Class + ID together

div.card#product

<div class="card" id="product"></div>

Creating Nested Elements

Nesting means elements inside elements.

Emmet Abbreviation

div>h1+p

<div>
  <h1></h1>
  <p></p>
</div>

Repeating Elements Using Multiplication

Let’s say you want 3 list items.

Emmet Abbreviation

li*3

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

Now with a list:

ul>li*4

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

Generating Full HTML Boilerplate with Emmet

This is one of the most popular Emmet features.

Emmet Abbreviation

!

Press Tab

<!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>

Emmet Workflow Inside a Code Editor

Daily workflow looks like this:

1. Think of structure

2. Write short Emmet expression

3. Press Tab

4. Edit content

This keeps you:

• Fast

• Focused

• Productive

Common Beginner Tips

• Try every example yourself

• Use Emmet slowly at first

• Don’t memorize — practice

• Use it only where it helps

Remember:

Emmet is optional, but once you get used to it,
you won’t want to write HTML without it.

Final Thoughts

Emmet does not make you a better developer overnight —
but it removes friction from writing HTML.

For beginners:

• Less typing

• Less frustration

• More learning

If you are learning HTML & CSS,
Emmet is one of the best productivity tools you can start with.

Most people say:

“Browser website kholta hai.”

But technically, a browser is a software system that:

• Talks to servers

• Downloads HTML, CSS, and JavaScript

• Understands these files

• Converts them into a visual page

• Displays pixels on your screen

In simple words:

A browser is a translator + builder + painter.

It translates code into something humans can see and interact with.

Start with a simple question:

“What happens after I type a URL and press Enter?”

When you type a URL and press Enter:

1. Browser sends a request to a server

2. Server sends back HTML, CSS, JS

3. Browser reads and understands this code

4. Browser builds internal structures

5. Browser calculates layout

6. Browser paints pixels on the screen

All this happens in milliseconds.

Main parts of a browser

A browser is not one single thing.
It is a collection of components working together.

High-level parts:

• User Interface

• Browser Engine

• Rendering Engine

• Networking

• JavaScript Engine

• Data Storage

User Interface: address bar, tabs, buttons

This is the part you interact with.

It includes:

• Address bar

• Back / forward buttons

• Tabs

• Bookmarks

Important point:

The UI does NOT render the webpage itself.

It only takes input from the user and shows output from the browser engine.

Browser Engine vs Rendering Engine

This is where beginners often get confused — so let’s keep it simple.

Browser Engine

• Acts as a controller

• Connects UI with rendering engine

• Decides what should happen next

Rendering Engine

• Responsible for displaying content

• Converts HTML + CSS into pixels

Think like this:

• Browser Engine = Manager

• Rendering Engine = Worker

Names you may hear:

• Chromium (Chrome)

• Gecko (Firefox)

Networking: how a browser fetches HTML, CSS, JS

Browser has a networking layer that:

• Sends HTTP requests

• Receives responses from servers

• Downloads:

  • HTML

  • CSS

  • JavaScript

  • Images

This is where:

• DNS

• TCP

• HTTP
  come into play.

HTML parsing and DOM creation

Once HTML is downloaded, the browser parses it.

Parsing means:

Reading the code and understanding its structure.

From HTML, the browser creates the DOM (Document Object Model).

DOM is:

• A tree-like structure

• Each HTML tag becomes a node

Very basic idea of parsing (simple math example)

Take this expression:

2 + 3 × 4

Parsing means:

• Breaking it into parts

• Understanding order

• Creating a structure

Which becomes:

• + at top

• 2 on one side

• 3×4 on the other

CSS parsing and CSSOM creation

Just like HTML creates DOM,
CSS creates CSSOM (CSS Object Model).

CSSOM:

• Represents styles

• Also structured like a tree

• Tells browser:

  • Colors

  • Sizes

  • Positions

  • Fonts

DOM = structure
CSSOM = styling

How DOM and CSSOM come together

DOM alone doesn’t know how things look.
CSSOM alone doesn’t know what to style.

So browser combines them to create:

Render Tree

Render Tree:

• Contains only visible elements

• Has structure + styles

Layout (reflow), painting, and display

After Render Tree is ready:

1. Layout (Reflow)

• Calculates exact position and size of elements

2. Painting

• Fills colors

• Draws text

• Applies borders

3. Display

• Pixels appear on screen

This is how code becomes visible UI.

Full browser flow: from URL to pixels

Putting everything together:

1. URL entered

2. Network request sent

3. HTML received

4. DOM created

5. CSS received

6. CSSOM created

7. Render Tree built

8. Layout calculated

9. Paint happens

10. Page displayed

Final reassurance for beginners

You do not need to remember everything.

The goal is to understand:

• Browser is a system

• Many parts work together

• Flow matters more than terms

With time:

• DOM will feel natural

• CSSOM will make sense

• Rendering will not feel scary

A server is simply a computer that:

• Stores data

• Runs applications

• Responds to requests from users

When you open a website:

• Your device sends a request to a server

• The server sends back a response (HTML, JSON, data, etc.)

This request–response communication is the foundation of the web.

What is cURL?

cURL is a command-line tool used to send requests to a server and see the response.

In simple words:

cURL lets you talk to a server from the terminal.

It works with:

• Websites

• APIs

• Backend services

You type a command → server responds → you see the result.

Why Programmers Need cURL

Programmers use cURL to:

• Test APIs

• Check server responses

• Debug backend issues

• Learn how HTTP works

• Verify if a server is up or not

Unlike a browser:

• cURL is fast

• cURL is simple

• cURL shows raw responses

For backend developers, cURL is like a basic testing tool.

Making Your First Request Using cURL

Let’s start with the simplest possible command.

curl https://example.com

What happens here?

• cURL sends a request to example.com

• The server sends back a response

• cURL prints that response in the terminal

This is similar to opening a website — but without a browser

Understanding Request and Response (High Level)

Every communication using cURL follows this pattern:

Request

• Sent by client (you)

• Contains:

  • Method (GET / POST)

  • URL

  • Optional data

Response

• Sent by server

• Contains:

  • Status code (200, 404, etc.)

  • Data (HTML, JSON, text)

Using cURL to Talk to APIs

APIs are servers that return data instead of web pages.

Example:

curl https://api.github.com

You will see:

• JSON data

• Metadata about the API

This is extremely useful because:

• Backend developers work with APIs daily

• cURL helps test APIs quickly without writing code

Introducing GET and POST (Only the Basics)

GET Request

Used to fetch data.

curl https://api.github.com/users/octocat

GET means:

“Give me information”

POST Request

Used to send data.

curl -X POST https://example.com

POST means:

“I want to send something to you”

For now, just remember:

• GET = read data

• POST = send data

Browser Request vs cURL Request

When you open a website:

• Browser sends the request

• Browser formats the response nicely

With cURL:

• You send the request manually

• You see the raw response

This makes cURL perfect for:

• Learning

• Debugging

• Backend testing

Where cURL Fits in Backend Development

In backend and production systems:

• cURL is used to test APIs

• cURL checks server health

• cURL helps debug issues quickly

Even experienced engineers use cURL daily.

A Modem is the entry point of the internet into your home or office.

Your Internet Service Provider (ISP) sends data over telephone lines, fiber, or cable.
A modem’s job is to convert that signal into digital data your devices can understand.

In simple terms:

Modem = Translator between ISP and your network

Without a modem, your local network would have no connection to the internet.

example:
A modem is like the post office counter where external mail enters your building.

What is a Router and how it directs traffic?

A Router decides where data should go.

Once data enters through the modem, the router:

• Assigns IP addresses to devices

• Routes traffic between local devices and the internet

• Chooses the best path for outgoing packets

In short:

Router = Traffic director of the network

Analogy:
A router is like a traffic police officer deciding which road each vehicle should take.

For software engineers, routers enable:

• Internet access

• Local networking

• Network Address Translation (NAT)

Switch vs Hub: how local networks actually work?

Hub (Old and Inefficient)

A Hub sends incoming data to all connected devices, whether they need it or not.

Problems:

• Wastes bandwidth

• Causes collisions

• No intelligence

Analogy:
A hub is like shouting a message in a crowded room.

Switch (Modern and Smart)

A Switch sends data only to the intended device using MAC addresses.

Benefits:

• Faster

• Secure

• Efficient

Analogy:
A switch is like hand-delivering a letter to the correct room.

What is a Firewall and why security lives here?

A Firewall protects your network by filtering traffic.

It:

• Allows trusted traffic

• Blocks malicious or unauthorized access

• Enforces security rules

Firewalls sit between:

• Internal network

• External networks (internet)

Analogy:
A firewall is like a security gate that checks IDs before entry.

For backend systems:

• Firewalls protect databases

• Restrict admin access

• Prevent unauthorized traffic

A Load Balancer distributes incoming traffic across multiple servers.

Why it’s needed:

• Prevents server overload

• Improves availability

• Enables horizontal scaling

Analogy:
A load balancer is like a toll booth with multiple lanes, spreading vehicles evenly.

In production systems:

• Users never talk to backend servers directly

• They talk to the load balancer

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

Let’s follow a real request:

1. User sends request from laptop

2. Switch forwards it inside the LAN

3. Router decides it needs internet access

4. Firewall checks if traffic is allowed

5. Modem sends data to ISP

6. Request reaches a load balancer

7. Load balancer sends it to a backend server

Each device has one clear responsibility.

Why software engineers should care about network devices

Even if you write only code:

• Your API runs behind a load balancer

• Your database is protected by a firewall

• Your service depends on routers and switches

Understanding these devices helps you:

• Debug production issues

• Design scalable systems

• Communicate better with DevOps teams

The internet is not a single wire.
Data travels through many routers, networks, and countries before reaching its destination.

If there were no rules:

• Data could be lost

• Data could arrive in the wrong order

• Data could arrive too late to be useful

To avoid this chaos, the internet uses protocols — rules that define how data should be sent and received.

Two of the most important transport-layer protocols are TCP and UDP.

What Are TCP and UDP?

TCP (Transmission Control Protocol)

TCP is:

• Reliable

• Ordered

• Connection-based

Think of TCP as a phone call:

• You know the other person is connected

• You know if they heard you

• If something is missed, you repeat it

UDP (User Datagram Protocol)

UDP is:

• Fast

• Connectionless

• Unreliable (by design)

Think of UDP as a public announcement:

• Message is sent

• No confirmation

• If someone misses it, it’s gone

Key Differences Between TCP and UDP

When Should You Use TCP?

Use TCP when:

• Data must not be lost

• Order matters

• Accuracy is more important than speed

Examples:

• Web browsing (HTTP/HTTPS)

• Emails

• File downloads

• Database connections

• APIs

If one byte is missing, the data becomes useless — TCP handles this perfectly.

When Should You Use UDP?

Use UDP when:

• Speed is critical

• Small data loss is acceptable

• Real-time response matters more than accuracy

Examples:

• Live video streaming

• Online gaming

• Voice calls (VoIP)

• DNS queries

Real-World Analogy: TCP vs UDP

• TCP = Courier Service

  • Delivery guaranteed

  • Signature required

  • Slower but safe

• UDP = Live TV Broadcast

  • No retries

  • If you miss a frame, it’s gone

  • Fast and continuous

Common Real-World Examples

What Is HTTP and Where Does It Fit?

HTTP (HyperText Transfer Protocol) is an application-layer protocol.

HTTP defines:

• How requests are made

• How responses are structured

• Status codes

• Headers and methods (GET, POST, etc.)

HTTP does not send data by itself.

It relies on transport protocols like TCP.

Relationship Between TCP and HTTP

• TCP handles reliable delivery

• HTTP handles request-response logic

In simple words:

HTTP tells what to say

TCP tells how to deliver it safely

Why HTTP Does Not Replace TCP

HTTP:

• Has no retransmission logic

• Does not handle packet loss

• Does not manage connections at the network level

TCP:

• Ensures delivery

• Handles errors

• Maintains connection state

That’s why HTTP runs on top of TCP, not instead of it.

Common Beginner Confusion: Is HTTP the Same as TCP?

No

• TCP = Transport layer

• HTTP = Application layer

They solve different problems.

Without TCP:

• HTTP would be unreliable

Without HTTP:

• TCP wouldn’t know what data means

They work together, not as replacements.

Imagine you are sending an important message to your friend, but:

• Messages arrive in random order

• Some messages never arrive

• Some messages arrive twice

• You never know if your friend received them or not

This is exactly what would happen on the internet without TCP.

The internet is unreliable by nature. Data travels through multiple networks, routers, and paths. Things can get lost, duplicated, or delayed.

That’s why we need TCP.

What is TCP and Why Is It Needed?

TCP (Transmission Control Protocol) is a communication protocol that ensures:

• Data reaches the correct destination

• Data arrives completely

• Data arrives in order

• Data is error-free

TCP is used by:

• Web browsing (HTTP/HTTPS)

• Emails

• File transfers

• APIs and backend communication

In short=

TCP makes the internet reliable.

Problems TCP Is Designed to Solve

TCP was created to handle these core problems:

1. Packet Loss – Data packets may get lost in transit

2. Out-of-Order Delivery – Packets may arrive in the wrong sequence

3. Duplicate Packets – Same packet may arrive multiple times

4. Network Congestion – Too much data sent too fast

5. No Confirmation – Sender doesn’t know if data was received

Introducing the TCP 3-Way Handshake

Before any data is sent, TCP first establishes a connection.

This is done using the 3-Way Handshake.

Think of it like starting a phone call:

1. “Can you hear me?”

2. “Yes, I can hear you. Can you hear me?”

3. “Yes, let’s talk.”

Only after this confirmation does actual communication begin.

What Is the TCP 3-Way Handshake?

The TCP 3-Way Handshake consists of three steps:

1. SYN

2. SYN-ACK

3. ACK

This process ensures both sides are:

• Ready to communicate

• Agreeing on initial parameters

• Aware that the connection is established

Step-by-Step Working of SYN, SYN-ACK, and ACK

Step 1: SYN (Client → Server)

The client sends a SYN (Synchronize) packet:

“I want to start a connection.”

This packet contains:

• Initial sequence number

Step 2: SYN-ACK (Server → Client)

The server responds with SYN-ACK:

“I received your request, and I’m ready too.”

This packet:

• Acknowledges the client’s SYN

• Sends the server’s own sequence number

Step 3: ACK (Client → Server)

The client sends an ACK:

“I acknowledge your response. Let’s start communication.”

Now the connection is fully established.

How Data Transfer Works in TCP

Once the connection is established:

• Data is split into segments

• Each segment gets a sequence number

• Receiver sends ACKs for received data

Sender keeps sending data while tracking:

• What is sent

• What is acknowledged

• What needs retransmission

Sequence Numbers and Acknowledgements (High-Level)

Sequence Numbers

• Every byte of data is numbered

• Helps in ordering and loss detection

Acknowledgements (ACK)

• Receiver confirms received data

• ACK number = “Next byte I expect”

This system ensures:

• Correct order

• No missing data

• No duplicates

How TCP Ensures Reliability, Order, and Correctness

TCP guarantees reliability using:

1. Reliability

• Lost packets are detected

• Retransmission happens automatically

2. Ordered Delivery

• Sequence numbers reorder packets correctly

3. Error Detection

• Checksums detect corrupted data

4. Flow Control

• Prevents overwhelming the receiver

How TCP Handles Packet Loss

If a packet is lost:

1. Receiver does not send ACK

2. Sender waits for a timeout

3. Packet is retransmitted

This happens automatically, without the application knowing.

How a TCP Connection Is Closed

TCP connection termination is also graceful and reliable.

It uses:

• FIN

• ACK

TCP Connection Termination Steps

1. One side sends FIN (no more data)

2. Other side sends ACK

3. Other side sends its own FIN

4. Final ACK is sent

This ensures:

• All data is delivered

• No sudden termination

TCP Connection Lifecycle (Big Picture)

Connection Establishment → Data Transfer → Connection Termination

This lifecycle makes TCP:

• Predictable

• Safe

• Reliable

Why TCP Matters in System Design

TCP is everywhere:

• Web applications

• APIs

• Microservices

• Databases

Understanding TCP helps you:

• Debug network issues

• Design scalable systems

• Understand latency and failures

TCP is not just a protocol — it’s a foundation of the internet.

Final Thoughts

TCP turns an unreliable network into a reliable communication channel.

By understanding:

• The 3-way handshake

• Sequence numbers

• ACKs and retransmissions

• Connection closing

You gain clarity on how the internet actually works.

This knowledge is essential for:

• Backend developers

• DevOps engineers

• System design interviews

When you type google.com into your browser and press Enter, your computer magically knows where to go.
But behind this “magic” is a very structured system called DNS.

Most developers use DNS every day, but very few truly understand how it works under the hood.

In this article, we’ll break DNS down step by step, using the dig command to see the DNS resolution process in action — exactly how the internet resolves names to IP addresses.

Think of this as DNS explained like a system designer, not a textbook.

DNS: The Internet’s Phonebook (Why Name Resolution Exists)

Computers don’t understand domain names like:

google.com

They understand IP addresses, like:

142.250.190.14

So DNS (Domain Name System) exists to answer one simple question:

“Which IP address belongs to this domain name?”

Just like a phonebook:

• Name → Person

• Domain name → Server IP

Without DNS, we would have to remember IP addresses for every website.
DNS makes the internet human-friendly.

Introducing dig : A DNS Diagnostic Tool

To understand DNS deeply, we need visibility.

That’s where dig (Domain Information Groper) comes in.

dig is a command-line tool that lets you:

• Query DNS servers directly

• Inspect DNS records

• See how resolution happens step by step

It’s used by:

• System engineers

• DevOps engineers

• Network admins

• Backend developers debugging DNS issues

DNS Resolution Happens in Layers

DNS is not one big server.
It’s a hierarchical, distributed system.

The lookup flow looks like this:

Root Servers
   ↓
TLD Servers (.com, .org, .net)
   ↓
Authoritative Name Servers
   ↓
Final IP Address

Step 1: Root Name Servers

dig . NS

dig . NS

What does this mean?

• . represents the root of the DNS hierarchy

• NS asks: “Who are the name servers for this level?”

What you’ll see

A list of servers like:

a.root-servers.net
b.root-servers.net

What root servers actually do

Root servers do NOT know IP addresses of websites.

They only know:

“Who is responsible for each TLD (.com, .org, .in, etc.)”

Step 2: TLD Name Servers

dig com NS

dig com NS

What’s happening here?

You’re now asking:

“Who manages the .com domain?”

Output meaning

You’ll see servers like:

a.gtld-servers.net
b.gtld-servers.net

These are TLD (Top-Level Domain) servers.

Role of TLD servers

TLD servers:

• Don’t know google.com’s IP

• Know which authoritative servers manage google.com

Think of them as:

A directory that knows which office handles which company

Step 3: Authoritative Name Servers

dig google.com NS

dig google.com NS

What does this tell us?

Now we ask:

“Who is authoritative for google.com?”

Output

ns1.google.com
ns2.google.com

These are authoritative name servers.

Why “authoritative” matters

Authoritative servers:

• Store the actual DNS records

• Are the final source of truth

• Answer with confidence

Step 4: Full DNS Resolution

dig google.com

dig google.com

What happens internally (behind the scenes)

Even though you ran one command, your system (via a recursive resolver) did this:

1. Ask Root Server → “Where is .com?”

2. Ask TLD Server → “Who handles google.com?”

3. Ask Authoritative Server → “What is the IP of google.com?”

4. Return the IP address

Final result

google.com.   300   IN   A   142.250.190.14

This IP is what your browser uses to open a TCP connection.

What Are NS Records and Why Do They Matter?

NS (Name Server) records answer one key question:

“Who is responsible for this domain?”

They:

• Define delegation of authority

• Enable DNS to scale globally

• Allow different organizations to manage their own domains

Without NS records:

• DNS would be centralized

• The internet wouldn’t scale

Role of Recursive Resolvers (The Hidden Worker)

Your browser doesn’t talk to root servers directly.

It asks a recursive resolver (usually provided by your ISP, Google DNS, or Cloudflare).

The recursive resolver:

• Performs all DNS lookups for you

• Caches results

• Improves speed and performance

How This Connects to Real Browser Requests

When DNS finishes:

1. Browser gets the IP

2. TCP connection starts

3. TLS handshake happens

4. HTTP/HTTPS request is sent

5. Website loads

DNS is step zero of every web request.

If DNS fails — nothing works.

System Design Perspective: Why DNS Is Built This Way

DNS is:

• Distributed → no single point of failure

• Hierarchical → easy delegation

• Cached → fast and scalable

• Decentralized → internet ownership stays open

This design allows:

• Billions of queries per day

• Millions of domains

• Global reliability

Have you ever typed a website name like google.com in your browser and wondered:

“Browser ko kaise pata chalta hai ki ye website kahaan hai?”

You never type any IP address. You just type a name — and still, the website opens in seconds.

The answer to this question is DNS.

What is DNS?

DNS stands for Domain Name System.

The easiest way to understand DNS is this:

DNS is the phonebook of the internet.

• Humans remember names (google.com)

• Computers understand numbers (IP addresses like 142.250.183.14)

DNS acts as a translator between the two.

Just like you search a person’s name in your phonebook to get their number, the browser searches DNS to get the server’s IP address.

Why DNS Records Are Needed

DNS is not just one single thing.
It works using records.

Each DNS record solves a specific problem, such as:

• Who controls this domain?

• Where is the website hosted?

• Where should emails be delivered?

• Is this domain verified or trusted?

Without DNS records, the internet would be confusing and unreliable.

What is an NS Record?

NS = Name Server

NS records answer this question:

“Which server is responsible for this domain?”

Think of NS records like this:

• You go to a post office

• You ask, “Where can I find house number 24?”

• The post office says, “Ask that local office, they handle this area”

NS records tell the internet which DNS server has the correct information for a domain.

Without NS records, no one would know where to ask.

What is an A Record? (Domain → IPv4 Address)

A Record = Address Record

This is the most important record for websites.

It answers:

“Is domain ka actual server address kya hai?”

Example:

example.com → 93.184.216.34

Real-life example:

• Website name = House name

• IP address = House number

Browser uses the A record to find the exact server where the website lives.

What is an AAAA Record? (Domain → IPv6 Address)

AAAA record is similar to A record.

The difference is:

• A Record → IPv4

• AAAA Record → IPv6

IPv6 exists because IPv4 addresses are limited.

You can think of it as:

• Old phone numbers vs new longer phone numbers

What is a CNAME Record? (One Name Pointing to Another)

CNAME = Canonical Name

CNAME answers this:

“Is domain ka koi aur naam bhi hai?”

Example:

www.example.com → example.com

Here:

• www.example.com does not have its own IP

• It points to example.com

• Then example.com uses A or AAAA record

Common Beginner Confusion: A vs CNAME

• A Record → Directly points to an IP

• CNAME → Points to another domain name

You never use both together for the same name.

What is an MX Record? (How Emails Find Your Mail Server)

MX = Mail Exchange

MX records answer:

“Is domain ki email kahaan jayegi?”

Example:

example.com → mail.google.com

When someone sends an email to:

support@example.com

MX records tell the email system:

• Which mail server should receive it

• Which server has priority

• NS → Who controls the domain

• MX → Where emails should go

They do completely different jobs.

What is a TXT Record? (Extra Information & Verification)

TXT records store plain text information.

They are commonly used for:

• Domain verification

• Email security (SPF, DKIM)

• Ownership proof

Think of TXT records as:

• Notes attached to your house gate

• “This house belongs to me”

• “Authorized person only”

Browsers usually don’t use TXT records, but services do.

How All DNS Records Work Together for One Website

Let’s see what happens when you open a website:

1. You type example.com

2. Browser asks DNS: “Who handles this domain?”

3. NS record points to the correct DNS server

4. DNS server replies with:

   • A / AAAA record → Website IP

   • CNAME → If alias exists

5. Browser connects to the server

6. Website loads

At the same time:

• MX records handle emails

• TXT records handle verification and security

All records work together, not separately.

In today’s software development world, writing code is not enough. Managing changes, collaborating with other developers, and keeping track of different versions of a project are equally important. This is where Git plays a crucial role.

Git is one of the most popular tools used by developers to track code changes efficiently. Whether you are a student or a beginner in programming, learning Git is a must-have skill. This article explains Git in simple language, its importance, and the most commonly used Git commands.

What is Git?

Git is a distributed version control system that helps developers track changes in their source code over time.

In simple words:

Git keeps a record of every change made in a project so that developers can easily manage and recover code whenever needed.

Git allows you to:

• Save different versions of your code

• Work on new features without affecting the main project

• Collaborate with other developers safely

Why is Git Used?

Git is widely used because it makes software development organized, safe, and collaborative.

Key benefits of Git:

• Tracks complete history of code changes

• Allows multiple developers to work together

• Prevents accidental loss of code

• Helps in debugging by reverting to previous versions

• Works with platforms like GitHub, GitLab, and Bitbucket

Git as a Distributed Version Control System

Git is called a distributed version control system because every developer has a full copy of the project on their local machine.

This means:

• Developers can work offline

• No single point of failure

• Faster performance

• High data security

Each copy of the repository contains the complete project history.

Core Git Terminologies

Before using Git commands, it is important to understand some basic terms:

Repository

A repository (repo) is a folder that contains project files and Git history.

Commit

A commit is a snapshot of changes made to the project.

Branch

A branch is a separate version of the project used to develop features independently.

Merge

Merge combines changes from one branch into another.

Clone

Clone creates a copy of a remote repository on your local system.

Push

Push uploads your local commits to a remote repository.

Pull

Pull downloads the latest changes from a remote repository.

Common Git Commands

Below are some essential Git commands every beginner should know:

Initialize a Repository

git init

Check Repository Status

git status

Add Files to Staging Area

git add .

Commit Changes

git commit -m "Initial commit"

Create or View Branches

git branch

Switch Branch

git checkout branch_name

Merge Branches

git merge branch_name

Clone a Repository

git clone repository_url

Push Changes to Remote

git push origin main

Pull Latest Changes

git pull

Best Practices and Tips

• Write meaningful commit messages

• Commit code frequently

• Use branches for new features

• Always pull latest changes before pushing

• Avoid committing unnecessary files

Conclusion

Git is an essential tool for modern software development. It helps developers manage code efficiently, collaborate with teams, and maintain project history safely. By understanding Git basics and practicing common commands, beginners can confidently work on real-world projects.

Learning Git may seem difficult at first, but with regular practice, it becomes simple and powerful.