First forget computer.

Promise matlab wada.

Jaise mummy bolti hai —
“Padhai karo, shaam ko pizza milega.”

Ab pizza mila ya nahi mila, wo baad ki baat hai.
But mummy ne future ka ek wada kiya.

👉 JavaScript me bhi Promise exactly same cheez hai.

It is a thing that says:

“Abhi result nahi hai, but future me milega… ya fail bhi ho sakta hai.”

Bas itna hi.

Real Life Example 🍔

Suppose you ordered burger on Zomato.

Delivery boy ne bola:
“Bhaiya 20 min me aa raha hu.”

Ab teen possibilities hai:

⏳ 1. Pending (abhi kuch pata nahi)

Delivery boy raste me hai.

Burger mila? — ❌
Cancel hua? — ❌

Bas wait hi wait.

Ye hota hai Pending state

✅ 2. Fulfilled (burger aa gaya)

Door bell bajti hai 🔔

Delivery boy:
“Bhaiya burger le lo”

Ab wada pura ho gaya.

Ye hota hai Fulfilled

❌ 3. Rejected (burger nahi aaya)

Phone aata hai:

“Sir rider gir gaya… order cancel .”

Ab burger nahi milega.

Ye hota hai Rejected

Important Baat 🧠

Promise hamesha 3 state me hi hota hai:

• Pending → wait chal raha

• Fulfilled → success

• Rejected → fail

Aur ek baar decide ho gaya, fir change nahi hota.

Burger aa gaya to aa gaya.
Cancel ho gaya to ho gaya.

Delivery boy bol nahi sakta:

“Sir burger bhi le lo aur cancel bhi samajh lo.” 😂

Ab Computer Wala Part (Darr mat) 💻

Programing me kuch kaam time leta hai:

• Internet se data lana

• File download

• Server se baat karna

Computer bolta hai:

“Bhai tu apna kaam kar, result baad me dunga.”

Isliye Promise use hota hai.

Code Example (simple sa) 👶

const pizzaPromise = new Promise((resolve, reject) => {
  let shopOpen = true;

  if (shopOpen) {
    resolve("Pizza mil gaya 🍕");
  } else {
    reject("Shop band tha 😭");
  }
});

Isme:

• resolve = success

• reject = fail

Result kaise milega ? 🤷‍♂️

Computer khud nahi batata.

Tumko bolna padta hai:

👉 “Result aate hi bata dena.”

Uske liye .then() use hota hai.

pizzaPromise.then((msg) => {
  console.log(msg);
});

Agar success hua → message print

Agar fail ho gaya ? 😬

Tab use hota hai .catch()

pizzaPromise
  .then((msg) => console.log(msg))
  .catch((err) => console.log(err));

Success → then chalega
Fail → catch chalega

Funny Example 🤣

Exam ka result Promise jaisa hota hai.

Result day se pehle:

👉 Pending — mummy bhi tension me, tum bhi

Result aa gaya:

Pass → Fulfilled 🎉
Fail → Rejected 😭

Aur sabse funny:

Result change nahi hota.

Teacher ko bolke:

“Sir reject ko fulfill kar do please”
— nahi hota 😂

One More Real Example 😏

Crush ko message bhejna:

“Hi 🙂”

Reply nahi aaya → Pending
Reply “Hi” → Fulfilled 😍
Reply “Bhaiya bolu?” → Rejected 💀

🔥 Static Methods

Ab tak ek hi Promise tha.

Real life me ek sath bahut cheeze hoti hai.

Jaise Goa trip plan 😎

Promise.all() — Sab ayenge tabhi trip 🚗

Tumne 4 dost ko bola Goa chalte hai.

Rule: Sab ayenge tabhi jayenge

Ek bhi mana → trip cancel ❌

Promise.all([
  Promise.resolve("Rahul aa raha"),
  Promise.resolve("Aman aa raha"),
  Promise.reject("Kunal mana kar diya"),
  Promise.resolve("Rohit aa raha")
])
.then((data) => console.log("Trip pakki", data))
.catch(() => console.log("Trip cancel 😭"));

👉 Ek bhi reject → sab fail

Bilkul real life jaisa 😅

Promise.any() — Koi ek aa jaye bas 😭

Ab tum desperate ho.

“Bhai koi ek chal le mere sath”

Promise.any([
  Promise.reject("Rahul busy"),
  Promise.resolve("Aman aa raha"),
  Promise.reject("Kunal exam")
])
.then((data) => console.log("Trip ho gayi 😎", data))
.catch(() => console.log("Koi bhi nahi aya 💀"));

👉 Ek success mila → kaam ho gaya

Promise.allSettled() — Sabka result batao 📋

Ab tum sirf dekhna chahte ho:

Kaun aa raha
Kaun mana kar raha

Trip ho ya na ho, report chahiye.

Promise.allSettled([
  Promise.resolve("Rahul aa raha"),
  Promise.reject("Kunal mana"),
  Promise.resolve("Aman aa raha")
])
.then((data) => console.log(data));

Output type:

• Fulfilled → aa raha

• Rejected → mana

👉 Ye kabhi fail nahi hota
Bas sabka result de deta

Final Words 🫡

Agar aap non technical ho, ya programing nahi jante, to bas itna yaad rakho:

👉 Promise = Future ka wada

Success bhi ho sakta
Fail bhi ho sakta
Abhi wait chal raha hota

Bas JavaScript wale log isko fancy bana dete 😁

Agar ye samajh aa gaya to aap Promise concept samajh gaye.
Coding baad me bhi seekh sakte ho 👍

Chalo ab chai piyo ☕

When we start learning HTML, everything feels new and little confusing.

You want to make a simple page layout:

• one div

• inside one heading

• one paragraph

• and a list

And then you start typing full HTML like this:

<div>
  <h1></h1>
  <p></p>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

So many tags to type.
So many opening and closing brackets.
Sometimes we forget to close tags also 😅

For beginners, this typing part feels slow and boring.

This is exactly where Emmet helps us.

What is Emmet? (Very Simple Meaning)

Emmet is a shortcut way to write HTML code faster.

Instead of writing full HTML tags again and again,
you write small short forms, and Emmet converts them into full HTML automatically.

You can think Emmet like:

Writing short message in mobile and auto-complete finishes the sentence.

Same concept, but for HTML code.

Why Emmet is Useful for HTML Beginners

For beginners, Emmet is very helpful because:

• It saves typing time

• It reduces silly mistakes

• It helps you understand HTML structure

• You focus more on learning, not typing

Important thing to remember:
👉 Emmet is optional, but once you start using it, you will not like to write HTML without it.

How Emmet Works Inside Code Editors

Emmet already comes built-in in most code editors.

Common editors:

• VS Code (mostly used)

• Sublime Text

• Atom

How it works step by step:

1. You type Emmet shortcut

2. Press Tab

3. HTML code appears automatically

In VS Code, you don’t need to install anything extra.

Basic Emmet Syntax and Abbreviations

Let us start with very basic example.

Creating HTML element using Emmet

Emmet code

p

Press Tab

HTML output

<p></p>

This is the simplest example of Emmet.

Creating HTML Elements Faster

Example: div element

Emmet

div

Generated HTML

<div></div>

Same logic works for:

• h1

• section

• article

• footer

• header

Adding Classes Using Emmet

To add class, Emmet uses dot ( . )

Example:

Emmet

div.box

HTML

<div class="box"></div>

This is very commonly used in real projects.

Adding IDs Using Emmet

To add id, use hash ( # )

Example:

Emmet

div#main

HTML

<div id="main"></div>

Simple and clean.

Adding Class and ID Together

Example:

Emmet

div#navbar.menu

HTML

<div id="navbar" class="menu"></div>

Emmet understands automatically what is id and what is class.

Adding Attributes Using Emmet

Attributes are written inside square brackets [ ]

Example:

Emmet

a[href="https://example.com" target="_blank"]

HTML

<a href="https://example.com" target="_blank"></a>

Very useful for links, images and input tags.

Creating Nested Elements Using Emmet

Nested elements means element inside another element.

To do this in Emmet, we use greater than sign ( > )

Example:

Emmet

div>p

HTML

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

Easy to understand structure also.

More Nested Example

Emmet

div>ul>li

HTML

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

This helps beginners visualise HTML hierarchy.

Repeating Elements Using Emmet Multiplication

To repeat elements, Emmet uses asterisk ( * )

Example: Create 4 paragraphs

Emmet

p*4

HTML

<p></p>
<p></p>
<p></p>
<p></p>

Nested + Repetition Example

Emmet

ul>li*3

HTML

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

This is used daily while writing lists.

Generating Full HTML Boilerplate Using Emmet

This is most loved Emmet shortcut 😄

Just type:

Emmet

!

Press Tab

Full HTML Boilerplate Generated

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

Without Emmet, typing this every time is really boring.

Emmet Workflow Inside Code Editor

Normal workflow looks like this:

1. Decide HTML structure in mind

2. Write Emmet shortcut

3. Press Tab

4. Edit content

5. Move forward

This makes HTML writing smooth and fast.

Emmet is Optional but Powerful

One important thing for beginners:

• You can write HTML without Emmet also

• But Emmet makes you faster

• Most developers use Emmet daily

So learn it slowly, no need to memorise everything at once.

Final Conclusion

When you are learning HTML, writing too much code can feel tiring and confusing.
Emmet removes this pain.

Start with small shortcuts:

• div

• class

• nesting

• multiplication

Practice little everyday, and slowly Emmet becomes habit.

Once you get used to Emmet,
writing HTML feels easy and fun, not boring.

Happy coding and keep practising 🚀

In this blog, we’ll understand how DNS resolution works, using the dig command, in very simple words and full Indian context. No heavy theory, just real world explanation.

What is DNS and Why Name Resolution Exists

DNS means Domain Name System.

Best way to understand DNS is this:
👉 DNS is the phonebook of the internet.

Humans remember names:

• google.com

• facebook.com

But computers only understand numbers:

• 142.250.183.14

So DNS helps convert domain name → IP address.
This conversion is called name resolution.

Without DNS, internet would be headache yaar. Imagine remembering IP address of every website — impossible.

What is the dig Command and Why We Use It

dig stands for Domain Information Groper.

It is a command-line tool mostly used by:

• developers

• system engineers

• devops people

dig helps us see:

• DNS records

• Which server is replying

• How DNS lookup is happening

Example:

dig google.com

This command shows the final IP address, plus many technical details.
Basically, dig shows what browser normally hides from us.

DNS Works in Layers (Very Important Concept)

DNS resolution does not happen in one shot.
It happens step by step in layers.

Order is always like this:

Root Server → TLD Server → Authoritative Server

If you remember only this flow, half DNS is already clear.

Understanding dig . NS – Root Name Servers

Let’s start from the top level.

dig . NS

Here, . (dot) represents the root of DNS.

This command gives us list of root name servers, like:

• a.root-servers.net

• b.root-servers.net

Root servers:

• Don’t know IP of google.com

• Only know who manages .com, .in, .org etc

Root server is like:

“I don’t know exact address, but I know where to ask next”

Understanding dig com NS – TLD Name Servers

Next layer is TLD (Top Level Domain).

dig com NS

This tells us:

Who handles .com websites?

TLD servers:

• Handle .com

• Know which authoritative servers manage google.com

Still, no IP address here.
Only directions.

Think of it like asking railway enquiry counter — they guide you, they don’t take you home.

Understanding dig google.com NS – Authoritative Name Servers

Now we reach correct owner.

dig google.com NS

This shows authoritative name servers like:

• ns1.google.com

• ns2.google.com

These servers:

• Are controlled by Google

• Store real DNS records

• Give final trusted answer

Authoritative servers are boss level.
Whatever they say is final.

Understanding dig google.com – Full DNS Flow

Now the final command:

dig google.com

This gives:

• IP address

• TTL

• Server details

Behind the scene, this happened:

1. Resolver asked Root server

2. Root replied with .com TLD servers

3. Resolver asked TLD server

4. TLD replied with Google’s authoritative servers

5. Resolver asked authoritative server

6. Got final IP address

All this happens in milliseconds. Crazy fast no?

What Are NS Records and Why They Are Important

NS means Name Server.

NS records tell:

“Who is responsible for this domain?”

Why NS records matter:

• They define trust

• They allow delegation

• Without NS, DNS cannot move forward

DNS works only because of NS records chain.

Role of Recursive Resolver (Hidden Hero)

Your browser does not talk to root server directly.

A recursive resolver does this job for you.

Resolver:

• Talks to all DNS servers

• Stores results in cache

• Returns final IP to browser

That’s why website opens faster second time.
Caching saves time and internet energy 😄

How DNS Connects to Real Browser Request

Once browser gets IP address:

1. DNS work is done

2. Browser starts TCP connection

3. HTTP/HTTPS request is sent

4. Server sends webpage

No DNS = No internet. Simple as that.

DNS From System Design Point of View

DNS is:

• Distributed system

• Highly scalable

• No single point of failure

• Cache friendly

This design allows internet to work smoothly even with billions of users.

Final Conclusion

DNS looks boring in beginning, but honestly it is one of the most important system on internet.

By understanding:

• Root servers

• TLD servers

• Authoritative servers

• dig command

You are not just learning theory, you are understanding real internet working.

Without selectors, CSS is nothing. Selectors are the base of CSS.

Why CSS Selectors Are Needed

Let’s understand with a simple Indian example.

Imagine you are teacher in a class.

• You say: “All students stand up” → everyone stands

• You say: “Students wearing white uniform stand up” → some students stands

• You say: “Rohit stand up” → only one student stands

CSS selectors work in same way.

They tell browser:

• which element to pick

• which style to apply

• where exactly to apply

That’s why CSS selectors are very important.

CSS Selectors = Ways to Choose Elements

Selectors are just ways to choose HTML elements.

Simple and clear logic.

1. Element Selector

Element selector selects all elements of one type.

Example

p {
  color: blue;
}

What happens?

• All <p> text becomes blue

• No class or id required

When to use?

• When same style needed for all elements

• Like all paragraph, all headings, body etc

This is the starting point of CSS.

2. Class Selector

Class selector is used when we want to style some elements, not all.

Class selector always start with dot (.).

Example

.card {
  border: 1px solid black;
  padding: 10px;
}

<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div>Normal div</div>

Result

• Only elements with class card get styled

• Same class can be used many time

Why class is popular?

• Reusable

• Flexible

• Mostly used in real websites

3. ID Selector

ID selector is used for one unique element only.

ID selector starts with #.

Example

#main-title {
  font-size: 28px;
}

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

Important rule ⚠️

• One ID = one element

• ID should not repeat

Use case

• Header, footer, main container

• Unique layout elements

4. Group Selectors

Group selector is used when we want same style on multiple selectors.

Example

h1, h2, h3 {
  color: darkgreen;
}

Why use?

• Less code

• Clean CSS

• Easy to maintain

5. Descendant Selectors

Descendant selector targets element inside another element.

Example

div p {
  color: brown;
}

Meaning

• <p> inside <div> gets styled

• Outside paragraph not affected

Real life meaning

“Only people sitting inside this room listen carefully”

6. Basic Pseudo-Classes (Initial Level)

Pseudo-classes are used to style elements based on their state.

We will keep it very basic for now.

Common beginner pseudo-classes:

• :hover

• :active

• :focus

Example

button:hover {
  background-color: green;
}

What this means?

• When mouse goes on button

• Button color changes

Another example

a:hover {
  color: red;
}

Pseudo-classes help in making website interactive.

👉 Don’t go deep now, just know they exist and are useful.

7. CSS Priority (High Level)

Sometimes many selectors apply on same element.
So CSS follows a priority rule.

Normal priority order:

ID > Class > Element

Example

p {
  color: black;
}

.text {
  color: blue;
}

#special {
  color: red;
}

If one paragraph has class and id both, red color apply.

8. The !important Rule (Highest Priority)

!important is the highest priority rule in CSS.

What it does?

• Overrides all previous styles

• Even ID selector can be ignored

Example

p {
  color: blue !important;
}

#special {
  color: red;
}

Result

• Text color becomes blue

• Because !important wins

Final priority order:

!important > ID > Class > Element

⚠️ Use carefully, too much use creates confusion.

Before and After Styling Example

Before CSS

<p>Hello CSS</p>
<p class="note">Important line</p>

After CSS

p {
  color: black;
}

.note {
  color: red;
  font-weight: bold;
}

Same HTML, but different look.
Selectors did the magic.

Think about normal life.
If you want to talk to someone or send something, you follow some rules, right?

Like:

• Phone number should be correct

• Address should be clear

• Message should reach properly

Internet also works in same way.
When data goes from your mobile or laptop to a server, it cannot go without rules.
Otherwise everything will be mess.

These rules are called protocols.

Two very important protocols are TCP and UDP.

What are TCP and UDP? (Very High Level)

What is TCP?

TCP (Transmission Control Protocol) is like a proper phone call or trusted courier service.

TCP first checks:

• Is other side ready or not

• Data is reaching or not

• Order is correct or not

If some data is missing, TCP will send it again.

So TCP is little slow, but very safe and reliable.

Indian example:
Sending important documents by courier with tracking number.

What is UDP?

UDP (User Datagram Protocol) is like announcement on loudspeaker or live TV broadcast.

UDP just sends data fast:

• No checking

• No confirmation

• No resend

If something lost, it is lost.

Indian example:
Live match commentary on radio.
If signal gone, commentator will not repeat again 😄

UDP is very fast but risky.

Key Differences Between TCP and UDP

When to Use TCP

Use TCP when:

• Data is very important

• Accuracy matters

• Losing data is not allowed

Real-World TCP Examples

• Opening websites

• Login and signup forms

• Online payments

• Emails

• File downloads

If even small data is missing, system can fail.
That is why TCP is used.

When to Use UDP

Use UDP when:

• Speed is more important than accuracy

• Small data loss is acceptable

Real-World UDP Examples

• Video calls

• Online gaming

• Live video streaming

• Voice calls

In video call, if one frame is missing, call still works fine.
So UDP is best here.

TCP vs UDP: Real-Life Examples

What is HTTP and Where It Fits

Now many beginners get confused here.

HTTP (HyperText Transfer Protocol) is not responsible for sending data physically.

HTTP only defines:

• How request is made

• How response is sent

• Data format

• Status codes like 200, 404

So HTTP is application-level protocol, not transport one.

Relationship Between TCP and HTTP

Think like this 👇

• HTTP decides what to say

• TCP decides how to send safely

HTTP always runs on top of TCP.

TCP handles:

• Connection

• Data order

• Reliability

HTTP just uses TCP to send its messages.

👉 HTTP does not replace TCP
👉 HTTP cannot work without TCP

Why HTTP Does Not Replace TCP

Because both have different work.

• TCP focuses on delivery

• HTTP focuses on communication rules

They work together, not against each other.

Common Beginner Confusion: “Is HTTP Same as TCP?”

No ❌
They are totally different.

One simple line to remember:

HTTP talks, TCP carries the message.

Final Summary

• TCP is safe and reliable but slow

• UDP is fast but risky

• HTTP is application-level protocol

• HTTP always uses TCP underneath

Once you understand this, networking concepts becomes much easier.

What is HTML and Why We Use It

HTML means HyperText Markup Language.

In simple words, HTML tells the browser:

• this is a heading

• this is a paragraph

• this is an image

• this is a button or link

HTML is used to create structure of a webpage.
It does not add color, animation or logic. That work is done by CSS and JavaScript.

👉 Without HTML, there is no webpage at all.

HTML as the Skeleton of a Webpage

A very common and easy example:

• HTML → Skeleton (basic structure)

• CSS → Clothes (design, color, layout)

• JavaScript → Brain (thinking, logic, actions)

Right now, we are only learning HTML, means the skeleton part.

What is an HTML Tag

An HTML tag is used to give instruction to browser.

Tags are written inside < > brackets.

Example:

<p>Hello World</p>

Here <p> is telling browser that the text inside is a paragraph.

So basically, tags tell what type of content it is.

Opening Tag, Closing Tag and Content

Most HTML tags have three parts.

Example:

<p>This is a paragraph</p>

• <p> → opening tag

• This is a paragraph → content

• </p> → closing tag

Closing tag always comes with a slash /.

This is very basic but very important.

What is an HTML Element

Many beginners get confused here, so listen carefully.

👉 HTML Element = opening tag + content + closing tag

So this full line:

<p>This is a paragraph</p>

is called one HTML element.

• <p> alone is a tag

• whole thing is an element

Easy way to remember

• Tag is like a box

• Element is box + stuff inside it

Self-Closing (Void) Elements

Some HTML elements do not have closing tag.

These are called self-closing elements.

Examples:

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

Why no closing tag?
Because these elements do not have content inside.

• <br> breaks the line

• <img> shows image

• <hr> shows a line

Block-Level vs Inline Elements

This topic is very important for layout.

Block-Level Elements

• Always start from new line

• Take full width of screen

Examples:

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

If you write two <p> tags, they will come one below another.

Inline Elements

• Stay in same line

• Take only needed space

Examples:

<span></span>
<a></a>
<strong></strong>

Inline elements do not break the line.

Commonly Used HTML Tags

As beginner, you should focus on these tags first:

<h1> to <h6>   → headings
<p>            → paragraph
<div>          → block container
<span>         → inline container
<img>          → image
<a>            → link
<br>           → line break

No need to mug up all tags.
Practice slowly and daily.

Difference Between Tag and Element

Many people mix this, so very clear table:

Remember this for interview and basics.

Inspect HTML in Browser (Very Important)

One best habit for learners:

• Right click on any website

• Click Inspect

• See the HTML code

Slowly you will understand how real websites are made.

Diagram Ideas for Blog

You can add diagrams like:

• HTML tag vs element breakdown

• Block vs inline element layout

Diagrams make learning more clear.

Final Words

HTML is simple if you think it as structure, not programming.
Once HTML is clear, CSS and JavaScript becomes much easy.

Practice daily, don’t rush.
HTML is the base of web development, so make it strong.

Think about this situation.

You send a message to your friend, but:

• Some words reach late

• Some words don’t reach at all

• Some words come twice

• And your friend never replies that they got the message

Total confusion, right?

The internet would behave in the same way if there were no rules.

That’s why we have protocols. And one of the most important protocols on the internet is TCP.

What is TCP and why is it needed?

TCP (Transmission Control Protocol) is a set of rules that helps two devices talk to each other properly and safely over the internet.

Whenever you:

• Open a website

• Log in to any app

• Send data to a server

TCP works in the background and makes sure that:

• Data reaches the right place

• Data reaches in the right order

• No data is missing in between

That’s why many important services like HTTP, HTTPS, FTP, and Email use TCP.

Problems TCP is designed to solve

The internet is not perfect. Many things can go wrong while sending data.

Some common problems are:

• ❌ Data packets can get lost on the way

• ❌ Packets can arrive in the wrong order

• ❌ Same packet can arrive more than once

• ❌ Network speed can suddenly become slow or unstable

TCP is designed to handle all these problems by using rules, tracking, and confirmation messages.

What is the TCP 3-Way Handshake?

Before sending actual data, TCP first creates a proper connection between client and server.

This process is called the TCP 3-Way Handshake.

You can understand this with a simple real-life example.

Imagine calling someone on the phone:

1. 📞 You: “Hello, kya mujhe sun sakte ho?”

2. 📞 Other person: “ha, mujhe sunayi de raha. tumhe meri awaz aa rahi hai?”

3. 📞 You: “ha, mai bhi tumhe sun skta hu.”

Only after this confirmation, the real conversation starts.

TCP works in the same way.

Step-by-step working of SYN, SYN-ACK, and ACK

Let’s understand all three steps one by one, in easy words.

1️⃣ SYN (Synchronize)

• The client wants to start a connection

• It sends a SYN message to the server

• Along with that, it sends a starting sequence number

Simple meaning:
👉 “I want to connect, and this is where my data counting will start.”

2️⃣ SYN-ACK (Synchronize + Acknowledge)

• Server receives the SYN message

• Server replies with SYN-ACK

• Server sends:

  • Its own sequence number

  • Confirmation of the client’s sequence number

Simple meaning:
👉 “I got your request and I’m ready from my side too.”

3️⃣ ACK (Acknowledge)

• Client receives the server response

• Client sends an ACK message back

Simple meaning:
👉 “I got your reply. Connection is ready now.”

After this step, the TCP connection is successfully established.

How data transfer works in TCP

Once the connection is ready, actual data transfer starts.

Important points to understand:

• Data is divided into small pieces called packets

• Each packet gets a sequence number

• Receiver sends ACK after receiving packets

Example:

• Packet 1 → Sequence number 1

• Packet 2 → Sequence number 2

• Packet 3 → Sequence number 3

If packet 2 does not reach, the receiver will wait and ask for it again.

How TCP ensures reliability, order, and correctness

TCP uses many techniques to make communication reliable.

✅ Sequence Numbers

• Every packet has a number

• Helps arrange packets in the correct order

✅ Acknowledgements (ACKs)

• Receiver confirms which packets are received

• Sender knows what is delivered successfully

✅ Retransmission

• If ACK is not received within time

• TCP resends the missing packet

✅ Flow Control

• Controls how fast data is sent

• Prevents receiver from getting overloaded

✅ Error Checking

• Uses checksum method

• Detects corrupted data

Because of all this, TCP is very reliable, but slightly slower compared to other protocols.

How TCP handles packet loss

If any packet is lost during transmission:

1. Receiver notices a missing sequence number

2. ACK is not sent for that packet

3. Sender waits for a fixed time

4. Sender retransmits the missing packet

This process continues until the data is received correctly.

How a TCP connection is closed

Just like starting a connection, closing it also follows proper steps.

TCP uses FIN and ACK messages to close the connection safely.

Connection closing steps:

1. Client sends FIN (I have finished sending data)

2. Server replies with ACK

3. Server sends its own FIN

4. Client sends final ACK

After this, the connection is fully closed without losing any data.

TCP connection lifecycle

The full life of a TCP connection looks like this:

Connection Establish → Data Transfer → Connection Close

1. 3-Way Handshake

2. Reliable data transfer

3. Safe and proper connection termination

Final Thoughts

TCP works silently behind the scenes, but it plays a very important role in the internet.

It makes sure that:

• Data reaches correctly

• Data reaches in order

• Communication remains reliable

This is a very common doubt for beginners.

You open your browser, type www.google.com, and press Enter. Within seconds, the website opens on your screen.

But have you ever thought — what actually happens inside the browser?

A browser does not magically show websites. It follows a clear step-by-step process in the background.

You can think of the browser like a team of people, where each person has one job. When everyone does their work properly, the website appears on your screen.

In this article, we will understand how a browser works internally, in very easy language.

What is a browser (not just “it opens websites”)?

A browser is a software that helps us access the internet.

Its main jobs are:

• Talk to servers on the internet

• Download website files like HTML, CSS, and JavaScript

• Understand those files

• Convert them into a webpage

• Show that webpage on your screen

So instead of saying:

“Browser opens websites”

It is better to say:

A browser downloads, understands, and displays websites for users.

Main parts of a browser (high-level idea)

A browser is not a single thing. It is made up of many small parts. Each part has its own job. When all these parts work together, a website loads properly on your screen.

At a high level, these are the main parts of a browser:

1. User Interface

2. Browser Engine

3. Rendering Engine

4. Networking

5. JavaScript Interpreter

6. UI Backend

7. Disk / Storage APIs

Don’t worry if these names feel confusing right now. Let’s understand them slowly, in simple words.

1. User Interface

This is the part of the browser that we can see and use.

It includes things like:

• Address bar where we type the website name

• Tabs

• Back and Forward buttons

• Refresh button

• Bookmarks

The user interface only helps us control the browser. It does not decide how the website content looks.

2. Browser Engine

The browser engine works like a manager.

Its job is to:

• Connect the user interface with the rendering engine

• Decide what should happen and when

• Control the overall working of the browser

You can think of it as the part that keeps everything organised.

3. Rendering Engine

The rendering engine is the part that actually shows the website.

It:

• Reads HTML and CSS

• Understands the structure and styles

• Converts code into visible content on the screen

Without the rendering engine, you would never see a webpage.

4. Networking

The networking part handles all internet communication.

It:

• Sends requests to website servers

• Receives HTML, CSS, JavaScript, images, and other files

• Manages HTTP and HTTPS connections

In simple words, this part brings website data from the internet to your browser.

5. JavaScript Interpreter

The JavaScript interpreter is responsible for running JavaScript code.

It:

• Executes JavaScript line by line

• Handles clicks, form actions, and user events

• Updates the webpage without reloading

Whenever a website feels interactive, JavaScript is doing the work.

6. UI Backend

The UI backend helps the browser draw basic interface elements.

It:

• Draws buttons, input boxes, dropdowns

• Uses the operating system’s UI features

Because of this, browsers work smoothly on Windows, macOS, and Linux.

7. Disk / Storage APIs

This part is used to store data on the user’s system.

It manages:

• Cache

• Cookies

• localStorage

• sessionStorage

This helps websites remember user information and load faster next time.

Right now, you don’t need to remember all these parts. Just understand that a browser is a collection of components, each doing its own small job.

User Interface (UI)

The User Interface is the part of the browser that we can see and use.

It includes:

• Address bar (URL bar)

• Back and Forward buttons

• Refresh button

• Tabs

• Bookmarks bar

The UI does not decide how a website looks.

Its job is only to help users:

• Enter website addresses

• Move between pages

• Open and manage tabs

Browser Engine vs Rendering Engine (easy difference)

Many beginners get confused between these two, so let’s keep it very simple.

Browser Engine

• Works like a manager

• Controls the overall flow

• Connects the User Interface with other browser parts

Rendering Engine

• Works like an artist 🎨

• Takes HTML and CSS

• Converts them into a visible webpage

Some engine names (just for knowledge):

• Chrome uses Blink

• Firefox uses Gecko

Networking: how the browser gets website files

When you press Enter after typing a URL:

1. Browser asks DNS: “Where is this website located?”

2. DNS gives the server’s IP address

3. Browser sends an HTTP or HTTPS request

4. Server sends back files like:

   • HTML

   • CSS

   • JavaScript

   • Images

All this communication is handled by the Networking part of the browser.

HTML parsing and DOM creation

After downloading the HTML file, the browser starts reading it.

But the browser does not directly understand HTML text.

So it parses the HTML.

What does parsing mean?

Parsing means:

Breaking something into smaller parts so it can be understood properly.

DOM (Document Object Model)

• Browser reads HTML line by line

• Converts it into a tree-like structure

• This structure is called the DOM

Example:

<body>
  <h1>Hello</h1>
  <p>World</p>
</body>

This becomes a tree like:

body
 ├─ h1
 └─ p

You can think of the DOM like a family tree, where each element is connected.

CSS parsing and CSSOM creation

CSS is also processed separately.

The browser:

• Reads CSS rules

• Understands selectors and styles

• Builds another tree called CSSOM

CSSOM decides:

• Which element gets which style

• What color to use

• What font size and layout to apply

In short:

• DOM = structure of the page

• CSSOM = styling of the page

How DOM and CSSOM work together

Now the browser combines:

• DOM (page structure)

• CSSOM (styling rules)

Together, they form the Render Tree.

The Render Tree:

• Contains only visible elements

• Has style information for each element

Elements with display: none are not included here.

Layout (reflow), painting, and display

Once the Render Tree is ready, the browser starts drawing the page.

1. Layout (Reflow)

• Calculates size and position of every element

• Decides where each box will appear on the screen

2. Painting

• Applies colors

• Draws text, borders, images

3. Display

• Final output appears as pixels on your screen 🖥️

This whole process happens very fast.

Simple idea of parsing (math example)

Let’s take a small math example:

2 + 3 * 4

Your brain understands that:

• 3 * 4 should be solved first

• Then 2 + result

This creates a logical structure in your mind.

HTML parsing works in a similar way — the browser understands meaning, not just text.

Complete flow: from URL to screen

Here is the full journey:

1. User types a URL

2. Browser sends a request

3. Server sends HTML, CSS, and JS

4. HTML is converted into DOM

5. CSS is converted into CSSOM

6. DOM and CSSOM create Render Tree

7. Layout (reflow) happens

8. Painting happens

9. Pixels appear on the screen

Final thoughts

Understanding how a browser works helps you become a better web developer.

It helps you:

• Write better HTML and CSS

• Understand performance issues

• Fix layout and rendering problems

This topic is not about memorising terms.

It is about understanding what happens behind the scenes.

Keep learning and keep building 🚀

Let’s take a simple situation.

Three friends are working on a college project. One friend writes the main code, the second friend adds new features, and the third friend fixes bugs. To share the code, they use a pendrive.

One day, Friend A copies his code to the pendrive. Next day, Friend B updates the code and saves it. Then Friend C also makes changes and copies his version. Now the pendrive has only one version of the code.

Nobody knows:

• Whose changes are included.

• Whose work got overwritten.

• Which version was actually correct.
  File names like:

• project_final

• project_final_v2

• project_latest

• project_latest_final

And still… project doesn’t work.

This confusion is the main reason why version control exists.

Before Git and GitHub, developers used pendrives, emails, and folders to manage code. At that time, it felt normal. But slowly, problems started appearing—especially when more people worked together.

Let’s understand this problem properly.

Life Before Version Control

How developers shared code earlier

Before version control systems, developers used very simple methods:

• Sharing code using pendrives

• Sending ZIP files through email

• Keeping multiple folders as backup

• Manually copying code from one file to another

For small work, it was okay.
But for real projects, it became a big mess.

The Pendrive Analogy in Software Development

Let’s take a simple example.

Scenario

• You and your 3 friends are building a website

• One person has the main code

• Everyone uses the same pendrive

What usually happens

1. Person A adds login feature

2. Person B changes homepage design

3. Person C fixes some bugs

4. Everyone saves files with same name

5. Someone overwrites someone else’s work

Now comes the biggest question:

👉 Which code is correct?

Nobody knows.

Folder Names Every Developer Has Used 😄

To avoid confusion, developers created folders like:

• final

• final_v2

• final_v3

• latest

• latest_final

• latest_final_do_not_touch

But instead of solving the problem, this created more confusion.

There was:

• No clear history

• No tracking

• No safety

Problems Faced Before Version Control Systems

1. Code Gets Overwritten

One small mistake and someone’s hard work is gone.

No backup.
No undo button.

2. Code Is Lost Forever

Pendrive lost ❌
Email deleted ❌
Laptop crashed ❌

All code finished. Zero recovery.

3. No History of Changes

Simple questions had no answers:

• Who changed this code?

• When did this bug come?

• Which version was working earlier?

Everything was guesswork.

4. No Way to Go Back

If today’s code has a bug:

• You can’t easily go back to yesterday’s code

• You must manually fix everything

This wasted a lot of time.

Why This Did Not Work for Teams

Pendrives and emails work only when:

• One person is working

• Project is very small

But real software teams have:

• Many developers

• Daily changes

• Deadlines

Without version control:

• Work becomes slow

• Bugs increase

• Team coordination fails

That’s why developers needed a better system.

This Is Where Version Control Came

Version control systems like Git solved these problems.

They give:

• Full history of code

• Safe teamwork

• No overwriting

• Easy rollback

• Clear record of changes

Instead of sharing full files, developers now share only changes.

Pendrive Workflow vs Version Control Workflow

Pendrive-Based Workflow ❌

• One main copy

• Manual sharing

• High risk of loss

• No history

• No tracking

Version Control Workflow ✅

• Central repository

• Everyone works separately

• Changes are recorded

• History is always safe

• Easy teamwork

Simple Real-Life Example

Think of version control like Google Docs.

• Many people can work together

• You can see who changed what

• You can go back to old versions

• Nothing is lost

Git works the same way—but for code.

Why Version Control Is Must Today

In today’s software world:

• Teams work from different places

• Code changes every day

• Apps must never break

Without version control:
👉 Modern software cannot be built.

That’s why:

• Every company uses Git

• Every developer must learn it

• Version control is compulsory

• Devices which helps us in communicating with other devices smoothly without any problem within a network.

• It include various hardware tools – Routers, Switches, Modems & Hubs etc. play a very important role in connecting various devices such as computers, servers, mobiles & other device allowing them to change information.

• Each devices perform specific task like from routing data between networks to providing access to internet.

Many people use internet daily but don’t know what is happening behind the scenes.

In reality, some hardware devices work together quietly to make everything possible.

Let’s understand this step by step, in very simple words.
Internet →Modem → Router → Switch → Your Devices (Laptop, Mobile, Office Systems)

1️⃣ What is a Modem and How It Connects Internet?

Simple Meaning

A Modem is the device that connects your house or office to the internet company (ISP).

Without modem, there is no internet at all.

What Modem Actually Does

• Takes internet signal from ISP (fiber, cable, etc.)

• Converts it into digital data your network can understand

• Brings internet inside your building

Easy Example

👉 Post Office Gate

Post office receives letters from outside cities and gives them to local area.
Same way, modem receives internet from outside world and gives it to your network.

Important Point

• Modem does not manage devices

• It only brings internet inside

2️⃣ What is a Router and What Does It Do?

Simple Meaning

A Router decides which device should get which data.

If you have mobile, laptop, TV — router manages all of them.

Router’s Work

• Gives local IP address to devices

• Knows which device asked for what

• Sends correct data to correct device

• Creates your local network

Easy Example

👉 Traffic Police

Traffic police knows:

• Which road to send which vehicle

• Prevents confusion and accidents

Router works exactly like that.

Router vs Modem (Very Important)

3️⃣ Switch vs Hub: How Devices Talk Inside Network

What is a Hub? (Old Method)

A Hub sends data to all connected devices, even if they don’t need it.

Hub Example

👉 Someone shouting in a room

Everyone hears it, even if message is not for them.

Problems with Hub

• Very slow

• Wastes data

• Not secure

What is a Switch? (Used Today)

A Switch sends data only to the required device.

Switch Example

👉 Courier delivery boy

Parcel is delivered to correct house, not to everyone.

Why Switch is Better

• Fast

• Secure

• Less data waste

• Used everywhere today

Hub vs Switch

4️⃣ What is a Firewall and Why It Is Important?

Simple Meaning

A Firewall protects your network from wrong or dangerous traffic.

What Firewall Does

• Blocks unwanted users

• Allows safe traffic

• Checks rules before allowing entry

Where Firewall Sits

• Inside router

• Or between router and servers

Easy Example

👉 Security Guard at Gate

• Checks ID

• Allows only authorised people

• Stops suspicious ones

Why Firewall is Important for Developers

• Protects backend APIs

• Stops hacking attempts

• Keeps data safe

5️⃣ What is a Load Balancer and Why Big Systems Need It?

Simple Meaning

A Load Balancer divides traffic between multiple servers.

Why It Is Needed

If only one server handles everything:

• Server will slow down or crash

Load balancer solves this.

Easy Example

👉 Toll Plaza

Cars are sent to different counters so traffic keeps moving.

What Load Balancer Does

• Shares user requests

• Improves speed

• Keeps system running even if one server fails

Used In

• Large websites

• Cloud systems

• Production backend

6️⃣ How All These Devices Work Together

When you open a website:

1. Request leaves your device

2. Goes to Switch

3. Reaches Router

4. Router sends it to Modem

5. Modem sends it to Internet

6. Response comes back

7. Firewall checks safety

8. Load balancer sends request to a server

9. Server responds

10. You see the website

All this happens in milliseconds.

Git is a version control system that developers use to manage their code. It helps you save your work, track changes, and work with others without confusion.

In very simple words:

Git keeps a record of your work so you can go back anytime if something goes wrong.

You can think of Git like a smart notebook for your code that never forgets anything.

What is Git?

Git is a tool that helps you:

• Keep track of changes in files

• Save your project history

• Work with a team easily

• Protect your code from getting lost

Git was created by Linus Torvalds, the same person who created Linux.

Why Git is called Distributed

In Git, every developer has a full copy of the project on their own computer. This means even if the internet is not working or the server is down, your code is still safe.

Why Git is Used

Git is widely used because:

✔ It tracks all changes clearly

✔ Many people can work together

✔ Old versions can be recovered

✔ New ideas can be tested safely

✔ It is free and trusted worldwide

Basic Git Terms

1. Repository (Repo)

A repository is simply your project folder that Git is watching.

There are two types:

• Local repository (on your computer)

• Remote repository (on GitHub or similar platforms)

2. Commit

A commit means saving your work in Git.

Every commit has a message so you know what was changed.

It is like pressing the save button and writing a small note.

3. Branch

A branch is a separate line of work.

Default branch is called: main

Branches are used to:

• Add new features

• Fix bugs

• Try something new without risk

4. HEAD

HEAD tells Git:

Which branch you are working on right now

.git Folder (Important Hidden Folder)

When you run:

git init

Git creates a hidden folder called:

.git

This folder is the heart of Git.

What does .git contain?

• All commits

• Branch information

• Project settings

• Complete history

⚠️ Do not delete or edit this folder manually.

If you remove .git, Git will stop tracking your project.

Simple Structure

.git

├── objects (stores commits)

├── refs (stores branches)

├── HEAD (current branch)

└── config (settings)

Git Working Areas

Working Folder → Staging Area → Repository

Common Git Commands

1. git init

This command starts Git in your project folder.

git init

After this, Git begins tracking your files.

2. git status

Shows the current state of your files.

git status

It tells you:

• Which files are new

• Which files are changed

• Which files are ready to commit

3. git add

Moves files to the staging area.

git add file.txt

Add all files together:

git add .

4. git commit

Saves your staged changes.

git commit -m "message"

Example:

git commit -m "Add login page"

5. git diff

Shows the difference between old and new code.

git diff

This helps you check what exactly changed.

6. git log

Shows all previous commits.

git log

You can see who changed what and when.

7. git revert

Used to undo a commit safely.

git revert commit_id

It creates a new commit that removes the changes.

8. git reset

Moves your project back to an old commit.

git reset --hard commit_id

⚠️ This command can delete changes permanently, so use carefully.

Simple Git Workflow

Step 1: Create a folder

mkdir project

cd project

Step 2: Start Git

git init

Step 3: Create a file

touch index.html

Step 4: Check status

git status

Step 5: Add file

git add index.html

Step 6: Save your work

git commit -m "Add homepage"

Step 7: Check history

git log

It is a machine over the internet which gives the client a response according to whatever request he has made.

• Example: When you search for Facebook on Google from your mobile or laptop, the request goes to the server and then it responds according to the request.

What is cURL?

cURL stands for Client URL. cURL is basically used when we send requests from the command line. It can be GET, POST, DELETE, or PUT.

• IT Support: It supports many protocols like HTTP, HTTPS, FTP, SMTP, TELNET, etc. It supports almost all protocols.

• It is used in the Terminal or Command Line.

• It tells us what the server responds with.

• It also helps in testing our server and API.

The First Command

To send a simple request and get a response from a server:

curl www.google.com

Saving a Response to a File

If you want to save the response into a specific file, use the -o flag:

curl -o "google" https://www.google.com

• This command creates a file named "google".

• To read the content stored in that file, use: cat google.

Checking Response Headers

To check only the header of the response (the metadata), use the -I flag:

curl -I https://www.google.com

Other Requests Methods

If you want to use specific HTTP methods to interact with data, you can use the following commands:

Additional Commands

• To check the header of the response: curl -I https://www.google.com

• Help Menu: curl --help This is its own help menu that tells us some commands we can use with cURL.

Understanding the Response Status

The server returns a status code to tell you the result of your request:

• 200: Everything is OK.

• 201: Data is created.

• 400: Bad request.

• 401 / 403: Not allowed (Permission/Auth issues).

• 404: Not found (Wrong URL).

• 500: Server problem.

• Example: academy.networkchuck.com → IP Address: 142.250.190.46

The DNS Resolution Process

1. Browser Cache: The browser checks its own stub resolver (cache) to see if you have previously visited the site.

2. Recursive Resolver: If not in the browser cache, it queries the Recursive DNS Server (e.g., Google DNS 8.8.8.8). This server also checks its own cache first.

3. Root Servers: If the recursive server doesn't have the answer, it goes to the Root Servers.

   • There are 13 Root Servers (with 1,865+ instances worldwide).

   • Root servers only know about Top Level Domains (TLD) like .com, .net, .co, etc.

4. TLD Nameservers: The Root server directs the query to the TLD server responsible for the specific extension (e.g., the .com server).

5. Authoritative DNS: The TLD server provides the address for the Authoritative DNS (e.g., Hostinger, Cloudflare). These are responsible for the Second Level Domain (the actual website name).

6. Final Response: The Authoritative DNS provides the final IP Address. This info travels back through the Recursive server to the Browser.

   Common DNS Records

   | Record Type | Description | | --- | --- | | A Record | Maps Domain names to IPv4 Addresses. | | AAAA Record | Maps Domain names to IPv6 Addresses. | | NS Record | Tells which Authoritative DNS server is responsible for your second-level domain. | | MX Record | Mail Exchanger: Defines which mail server handles email for the domain. | | PTR Record | Reverse DNS: Maps an IP address back to a domain name (used for security). | | CNAME | Canonical Name: Points one domain name to another "real" or "target" domain name. | | TXT Record | Stores plain text. Used for domain ownership verification (e.g., Google Workspace, Microsoft 365). |

   Additional Benefits of Txt Records:
   Email Security Records

   • SPF (Sender Policy Framework): Specifies which mail servers are authorized to send email on behalf of your domain.

   • DKIM (DomainKeys Identified Mail): Adds a digital signature to emails to ensure they haven't been tampered with and are safe.

   • DMARC: Tells the receiving server what to do with an email if the SPF and DKIM checks fail (e.g., reject it or put it in spam).