When you search a website, you get a page that has some styling design and buttons, but before styling and functionality, there is something else, yes, you are thinking correctly, it’s the structure.
Every design needs a structure before any colouring, and every website needs a structure before it can be functional.

Now you might be thinking, who provides this structure? If you’re thinking, let’s begin this blog.

A website is composed of three primary elements: HTML, CSS, and JavaScript.
Think of it like:-

🧱 HTML = Skeleton of a webpage
🎨 CSS = Skin & clothes
🧠 JavaScript = Brain & logic

Let’s understand HTML and its need.

What is HTML and Why Do We Use It?

HTML stands for Hyper Text Markup Language. Before understanding HTML, we need to understand the problem with normal text.
Before websites, computers used to store and share text files, reports and documents. But the problem is, it is simply plain text; there is no structure in those files, so it is very difficult to understand the actual meaning of the text because paragraphs, new lines, bold and highlighting everything have a meaning that the reader can understand. To solve this problem, world wide web (www) created a language known as HTML.

Its name is Hypertext Markup Language. The hypertext solves the problem of linking between the 2 documents or files by using hyper links we can connect two files or document that is why its name is Hypertext.
Markup means marking content with meaning because each tag has its own semantic meaning that how using that tag in HTML markup affects the content.
It is a language because it provides a structure which computer can understand, which is why it is known as a language
So HTML literally means:

A language to mark text so it can be linked and structured

What is an HTML tag?

Before understanding what an HTML tag is, we need to understand why we need it.
The need of html tag is that even though we have HTML, it is just simple text, so the problem is how browsers know which one is a tag and which one is text. To solve this problem www create a symbol known as a tag.

Now, an HTML tag is a special keyword written inside angle brackets < > that tells the browser what a piece of content is.

An HTML tag’s structure is:-

<tagname>

Tags are of two types:-

a) Opening tag:-

It helps the browser to understand where a particular tag starts.

It is written like <tagname>

b) Closing tag:-

It helps the browser to understand where a particular tag ends.

It is written like </tagname>

Between these two tags, we have content:-

<h1>This is a heading</h1>

content- This is a heading

What an HTML element means

When all the 3 component, the opening tag, the content, and the closing tag, get together and make a structure, it is known as an HTML element. It is called an element because it is the basic building block of a website.

Tag vs Element (Very Important)

Tag:

<p>

Element:

<p>Hello</p>

Rule:

A tag is just a label
An element is a complete structure

Element as a Box Concept

Think of an element like a box:

-----------------------
| Opening tag         |
| Content             |
| Closing tag         |
-----------------------

Everything inside this box is one unit.

Self-closing (void) elements

Not all the element have closing tag. Some of the elements don’t need any closing tag because they don’t wrap any content.
The elements which are complete by themself known as self-closing elements or void elements.

Simple Definition:

A self-closing (void) element is an HTML element that does not need a closing tag because it has no content inside it.

Ex:-

<img src="photo.jpg">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

Old Style vs Modern Style

Old XHTML style:

<img src="image.png" />

Modern HTML5 style:

<img src="image.png">

Both work, but HTML5 does not require /.

Block-level vs inline elements

Commonly used HTML tags

HTML has many tags, but you don’t need to learn everything at once.
As a beginner, you should focus on the core tags that are used in almost every website.

These tags build structure, content, and basic interaction.

🧱 Structure & Layout Tags

<html>     → Root of the page
<head>     → Page info (title, meta, links)
<body>     → Visible content
<div>      → Container / layout block
<section>  → Page section
<header>   → Top section
<footer>   → Bottom section

📝 Text Content Tags

<h1> to <h6> → Headings
<p>         → Paragraph
<span>      → Inline text container
<br>        → Line break
<hr>        → Divider line

🔗 Link & Media Tags

<a>     → Link
<img>   → Image

Example:

<a href="#">Click me</a>
<img src="photo.jpg">

🧾 Form & Input Tags

<form>     → Form container
<input>    → Input field
<textarea> → Text input area
<button>   → Button
<label>    → Input label

🧩 List Tags

<ul> → Unordered list
<ol> → Ordered list
<li> → List item

Example:

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

🧠 Metadata & System Tags

<title> → Page title
<meta>  → Page info
<link>  → External file link

These are the all you need to learn.

Don’t forget to follow me .
Let’s meet in another blog with another web-dev topic.
Let’s Explore WebDev.

🌐 What Happens When You Type a Website Name in a Browser?

When you type a website name in your browser, something interesting happens behind the scenes.

To open a website, the browser needs data.
Sometimes this data is already available in the cache, so the site loads instantly.
But other times, the browser must request the data from a server.

The problem is — the browser doesn’t know where the server is or which server to talk to.
There are billions of servers on the internet, and the browser has no direct way to identify the correct one.

And there’s an even bigger problem:
Humans are good at remembering names, not numbers.

Servers are identified using IP addresses (numbers), which can be difficult to remember.
That’s why every server IP is mapped to a domain name, so instead of remembering numbers, we only remember names.

To find the correct IP address for a domain name, the browser relies on DNS.

📖 What is DNS?

DNS (Domain Name System) maps a domain name to an IP address, allowing the browser to locate the correct server.

Simply put:

DNS is the phonebook of the Internet.

Want to know more about it? Try this →

DNS RECORDS AND THEIR NEED

DNS record - It is made up of two words, DNS and record. We understand that we are talking about the record. So, what is a record?

A record = one unit of data that stores specific information.

A DNS record is a piece of information stored in DNS that tells the Internet how to handle a domain name.

It tells things like:

• Where the website server is

• Where emails should go

• Who manages the domain?

• Which domain points to which name

If there is no record, who will answer these questions?
This is the reason we need a DNS record.

TYPES OF DNS RECORD

NS Record

NS stands for Name Server.
An NS record tells the Internet :

Who is responsible for managing the DNS records of a domain?

For example:

NS always points to the authoritative server, not an alias. That is why an NS record can never point to a CNAME record.

A Record

A stands for Address.
An A record maps a domain name to the IPv4 address. You might be thinking what is IPv4?
You’re like, we already know what the IP address is. But What is IPv4?

Simple IPv4 is Internet Protocol version 4, this version use 32 bit protocol that assign IP address to your device. But if a website has an IPv6 address, it will instead use an “AAAA“ record.

A record = domain → server IP

To get the IP address in IPv4 format, we use an A record.

EX:-

example.com A 192.168.1.1

AAAA Record

AAAA stands for Address(IPv6).
An AAAA record maps a domain name to an IPv6 address. Now your question is, what is IPv6?

IPv6 - Internet Protocol version 6, this version use 128 bit protocol that assign IP address to your device.

Ex:-

example.com AAAA 2001:db8:85a3::8a2e:370:7334

CNAME Record

CNAME stands for Canonical Name.

A CNAME record maps one domain name to another domain name.

In simple words:

CNAME = name → name (alias system)

Ex:-

www.example.com CNAME example.com

A CNAME record cannot exist with other records on the same name
(No A, MX, NS, TXT on the same domain label). What does that mean?

Ex:-

example.com CNAME site.com

example.com A 192.168.1.1

This is wrong because the same domain is used for an alias and for a real identity.
So a valid DNS setup is:-

Pure-alias:-

blog.example.com CNAME example.com

or Real Identity:-

example.com A 192.168.1.1

example.com MX mail.example.com

That means a domain name can be either:

• a real identity (A, MX, TXT, NS...)

• or an alias (CNAME)

It cannot be both.

MX Record

MX stands for Mail Exchange.

An MX record tells the internet:

Where emails for a domain should be delivered.

In simple words:

MX record = domain → mail server

Ex:-

MX records use priority values to decide:

Which mail server should be used first, and
Which server should act as backup?

TXT Record

TXT stands for Text.

A TXT record stores extra text-based information about a domain.

In simple words:

TXT record = extra instructions + verification info

Ex:-

TXT records are used for:

• Domain ownership verification

• Google Search Console

• SSL verification

• Email security (SPF, DKIM, DMARC)

• Service authentication

🧩How all DNS records work together for one website

A website never uses a single DNS record; it uses multiple DNS records. Each record solve there problem solves a different problem.
Let’s take one domain as an example:
mywebsite.com

NS    → ns1.cloudflare.com
A     → mywebsite.com → 34.120.10.5
AAAA  → mywebsite.com → IPv6 address
CNAME → www.mywebsite.com → mywebsite.com
MX    → mail.mywebsite.com (priority system)
TXT   → verification + email security

When a user searches mywebsite.com, the DNS lookup process begins.

First, DNS uses the NS record to find the root server responsible for the .com domain.
This tells the system which DNS server manages the domain.

Then, to locate the actual server:

• The browser uses the A record to get the IPv4 address of the server that stores the data of mywebsite.com.

• If the network uses IPv6, the browser uses the AAAA record to get the IPv6 address.

Now, users may type:

• mywebsite.com

• www.mywebsite.com

Both point to the same website because of the CNAME record, which maps:

www.mywebsite.com → mywebsite.com

So both names load the same server.

If someone sends an email to the domain:

user@mywebsite.com

The MX record decides:

Where the email should go
Which mail server should receive it
How mail routing happens

For domain verification, service authentication, and email security, the website uses TXT records.

You searched Google.com many time but have u ever thought about how your device knows which server stores the data of Google.com? There are multiple servers; how does the device know which one he need to talk to?

Each server have there own IP address. If someone wants to talk to that server he need that IP address. Imagine trying to call someone without knowing their phone number — impossible. You know the name, but the network understands only numbers.

📒 DNS = The Internet’s Phonebook

DNS stands for Domain Name System. DNS maps a domain name to the IP address of servers. It is similar to a phonebook, which is why DNS is also called the Internet’s Phonebook.

The process of converting a human-readable name into a machine-readable address is known as name resolution.

google.com  →  142.250.190.14

❓Why does name resolution exist?

To answer this, imagine there is no DNS. Then, how would you access a website?
Typing in the browser http://142.250.190.14/.
Suppose you remember the IP of Google, what about Gmail, Youtube or Hashnode?

There are billions of websites. Are u able to remember all? Forget about all. Are you able to remember 10? No, right.

But are u able to remember 10 names?
Of course u are able because the human brain is good with remembering names instead of number that is why we want someone who checks into the phone book, we say the name, and the person checks in the phone book and provides the IP of the server.

What is the dig command, and when is it used?

dig stands for Domain Information Groper. Wait, Groper?. Great catch 😄 — the word “groper” sounds weird until you know the history.
In dig,
Groper means:

to search, explore, or probe deeply to find hidden information

It is a DNS debugging and inspection tool used to query DNS servers directly and see how name resolution actually works.

dig [@server] [domain] [query-type] [options]

• @server: This is optional. Use it to specify the DNS server you want to query. If omitted, DIG uses the default server.

• domain: This is the domain name you are querying about.

• query-type: This specifies the type of DNS record you want to query (e.g., A, MX, NS). If not specified, DIG defaults to querying A records.

• options: DIG offers various options to format or filter query results. Here are some common options used with dig:

  • +short: Gives a shorter, more concise output.

  • +trace: Traces the path of the query across the DNS namespace.

  • +noall +answer: Shows only the answer section of the query.

dig is used when you need to manually query DNS servers to inspect, debug, analyse, or understand DNS resolution and DNS records.

In short**, when you want to ask something from DNS, use the dig command.**

Understanding dig . NS and root name servers

To understand the dig . NS, you need to understand the DNS hierarchy first.
When you search a domain, DNS need to start searching from somewhere, and that somewhere is the.

. means the root of the internet’s DNS system.

So when DNS resolve the domain, it must start from. root zone. Even when we search Google.com, it is actually Google.com. The last dot represents the root zone, from where resolution starts.

google.com. 

.        ← Root (top)
|
.com
|
google
|
www

. is a logical concept, but its actual implementation is the root name servers.

A root name server is a name server for the root zone of the Domain Name System (DNS) of the Internet. It directly answers requests for records in the root zone and answers other requests by returning a list of the authoritative name servers for the appropriate top-level domain (TLD).

Now, NS is the name server that answers one question.

“Who should I ask about this domain?”

There are 13 logical root servers, and their implemented copies are 1600+ around the world.

okay we know what NS do but what is NS?

An NS record tells which DNS servers are responsible for a domain.

Wait, what is a DNS record?

A DNS record is a stored rule that tells DNS what to do with a domain name.

dig . NS

dig . NS +short +short

+short tells dig to show only the final answer, and hide all protocol/debug information.

dig . NS +short

Understanding dig com NS and TLD name servers.

When we get the root server and start the DNS resolution process, we now need TLD servers.
Wait, what is TLD?

A TLD is the last part of a domain name, and it represents the top category in the DNS hierarchy.

Each domain has a category; to represent that category, we need a TLD server. There are multiple categories based on which TLDs have different types:-

TLD stands for Top Level Domain.
By doing a dig . NS, we get to know from where the DNS resolution start and there are 13 root servers on which the DNS resolution starts. From the global root zone to the TLD server, we need to do a dig com NS. This command tells about the TLD server that handles the .com category.

dig @8.8.8.8 com NS +short

We need a public DNS because sometimes the local DNS is unable to resolve the domain.

Understanding dig google.com NS and authoritative name servers

The TLD server gives the IP address of the authoritative servers and say “Ask him, he knows where the google.com IP is."

Now we are at the third layer of the DNS hierarchy learning — after:

• dig . NS → Root layer

• dig com NS → TLD layer

Now we reach the domain ownership layer:
👉 Authoritative Name Servers

dig @8.8.8.8 google.com NS +short

These are the authoritative servers that actually store the DNS record of google.com.

Understanding dig google.com and the full DNS resolution flow

This is the final step where we get the actual IP address of Google.com. In this last step, we convert the domain into an IP.

You are asking DNS:

“Give me the IP address of google.com”

dig google.com +short

Conclusion

To provide a better understanding of the flow of the DNS resolution process, we have some steps to follow to get the IP address.

Introduction: From the Internet to Your Screen

You have heard about the word internet, but have you ever thought about how it reaches to your application?

When you open an app or website on your device, what do you think actually happens? The message or video data needs to be shared so that it travels from different devices and then arrives at your device.

Today, we learn in this blog how the internet reaches your devices. To understand the internet, you first need to know about the concept of a network.

🌐What is a network?

A network is made up of three things that is:-

 computer + wire/wireless connection + rules = Network

However, as engineers, we give these rules fancy names, known as protocols.

This protocol is needed for computers to communicate without any conflict, so that these computer devices know when, how, or where to send data.

🌍 Then What Is the Internet?

Now comes the interesting part. The internet is not a single network.

It is a group of networks that communicate through a common protocol.

To make such a massive network possible, a large amount of optical fibre cables is placed deep down in oceans so that data can be transferred all over the world and the network can be stabilised.

But the question is not what the internet the question is still how it reaches to your device?

How the Internet reaches to your device

When you type a website URL or open an app, the data does not come directly from the internet to your device. Instead, it travels through multiple layers of infrastructure before finally reaching your home.

Let’s understand with each step:-

1️⃣ Global Internet Backbone

First of all, the Internet is not a wireless technology; there is a large number of wires established inside the deep ocean which transfer data between countries, continent and large data centres.
But wait, why do we need data from another continent?

The answer is simple: the transfer of data is between two computers. The one who request for the data we call it as client, and the other one who serves the data is known as the server.

Now these servers can be anywhere in the world, which is why we need to connect the world by wire. But wait, what type of wires is it? Is it copper wire?

No, because the wires are underwater, we need a strong, durable, and fast data transfer cable for this purpose. For this, a special type of cable is used, known as a Fibre-Optic cable.

You don’t need to go into depth of Fibre-optic cable, just for knowledge, you should know that the speed of cable is terabit/sec for data transfer.

So till now you get the data from a different country to your country, but how does it reach your device? For this, we need to go for second step

2️⃣ Internet Service Providers (ISP)

Your device is not directly connected to the global backbone cables. Instead of this, it is connected to the ISP. But you might think, what is the ISP?

ISP full form is Internet Service Providers, as the name suggest It provide the internet services ISP take the bandwidth from the backbone and then provide internet services to local or regional networks.

But you might be thinking, why do I need an ISP? Why don’t I connect my device to the backbone?

The answer is simple these backbone infrastructure is costly, and to make such costly infrastructure for each device is not worth it, so that is why we need an ISP. Also, if we connect each device to the backbone, the infrastructure will be complex.

Now, you might be thinking, who are those ISPs, and how do they transfer data?

You already know the ISP names. In India, there are many famous names, such as Airtel, Jio, VI etc. Now, you know who the ISPs but one question left is how they transfer data?

🌐 How an ISP Distributes the Internet (Working of an ISP)

ISP act as a large-scale network distributor. Its have one job that to take massive internet bandwidth from the backbone and then distribute it to the home and offices.

1️⃣ Internet Backbone → ISP Core Network

When the internet travels through the cables and reaches to the ISP core network, it terminates at the ISP core routers. These routers handle high throughput, Inter-ISP routing (BGP) and security.
Wait, what is BGP?

BGP stands for Border Gateway Protocol. It is responsible for deciding the best route for your data transmission. Do you want to know more? Refer to this page, BGP.

2️⃣ ISP Core Routers – The Central Brain 🧠

ISP core routers transfer data from the internet backbone to your home by deciding the best possible path. But you don’t need to learn more about it, just think more like a traffic police officer.

This core router is connected via fibre to regional routers, data centre routers and peer routers.

3️⃣ Regional Distribution Network – Splitting by City

Now the internet is transmitted to the regional router and then distributed to the Area/aggregation router. It is similar to the state warehouse sending goods to the local area warehouse.

These regional splits traffic by state, city, and zones. It reduces the workload and is easy to manage in high-traffic situations.

4️⃣ Area / Aggregation Router: Neighbourhood Level

These routers connect Street cabinets, Fibre splitters, and Building-level switches. As the name suggest this is used for aggregation purpose multiple cables and lines get aggregated here and transmitted to the home through a fibre splitter.

3️⃣ The Last-Mile Connection

This is the final step of getting internet. It is directly connected to the device. In this step, The Fibre splitter cables get connected to the modem, which further transmits to the router.

But wait, you might be thinking, what is a modem, and why do we need that?

Before we go further, first we should understand the definition of a modem and a use case.

🔌 Modem – The Translator

I can give the detailed definition of a modem, but actually, we don’t need it. But for the knowledge purpose

A modem, which is made by two words, Modulator-Demodulator. These words are self-explanatory, but still I will explain it in simple term modem is a device that converts digital signals to analog signal and vice versa, because computers understand digital signal but our electrical signal is analog that is why we need a modem.

Now let’s get back to the fibre cable, but wait, data is transmitted to the router. Yeah, so the router distributed the data to the device that requested it.

Now we are using the word router, but we never discuss about that. Let’s discuss about it.

📡 Router – The Traffic Police

A router is a device that works as a traffic police; it is responsible for the security and the path that the data will travel. It is used everywhere, but the core difference is its capacity to transmit.

And now this router transmits your data to your devices, and that is how the internet reaches to your devices.

🌐 Devices Used in Internet Transmission

I already explained two devices to you, one is a modem, and the other is a router. Both have different name different uses, but still people get confused. To remove such confusion, I explained each device that is used to transfer the internet.

Modem

A modem is a device used to convert an ISP’s electrical signals to a digital signal so that devices understand the signals.

It works like a translator between the ISP and the router. Do you want more detail check this out
What is a modem?

Router

A router is a device that decides where your data should go, as its name suggest it is for deciding the best routes for the data packets. It creates your local network, assigns private IP addresses, routes packets to the correct devices and sperate private network from the public Internet.

A router works like a traffic police officer who reads vehicle number plates, checks the destination, sends vehicles onto the correct road, and ensures returning vehicles reach the right house. Want to know more about the router? Introduction to the router.

Switch V/S Hub

In the starting everything started when we wanted to transfer data from one computer to another. For this, we created a network, but to create a local network for a very small range, known as a LAN (Local Area Network), we introduced a hub.

A hub is a device that is responsible for transferring data from one device to another. It is working on the wire, and it receives data on one port and broadcasts it to all. Every device receives the data, only the intended device accepts it, and others discard it.

It works like a loudspeaker in the office; everyone hears the message, even if it’s not for them.

Hub is good, but the problem is unnecessary data transmission, due to this, several issues are created, like network collision, wasted bandwidth, security risk, and it is very slow.

To overcome these problem we have a better version of hubs known as switches.

A switch is a device that transfers data to one who requested it. Unlike a hub, it doesn’t transfer data to all the devices, which solves the problem of security, wasted bandwidth and network collision.

The switch device learns which device is connected to which port, and by looking at that port address, it transfers data to the intended one.

Firewall

A firewall is a device that provides security to the network. It allows the traffic that has access to enter or leave a network. Think of it like a security guard of the office who has the id they can enter in the office; others will not.

A firewall has multiple functions:-

Traffic filtering:- It allows safe Traffic and blocks the unsafe ones based on the rules IP, Port, Protocol and direction.

Access Control:- It decides who can access what, from where and by which protocols.

Threat Prevention:- It blocks suspicious traffic, detects scanning attempts, and prevents unauthorised access.

Load Balancer

Load balancers are the devices used to manage the traffic of requests so that no single server gets overloaded and crashes. Suppose what would happen if all the cars were to use a single road? There would be a situation of jam. To avoid this problem, we use multiple lanes, and these lanes are another server in our case.

This device makes sure that all the servers get equal traffic, no single server gets overloaded and crashes. The core functionality of the load balancers is the distribution of traffic equally to all the servers. It provides high availability and scalability. But wait, how does it do that?

Due to the multiple servers, even if one server fails load balancer switches the traffic to other servers, hence its availability is nearly 99.99%. On the other hand, if there is a large no of users requesting to serve the traffic is automatically transmitted to other server so that is how it provides scalability.

The working of a load balancer is simple: it will take the request, find the best server and give the request to that server.

📮 The Internet as a Post Office System

Global internet backbone takes it as a ✈️ International air mail routes connecting countries. Now the mail is at our airport, and it is handled by ISP, which you can think of as the national post office system. Then the ISP transfers mail to the Local ISP Network (City post office). This office collects your mail and transfers it to the local postal branches. Now the Fiber splitter cables transfer your mail as a postman. Now, because it is the International mail we need to translate it that translator is our modem and after translation it sent to the house but because the house is big several floors is where router the owner of the house will send the mail to correct floor now each floor have different rooms so each floor is manage by a gurdian that gardian knows all the family member so they give it to the right person. The gurdian is our switch, and the person is the device, and the mail is the data. Here you can see I call the guardian not a warden because if it is a warden, he will announce the letter and everyone in the house can hear it. There is a person who checks the letter’s purpose, whether it is dangerous or not, that is our firewall.

Most developers learn Git by memorising commands. But Git becomes truly powerful when you understand how it works internally.
In this article, we will open Git’s black box and understand the real role of the .git folder, how Git stores data, and how it tracks changes.

This blog focuses on building a mental model of Git, not just learning commands.

What Is Git, Internally?

At its core, Git is not a tool that tracks files.
Git is a content-addressable database that stores snapshots of your project.

Instead of asking:

• “What line changed?”

• “What was deleted?”

Git asks:

• “What does the project look like now?”

Each snapshot is stored permanently and identified using a cryptographic hash.

Why the .git Folder Exists

When you run:

git init

Git creates a hidden folder named .git.

This folder is the repository.

Your project files are just a working copy.
The entire history, branches, commits, and metadata live inside .git.

If you delete the .git folder:

• Git history is gone

• branches disappear

• commits no longer exist

The .git folder exists so Git can:

• store history

• track versions

• ensure data integrity

Structure of the .git Directory

Important parts of the .git folder:

• objects/
  Stores all Git data (files, folders, commits)

• refs/
  Stores pointers to branches and tags

• HEAD
  Points to the current branch

• index
  Represents the staging area

• config
  Repository-specific configuration

The most important directory is objects/.
Everything Git knows is stored there.

Git Objects: Blob, Tree, Commit

Git stores data using objects. There are only a few types, and three are essential.

Blob (File Content)

A blob stores:

• file content only

• no filename

• no folder structure

If two files have the same content, Git stores only one blob.

Tree (Directory Structure)

A tree represents a directory.

It stores:

• filenames

• references to blobs

• references to other trees

Trees connect blobs into a folder hierarchy.

Commit (Snapshot)

A commit stores:

• a reference to one tree

• author information

• timestamp

• commit message

• parent commit reference

A commit does not store files directly.

Commit → Tree → Blob

How Git Tracks Changes

Git does not store differences between files.

Instead, Git stores:

• complete snapshots

• reused objects for unchanged content

If a file does not change:

• Git reuses the same blob

• no extra storage is used

This design makes Git fast, efficient, and reliable.

What Happens During git add

When you run git add:

1. Git reads the file from the working directory

2. Creates a blob object from its content

3. Stores it in .git/objects

4. Updates the index (staging area)

Important point:
git add does not create a commit.
It prepares the snapshot.

What Happens During git commit

When you run git commit:

1. Git reads the staging area

2. Creates a tree object

3. Creates a commit object

4. Updates the current branch reference

5. Moves HEAD forward

Now the snapshot is permanent.

How Git Uses Hashes for Integrity

Every Git object is identified using a SHA-1 hash.

The hash depends on:

• object type

• object size

• object content

If anything changes:

• the hash changes

• integrity is broken

This makes Git:

• tamper-proof

• reliable

• secure by design

Git trusts content, not filenames.

The Mental Model You Should Remember

Think of Git as:

Working Directory → Staging Area → Repository

Internally:

Commit
→ Tree
→ Blobs

Once this clicks, concepts like:

• branching

• merging

• rebasing

• detached HEAD

start making sense naturally.

Final Thoughts

Git is not magic.
It is a carefully designed system built on:

• immutable objects

• snapshots

• cryptographic hashes

The .git folder is the heart of Git.
Understanding it transforms Git from something you use into something you understand.

In earlier days, technology was not as advanced as it is today, and developers often struggled to work together on the same codebase. Collaborating on a single file was difficult, and managing changes manually consumed a lot of time.

To solve these problems, distributed version control systems were introduced. They help track every change made to the code and allow multiple developers to work on the same project without worrying about breaking the final version.

The Pendrive Analogy in Software Development

Before modern collaboration tools existed, developers often shared code using pendrives, emails, or zipped folders. This approach worked for very small projects but quickly became problematic as collaboration increased.

Imagine you are working on a product and need help implementing an AI feature or backend logic. Since you are not an expert in that domain, you zip your entire codebase and share it with another developer using a pendrive or email. The other developer makes changes, fixes some issues, and sends the updated code back to you.

When you open the received code, you notice that the project works, but you have no idea what changes were made. You then continue developing new features on your local copy. Later, the other developer discovers a bug in the earlier version of the code and fixes it on their system. However, your codebase has already moved forward, and now both versions are different.

At this point, both developers are forced to wait for each other. There is no clear way to track changes, no single source of truth, and no guarantee which version is the final one. This situation often leads to folders named final, final_v2, latest_final, or final_really_latest, creating confusion instead of clarity.

This entire situation is commonly referred to as the pendrive problem. It highlights the challenges of manual code sharing, where changes are lost, bugs are reintroduced, and collaboration becomes slow and unreliable. These problems led to the creation of distributed version control systems, which track every change and allow multiple developers to work on the same codebase simultaneously without waiting for each other.

Problems Faced Before Version Control Systems

Before version control systems existed, developers faced several challenges while working on shared codebases:

• Unable to track changes: Developers had no clear way to know what changes were made, when they were made, or who made them.

• No simultaneous development: Only one person could work on the code at a time, forcing others to wait and slowing down progress.

• No single source of truth: There was no main or authoritative copy of the codebase, leading to confusion about which version was correct.

• High inconsistency in code: Manual copying and merging of files often introduced bugs and unstable behaviour.

• Overwriting of code: Changes made by one developer could easily overwrite another developer’s work.

• No change history: If a bug was introduced, there was no way to go back to a previous stable version.

• Difficult bug tracking: Identifying when and where a bug was introduced was extremely hard.

• Poor collaboration: Team coordination depended on manual communication instead of tools.

• High risk of data loss: If a pen drive, email, or local system failed, the code could be lost permanently.

Why Version Control Became Mandatory in Modern Development

As software projects became more complex, multiple team members were required to work on the same codebase. Managing changes manually was no longer practical, especially when everyone was contributing simultaneously.

To ensure smooth collaboration, developers needed a way to track changes, avoid conflicts, and maintain a single source of truth. This is why tools like Git became essential, as they keep a complete history of all changes. Platforms like GitHub further simplified collaboration by providing a central place where developers can share code and work together efficiently.

Conclusion

In the end, version control systems solve the core problems of tracking changes and enabling collaboration on a shared codebase. They allow multiple developers to work on the same project simultaneously while maintaining a complete and reliable history of changes. In today’s world, where software projects are large, complex, and built by many teams, version control has become a mandatory part of modern software development.

When we start our journey in web development, we often believe that we can build an entire product on our own. However, as we gain experience, we realise that building real-world applications requires knowledge from multiple domains such as backend, AI, cybersecurity, and more.

To solve complex problems, we often take help from other developers and share our code with them. However, sharing code manually can quickly become a mess.

Imagine sharing code using a pendrive. One person fixes a bug, another adds new features, and soon no one knows what exactly changed, where the bug was fixed, or which version of the code is the correct one. Collaboration becomes slow, confusing, and risky.

This is where a distributed version control system comes into play. It helps track every change made by every developer and allows multiple people to work on the same project safely. Git is such a system, and GitHub is a platform that helps host and manage Git repositories.

What is Git?

Git is a distributed version control system that helps track every change made to a codebase and allows multiple developers to work on the same project safely.

Why Git is Used

Git is used because it solves two major problems:

• It tracks every change made to a codebase, preventing the project from becoming messy or inconsistent.

• It allows multiple developers to work on the same project simultaneously without overwriting each other’s work.

Git Basics and Core Terminologies

Before understanding Git, we need to learn some basic and core terminologies.

Repository

A repository is a folder that contains your project’s code and its complete change history. Git tracks all files inside this folder.

Commit

A commit is a snapshot of the project that saves all the changes added to the staging area into the repository.

Branch

A branch is a separate line of development that allows developers to work on changes independently without affecting the main codebase.

Head

HEAD is a pointer that refers to the current commit in the repository. It tells Git where you are currently working in the project’s history.

Git Workflow (Working Directory → Staging Area → Repository)

The Git workflow consists of three main stages:

• Working Directory: This is the directory where you create, edit, and modify files.

• Staging Area: This is an intermediate area where you select and prepare changes before committing them.

• Repository: This is where Git permanently stores committed changes along with the complete history of the project.

  

Common Git Commands

git init

This command initializes a new Git repository inside the current working directory.

git init

git status

This command shows the current status of the working directory, including which files are tracked, untracked, or staged by Git.

git status

git add

This command adds new or modified files from the working directory to the staging area, preparing them for a commit.

• git add .
  This stages all new and modified files in the current directory and its subdirectories.

    git add .
  

• git add
  This stages only a specific file, giving more control over what changes are included in the commit.

    git add index.html
  

git commit

This command saves the changes that are already added to the staging area into the repository as a new commit.

git commit -m "Commit message"

git log

This command displays the commit history of the repository, showing details such as commit messages, authors, and timestamps.

git log

Basic Developer Workflow Using Git

A basic Git workflow for a beginner looks like this:

1. Create a new project folder and start working on your files in the working directory.

2. Initialize Git inside the project using git init.

3. Create new files or modify existing files in the project.

4. Add the changes to the staging area using git add ..

5. Save the staged changes into the repository using git commit -m "Commit message".

6. Repeat the process whenever you make new changes.

   

   Conclusion

   Git is an essential tool for every developer as it helps manage code changes and enables smooth collaboration between multiple developers. Learning Git from the beginning builds good development habits and prevents common mistakes while working on real-world projects. Beginners should practice Git regularly on small projects to gain confidence and improve their workflow.