What is a Server and Where Does the Database Live?

Most beginners think the database is somewhere floating in the "cloud." It is not.

A database is software running on a server. A server is just a powerful computer that runs 24/7 inside a data center — like Amazon AWS, Google Cloud, or DigitalOcean. When that software saves your data, it writes it to actual files on the server's SSD or hard drive.

MySQL and PostgreSQL save data as .ibd files or WAL (Write-Ahead Log) files. MongoDB saves as .bson files. These files sit on disk just like any file on your laptop.

When you write this in your backend code:

const pool = new Pool({ host: 'localhost', port: 5432 })

You are telling your backend to open a connection to the port where the database is listening. That is it. It is a TCP connection — like a phone call between your application and the database.

Why Docker for PostgreSQL?

Instead of installing PostgreSQL directly on my system, I used Docker. Docker creates an isolated environment (called a container) so I do not mess up my laptop's setup.

Here is the command I used to create a PostgreSQL container with persistent data:

Mac / Linux / WSL:

docker run -d --name sql_class \
  -e POSTGRES_PASSWORD=postgres \
  -e POSTGRES_DB=sql_class_01_db \
  -p 5433:5432 \
  -v "$(pwd)/pgdata:/var/lib/postgresql/data" \
  postgres

Windows (PowerShell):

docker run -d --name sql_class -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=sql_class_01_db -p 5433:5432 -v "${PWD}/pgdata:/var/lib/postgresql/data" postgres

The -v flag maps a pgdata folder inside your current directory to the container's storage. So even if the container is deleted, your data stays on your laptop.

To check if the container is running:

docker ps

To remove the container:

docker rm -f sql_class

Why Learn Raw SQL When We Have Prisma and Drizzle?

This was my first question. Why learn raw SQL when Prisma can generate the queries for me?

Here is what I found out:

ORMs like Prisma and Drizzle translate your JavaScript/TypeScript code into SQL strings and send them to the database. If you do not know SQL, you do not know what Prisma is actually doing behind the scene.

The N+1 problem is a real thing. ORMs sometimes generate 100 queries instead of 1 optimized query. You will only catch this if you understand SQL.

For complex queries — joining 6 tables, generating financial reports — ORM syntax breaks down. Developers fall back to raw SQL.

And SQL has not changed in 50 years. Sequelize came and went. Prisma came. Drizzle came. SQL is still the same.

DDL — How You Create Tables

DDL stands for Data Definition Language. These are the commands that define the structure of your database — not the data, just the structure.

The four main DDL commands are CREATE, ALTER, DROP, and TRUNCATE.

Here is a real table I created while practicing:

CREATE TABLE students (
    student_id SERIAL PRIMARY KEY,
    first_name VARCHAR(50) NOT NULL,
    last_name VARCHAR(50),
    email VARCHAR(100) UNIQUE NOT NULL,
    phone_number CHAR(10) UNIQUE,
    age INT CHECK (age > 12),
    current_status VARCHAR(20) DEFAULT 'active'
        CHECK (current_status IN ('active', 'graduated', 'dropped_out', 'on_leave')),
    has_joined_masterji BOOLEAN DEFAULT FALSE,
    current_score NUMERIC(5, 2) CHECK (current_score >= 0 AND current_score <= 100),
    enrollment_date DATE DEFAULT CURRENT_DATE
);

SERIAL means auto-incrementing integer — PostgreSQL handles the ID for you. NOT NULL means the column cannot be empty. UNIQUE means no two rows can have the same value. CHECK is a custom condition — here age must be greater than 12. DEFAULT sets a value automatically if nothing is provided.

To add a new column to an existing table later:

ALTER TABLE students ADD COLUMN batch_name VARCHAR(50) DEFAULT 'Web Dev 2026';

SELECT Queries — Reading Your Data

SELECT is the command to read data from a table.

-- Get everything
SELECT * FROM ipl_players;

-- Get specific columns
SELECT name, team, auction_price_crores FROM ipl_players;

Filtering with WHERE:

-- Basic condition
SELECT * FROM ipl_players WHERE team = 'Mumbai Indians';

-- Multiple conditions
SELECT * FROM ipl_players WHERE role = 'All-Rounder' AND wickets_taken > 10;

-- Either condition
SELECT * FROM ipl_players WHERE team = 'CSK' OR team = 'RCB';

-- Range
SELECT * FROM ipl_players WHERE auction_price_crores BETWEEN 5 AND 12;

-- From a list
SELECT * FROM ipl_players WHERE team NOT IN ('Mumbai Indians', 'CSK', 'RCB');

-- Pattern matching — names starting with R
SELECT * FROM ipl_players WHERE name LIKE 'R%';

-- Check for empty values
SELECT * FROM ipl_players WHERE team IS NULL;

% means zero or more characters. _ means exactly one character. LIKE is case-sensitive. ILIKE is case-insensitive (PostgreSQL only).

Sorting and limiting:

-- Sort by price, highest first
SELECT name, auction_price_crores FROM ipl_players ORDER BY auction_price_crores DESC;

-- Top 3 results
SELECT name, auction_price_crores FROM ipl_players ORDER BY auction_price_crores DESC LIMIT 3;

-- Skip first 3, get next 3 (pagination)
SELECT name, auction_price_crores FROM ipl_players ORDER BY auction_price_crores DESC LIMIT 3 OFFSET 3;

DML — Insert, Update, Delete

DML stands for Data Manipulation Language. This is how you actually work with the data inside the tables.

INSERT:

-- Single row
INSERT INTO canteen_menu (item_name, category, price)
VALUES ('Vada Pav', 'Snacks', 15);

-- Multiple rows at once
INSERT INTO canteen_menu (item_name, category, price) VALUES
('Masala Chai', 'Beverages', 10),
('Samosa', 'Snacks', 12),
('Maggi', 'Snacks', 25);

UPDATE:

UPDATE canteen_menu
SET price = 20
WHERE item_name = 'Vada Pav';

DELETE:

DELETE FROM canteen_menu WHERE item_name = 'Cold Coffee';

Always use WHERE with UPDATE and DELETE. If you forget the WHERE clause, SQL will update or delete every single row in the table. I learned this the hard way in practice.

Aggregate Functions — COUNT, SUM, AVG, MAX, MIN

Aggregate functions take a whole column and return one number.

-- How many rows?
SELECT COUNT(*) FROM smart_watch_sales;

-- Total revenue
SELECT SUM(units_sold * price_per_unit) AS total_revenue FROM smart_watch_sales;

-- Average price
SELECT AVG(price_per_unit) AS avg_price FROM smart_watch_sales;

-- Cheapest and most expensive
SELECT MIN(price_per_unit) AS cheapest, MAX(price_per_unit) AS costliest FROM smart_watch_sales;

GROUP BY lets you split these calculations by category:

-- Total units sold per brand
SELECT brand, SUM(units_sold) AS total_units_sold
FROM smart_watch_sales
GROUP BY brand
ORDER BY total_units_sold DESC;

HAVING filters the groups after they are created. WHERE cannot do this because WHERE runs before grouping:

-- Only show brands that sold more than 20 units total
SELECT brand, SUM(units_sold) AS total_units
FROM smart_watch_sales
GROUP BY brand
HAVING SUM(units_sold) > 20;

Joins — Connecting Multiple Tables

This is where relational databases get powerful.

We keep data in separate tables to avoid duplication. Students in one table, internships in another. Joins let you combine them in one query.

Foreign Key is what connects the tables. The internships table has a student_id column that references the student_id in the students table:

CREATE TABLE internships (
    internship_id SERIAL PRIMARY KEY,
    student_id INT REFERENCES students(student_id) ON DELETE SET NULL,
    company_name VARCHAR(100),
    role VARCHAR(50),
    stipend INT,
    status VARCHAR(20)
);

ON DELETE SET NULL means if a student is deleted, the internship record stays but student_id becomes NULL. ON DELETE CASCADE would delete the internship too.

INNER JOIN — only matching rows:

SELECT s.name, s.branch, i.company_name, i.role
FROM students s
INNER JOIN internships i ON s.student_id = i.student_id;

Students without internships will not show up here.

LEFT JOIN — all students, matched or not:

SELECT
    s.name,
    s.branch,
    COALESCE(i.company_name, 'No Internship') AS company_name,
    COALESCE(i.stipend, 0) AS stipend
FROM students s
LEFT JOIN internships i ON s.student_id = i.student_id;

COALESCE replaces NULL with a default value. Students without internships will appear with 'No Internship' instead of NULL.

To find students who have NOT applied anywhere:

SELECT s.name, s.email
FROM students s
LEFT JOIN internships i ON s.student_id = i.student_id
WHERE i.internship_id IS NULL;

RIGHT JOIN returns all rows from the right table. In practice, developers rarely use RIGHT JOIN — they just flip the table order and use LEFT JOIN instead. It reads more naturally.

FULL OUTER JOIN — everything from both tables:

SELECT s.name AS student_name, i.company_name
FROM students s
FULL OUTER JOIN internships i ON s.student_id = i.student_id;

This shows all students and all internships. Where there is no match on either side, you get NULL.

Indexes — Making Queries Fast

I inserted 1,000,000 rows into a table to test this.

Without an index, when you search by name, PostgreSQL scans every single row from top to bottom. This is called a Sequential Scan.

EXPLAIN ANALYZE SELECT marks FROM marks WHERE name = '809E15792322';

EXPLAIN ANALYZE shows you the query plan and execution time. Before adding an index, my query took around 40-50 milliseconds on 1 million rows.

After creating an index:

CREATE INDEX idx_name ON marks (name);

The same query dropped to under 1 millisecond. PostgreSQL now uses a B-Tree structure to find the row directly instead of scanning everything.

A covering index goes one step further. If your query asks for marks along with name, you can store both in the index itself:

CREATE INDEX idx_name ON marks (name) INCLUDE (marks);

Now PostgreSQL does not even need to visit the main table. It gets everything from the index directly. This is called an Index Only Scan.

Transactions and ACID

A transaction is a way to group multiple SQL operations into one unit of work. Either all of them succeed, or none of them do.

The classic example is a bank transfer:

BEGIN;

    UPDATE accounts SET balance = balance - 500 WHERE owner = 'Shubham';
    UPDATE accounts SET balance = balance + 500 WHERE owner = 'Hitesh';

COMMIT;

If the server crashes between the two UPDATE statements, the database will rollback both changes. The money will not disappear from Shubham's account and fail to reach Hitesh.

If something goes wrong, you can manually undo everything:

BEGIN;
    UPDATE accounts SET balance = balance - 5000 WHERE owner = 'Shubham';
ROLLBACK;

ACID is the set of guarantees that make this work:

Atomicity — All or nothing. If Step 2 fails, Step 1 is also undone. I tested this by putting SELECT 1/0 (division by zero error) in the middle of a transaction. The whole thing rolled back.

Consistency — The database only moves from one valid state to another. I set CHECK (balance >= 0) on the accounts table. When I tried to deduct 5000 from an account with 1000, PostgreSQL threw an error and refused the operation completely.

Isolation — Uncommitted transactions are invisible to other connections. I opened two terminal windows to test this. Terminal 1 started a transaction and updated a balance but did not COMMIT. Terminal 2 could still see the old balance. Only after Terminal 1 ran COMMIT did Terminal 2 see the new number.

Durability — Once committed, data is permanent. PostgreSQL writes committed transactions to the Write-Ahead Log (WAL) on disk before returning a success response. Even if the server crashes one second after the COMMIT, the data will be there when the server restarts.

All the code from this blog is in my GitHub repo: github.com/abdulrdeveloper/Learn-SQL

Real World Database Collections ↗

You can find more of my work at abdulrdeveloper.me

CSS stands for Cascading Stylesheet.

• Cascading is a word that is meant by overwriting.

• The stylesheet is just for styling.

While overwriting the style of an element , Cascading first checks the (specificity + line).

Specificity and Priority Toppic in CSS :

The style will only apply for highest priority of specificity , if both element are at same priority then 2nd element will overwrite 1st element style .

1. p { class: blue; } <—- lowest priority (tag name)

2. .class { color: blue; } <—- medium priority

3. #class { color: blue; } ←—- high priority

4. inline style directly in html tag <—— highest priority

Same element, same specificity → last rule wins

/* CSS rules flow from UP to Down. When second rule target in
the same element, then the bottom rule override the first rule. */
p {
  color: red;
}

p {
  color: blue;             /* This style will applied */
}

<p>Hello world</p>

Same element, → higher‑priority selector wins

p {
  color: red;        /* element selector (lowest) */
}

.highlight {
  color: green;      /* class selector (higher) */
}

#special {
  color: blue;       /* ID selector (highest because there is no inline style) */
}

<p id="special" class="highlight">Hello world</p>

CSS CheatSheet :

• Font :

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Sets prioritized fonts for text */
font-size: 1rem; /* Sets text size, responsive with rem */
font-weight: bold; /* or 100–900 for thickness control */
font-style: italic;  /* Makes text italic */

Responsive Font :

font-size: clamp(16px, 4vw, 24px);

It keeps responsive font on screen size.

• Minimum: 16px → Font will never be less then 16px.

• Preferred: 4vw (4% of viewport width) → Normally use the 4% of screen width.

  • If Screen size will be large, then font will be also large.

  • If Screen size will be small, then font will be also small.

• Maximum: 24px → Font size will never be less then 24px.

• You can set these according to your specifications.

• Text

text-align: center; /* Aligns text in the center of the line */
letter-spacing: 0.15em; /* Adjusts space between characters */
text-decoration: underline; /* Adds decoration like underline/overline/line-through */
word-spacing: 0.25em; /* Sets spacing between words */
line-height: 1.5; /* Sets vertical spacing between lines */
text-transform: uppercase; /* Converts text to uppercase */

• Background

background: linear-gradient(...);  /* Adds gradient */
background-image: url("path"); /* Adds image */
background-position: center; /* Positions background image */
background-size: cover; /* Scales image to cover element */
background-blend-mode: multiply; /* Blends background layers */
background-clip: text; /* Clips background to text */

• Border & Outline

border: 2px solid #000; /* Adds border with size, style, color */
border-radius: 15px; /* Rounds corners */
outline: 2px dashed red; /* Adds outline outside element box */
border-image: url(border.png) 30 round; /* Uses image as border */

• Box Model

margin: 10px 20px 10px 20px; /* Outer spacing */
padding: 5px 10px 5px 10px; /* Inner spacing */
width: 100%; /* Element width */
height: fit-content; /* Height based on content */

• Box-Sizing

box-sizing: border-box; /* Includes padding/border in total size */
overflow: hidden; /* Hides overflow */
overflow-x: scroll; /* Scroll horizontally */
overflow-y: auto; /* Scroll vertically as needed */
aspect-ratio: 16/9; /* Keeps width:height ratio */
object-fit: cover; /* Scales image/video to fill box */

• Colors

color: #333; /* Text color */
opacity: 0.8; /* Element transparency */
color: hsl(200, 80%, 40%); /* HSL color format */

• Positioning

position: relative; /* Sets positioning context */
z-index: 10; /* Stacking order */

FlexBox :

Container-axis:
In a Container, there are 2 axis.

• First is Main Axis , It goes from left (main start) to right (main end) . And it is controlled by justify-content: ;

• Second is Cross-axis , It goes from Top (cross main) to bottom (cross end). Ad It is controlled by Align-Items: ;

And when we apply Display: flex; on this container, then the whole items inside the container will be come on main axis start.

Flex Direction :

• flex-direction : row; is used to add all items in a row (mostly default)

• flex-direction:column; is used to add all items in a column.

Properties for Child in Flexbox :

• You can also add some properties on a specific item in a container, and you can control it.

• flex-1 is used to add on a specific item , and it`s means that give all the extra width to this specific item.

• flex-2 is also used to add a specific item but it will take double space of the extra space .
  It works like this :
  If you have 5 items in a container, and you added flex:1; on item 1 and flex:2; on item 2 , then first of all all items will take his width and the extra remaining width will be divided into 3 parts . 2 parts will be of item 2 and 1 part will be of item 1 .

  

Order in Flexbox :

Using order property , you can adjust/change any item place.
If you write order:1; on item 1 then it`s priority will be higher then all other items because all items have the default priority of 0 . And if you added 1 on a specific item then it will shift at the end , and it will come after all lowest orders .

Wrap property in Flexbox:

• flex:wrap; will keep default position and place.

• flex:wrap-reverse will do opposite of default position and place.

Flexbox all Properties :

/* Parent (Container) */

display: flex; /* Activates flex layout */
flex-direction: row; /* Row direction */
justify-content: space-between; /* Distributes space */
align-items: center; /* Aligns items vertically */
gap: 1rem; /* Space between flex items */

/* Child (items) */

flex: 1; /* Flexible width */
align-self: center; /* Individual alignment */
order: 2; /* Changes visual order */

Set Primary/Secondary Color in CSS :

You can define colors in the :root using css variables and you can reuse them anywhere in the stylesheet just by giving the color reference. It`s easy and widely used in modern CSS.

CSS Grid :

Control Whole Container coloumn`s:

You can control whole container , and you can decide that how many coloumns it should take.

1fr is used to add 1 coloumn and this is how you can add coloumns according to your need.

display: grid;
grid-template-columns: 1fr 1fr 1fr;

Control Whole Container Row`s:

Grid-row is used to create rows with their different rows height. like in this it will create three rows with their 3 different rows height.

 .grid-container {
 display: grid;
 grid-template-rows: 80px 100px 100px;

Control specific item width:

  grid-column: 1 / 4; /* It will cover ( colomn 1,2 and 3 ) width. */
  grid-column: 2 / 4; /* It will cover ( colomn 2 and 3 ) width. 
And if you make 3 box, the lines will be 4.
     | 1 | 2 | 3 |
     ^   ^   ^   ^
     1   2   3   4   ← lines */

And remember that always apply this on a specfic box not on the whole container.

Control specific item height:

You can control , stretch , minimize, or adjust any row item height in a container.

  grid-row: 1 / 4; /* It will cover ( row 1,2 and 3 ) height. */
  grid-row: 2 / 4; /* It will cover ( rows 2 and 3 ) height. 
And remember that always apply this on a specfic box not on the whole container.
And if you make 3 box, the lines will be 4.
     | 1 | 2 | 3 |
     ^   ^   ^   ^
     1   2   3   4   ← lines */

Media Queries:

@media (max-width: 768px) {
  body { 
      font-size: 14px; /* Applies styles on small screens */ 
       }
 }

Animations & Transitions

Animation

@keyframes slide {
from {
      transform: translateX(-100%); 
     }
  to {
      transform: translateX(0); 
     }
}
.element {
  animation: slide 1s ease-in-out infinite alternate; /* Animates element */
}

transition: all 0.3s ease-in-out;    /* Smoothly animates property changes */
transform: scale(1.1) rotate(10deg); /* Moves, rotates, scales elements */
transform:  translate(10px,20px);    /* use to move element in X-axis,Y-axis direction*/

Modern Features in CSS :

scroll-snap-type: x mandatory; /* Creates snap scrolling */
backdrop-filter: blur(10px); /* Adds blur behind element */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } /* Styles scrollbar */
font-size: clamp(1rem, 2vw, 1.5rem); /* Responsive font size */

we only write code, then how the browser loads everything and show the complete webpage to the client.

This all happened through Browser.

Basics of a Browser :

So let’s try to understand the browser.

• Basic knowledge of the browser is enough if you don’t want to build your own browser.

• Deep knowledge will help when you want to build your own browser.

Browser`s Most Important Part :

The most important part of a browser is the Search URL (where we search everything).

Browser structure :

Browser seems like this:

User Interface :

• It is the frontend view of the browser which the user/client see while visiting the browser. It contains UI/UX like search bar, buttons (back, forward, refresh), webpages , tabs , page content.

Browser Engine :

It manage whole user requests and give instructions to the rendering engine. Think of it like a coordinator who gives instructions , organise and manage them.

• Browser Engine recieves all the users input.

• It Gives instructions to rendering Engine.

• It gives js code to javascript interpreter.

• It gives network requests to networking.

Rendoring Engine :

It is the most interesting and magical part of the browser . It is divided into 3 main parts,

• Networking

• JS interpreter

• UI Backend

1. Networking :

When the user types "chicode.com", the user sees the website but behind the scene

• Network Engine goes to chaicode server and brings all HTML, CSS and JS files and images.

• It gives the complete code files to Browser Engine.

2. JS-Interpreter :

It controls all functions on the website , if the user enter a button on the website then behind the scene

• JS interpreter loads all the JS files, manages them and update the page quickly infront of the user

• It executes functions and perform specific actions.

3. UI Backend :

It is the most important part of the rendering engine. It fatches data from HTML and CSS files, create DOM and CSSOM , and finally create a paints of them and show the user on browser screen. Fist of all it takes HTML and CSS code files by Network Engine.

HTML DOM Tree :

• It converts HTML into DOM like this,

  

  ---

  CSS CSSOM Tree :

• It converts CSS code into CSSOM like this ,

  

  ---

  Render Tree ( Combine of DOM + CSSOM ):

• After Creating DOM and CSSOM Tree, The UI Backend combines these both and make a Render Tree.

  

  ---

  Final Output on The Browser Screen :

• And after Creating Render Tree, It finally make layout and paint it for showing on the screen .

  

  It have a connection directly with User interface because It shows the webpage(paint) .

4. Disk API :

   It communicate with Operating System.

   • It reads Hard drive files and saves cache data/files , it saves permanently

   • It store/retrieve user's data.

   • It access system resources.

DNS stands for Domain Name System. It is a system that converts website names (like google.com) into IP addresses that computers can understand. When you type google.com in your browser, your computer does not know where google.com is located. So DNS helps to find the IP address of google.com and connect you to the correct server.

Why Name Resolution Exists?

Computers communicate with each other using IP addresses (like 142.251.41.14), but humans cannot remember all these long numbers. So DNS was created to convert easy-to-remember domain names (like google.com) into their corresponding IP addresses. This process is called name resolution. Without DNS, you would have to type IP addresses instead of domain names every time you want to visit a website.

What is the dig Command?

dig stands for Domain Information Groper. It is a command-line tool that is used to query DNS servers and get information about domain names. Dig command helps us to understand how DNS works and troubleshoot DNS-related problems. When you run dig command, it shows you the complete DNS resolution process - from the root server all the way to the authoritative name server.

When is dig Command Used?

Dig command is used when:

• You want to find the IP address of a website

• You want to check if a domain name is working properly

• You want to troubleshoot DNS issues

• You want to understand the DNS resolution process step by step

• Network administrators want to debug DNS problems

Understanding dig . NS and Root Name Servers:

What is the Root Name Server?

The root name server is the first step in DNS resolution. When you request google.com, your computer first asks the root name server "Where should I go to find google.com?" The root name server does not know the IP address of google.com directly. Instead, it tells you which server can help you find google.com.

What Does dig . NS Show?

When you run the command dig . NS, it shows all the root name servers in the world. These are 13 root name servers (a.root-servers.net, b.root-servers.net, c.root-servers.net, etc.). Although there are only 13 official root servers concept-wise, they have 1600+ copies (instances) distributed across the world to handle trillions of DNS queries every day. This is similar to how banks have one main office but thousands of branches.

How Root Name Servers Work:

Your Computer sends request → Root Name Server receives it (dig . NS)
Root Name Server checks the domain extension (.com, .org, .edu)
Root Name Server responds with the address of the TLD (Top Level Domain) name server
Your Computer then knows where to go next

Understanding dig com NS and TLD Name Servers:

What is a TLD Name Server?

TLD stands for Top Level Domain. Common TLDs are .com, .org, .edu, .pk, .net, etc. When the root name server tells your computer to ask a TLD name server, your computer then asks the .com TLD name server "Where can I find google.com?"

What Does dig com NS Show?

When you run the command dig com NS, it shows all the TLD name servers for .com domains. These servers know about all .com domain names and can tell you which server is responsible for each .com domain. For example, if you ask the .com TLD server about google.com, it will tell you which server manages google.com's DNS records.

How TLD Name Servers Work:

Your Computer asks TLD Name Server → "Where is google.com?"
TLD Name Server checks its database
TLD Name Server responds with the address of google.com's authoritative name server
Your Computer now knows where to go to get the actual IP address

The Flow So Far:

Your Computer → Root Name Server (dig . NS) → TLD Name Server (dig com NS) → Authoritative Name Server (coming next)

Understanding dig google.com NS and Authoritative Name Servers:

What is an Authoritative Name Server?

The authoritative name server is the actual server that knows the IP address of google.com. It is owned and managed by Google company itself. This is the final step in DNS resolution. Authoritative name servers store the actual DNS records for the domain.

What Does dig google.com NS Show?

When you run the command dig google.com NS, it shows which servers are the authoritative name servers for google.com. For Google, you will see servers like ns1.google.com, ns2.google.com, ns3.google.com, ns4.google.com. These are Google's own name servers that store the IP address information for google.com and other Google domains.

How Authoritative Name Servers Work:

Your Computer asks Authoritative Name Server → "What is the IP address of google.com?"
Authoritative Name Server checks its database
Authoritative Name Server responds with the IP address: 142.251.41.14
Your Computer receives the IP address and connects to Google's server

Why Multiple Authoritative Servers?

Google uses multiple authoritative name servers (ns1, ns2, ns3, ns4) for redundancy and load balancing. If one server goes down, the others can still respond to DNS queries. This ensures that the website remains accessible all the time.

Understanding dig google.com and the Full DNS Resolution Flow:

What Happens When You Run dig google.com?

When you run the command dig google.com, it shows you the complete DNS resolution process. It shows you the actual IP address of google.com and how your computer found it. This is the final query after going through all the previous steps.

The Complete DNS Resolution Flow:

Step 1: Your Computer sends request → "I want to visit google.com"

Step 2: Root Name Server receives it (dig . NS)
Root Name Server says "I don't know google.com, but ask the .com TLD server"

Step 3: Your Computer asks TLD Name Server (dig com NS)
TLD Name Server says "I know about .com domains, but for google.com specifically, go ask ns1.google.com"

Step 4: Your Computer asks Authoritative Name Server (dig google.com NS)
Authoritative Name Server (ns1.google.com) responds with the IP address: 142.251.41.14

Step 5: Your Computer receives the IP address and connects to Google's server
Your Browser displays Google homepage

Why This Process Is Important:

This entire process happens in milliseconds. When you type google.com in your browser, you are immediately connected to the correct server without knowing the IP address. DNS makes the Internet user-friendly and easy to use.

What Each dig Command Shows:

• dig . NS → Shows root name servers

• dig com NS → Shows TLD name servers for .com

• dig google.com NS → Shows authoritative name servers for google.com

• dig google.com → Shows the IP address of google.com and the complete resolution process

Real-Life Example:

Think of the DNS resolution process like finding someone's address:

You ask your friend (Root Server): "Where does Ali live?"
Friend says: "I don't know, ask the city office (TLD Server)"

You go to City Office: "Where does Ali live in this city?"
City Office says: "I don't know exactly, but ask his neighborhood office (Authoritative Server)"

You go to Neighborhood Office: "Where does Ali live?"
Neighborhood Office says: "Ali lives at House 123, Block 5"

Now you know the exact address and can visit.

Same way, your computer goes from Root Server → TLD Server → Authoritative Server to find the IP address of the website you want to visit.

If Both Computers want to connect with each other, then both computer’s cables should be in network device.

Data Transferring Flow :

• Computer sends (0,1,0) data → Using Blue cable → The data reaches at Network Device.

• Network Devices receive those data and then decide where to send next.

• Network Devices forward the data → in yellow cable → computer 02 receives the data

• This flow can be opposite also (Computer 02 - to - Computer 01 )

Commonly used Networking Devices :

There are a lot of Networking Devices but most commonly used devices are as follows.

Switch :

Just Suppose , If you are working in a industry/company and there are 100 computers connected with switch , and you want to send data to a specific computer in those 100 computers , then what will you do ?

In this case switch helps to transfer data to a specific computer using mac address.

The Complete workFlow :

1. Computer 01 will send data in switch with mac address of the specific computer (where the computer 01 wants to send data)

2. Switch will check all 100 computers mac addresses (each computer contains unique and only one mac address)

3. Once the switch found the specific Computer, it will forward whole data on those specific computer.

Switch can be connected through wired connection and wireless , but on large scale, it mostly used wireless because connacting 100 computers with wired can be confusing so wireless also used.

Hub :

It is one of the oldest and simplest network device which transfer data directly everywhere instead of specific computer.

Just suppose computer 01 want to send data to a specific computer,

• First of all , computer 01 will send data to Hub .

• Hub will receive and transfer data in whole 100 computers instead of specific computer.

• This can cause more bandwidth and sends unnecassory data in all computers.

  

Switch vs Hub :

• Switch forwards data to specific computer using mac address.

• Hub forwards data to all connected computers instead of one.

Router :

• As we discussed earlier that switch is use to send or receive data through LANs( local wires),

• But what happened if you want to share or access data from a network which is not accessible locally to you?

• Like using google.com, which is not available offline near you.

• Therefore you need a device that connects you to different online network servers. A router uses ip address (address on internet) instead of mac address (local offline address).

• Router requests to server and give us server response.

Modem :

Modem is use to convert data signals given by ISP (fiberr, PTCL etc) ,

How it works :

• ISP gives you internet or wifi , but it contains analog signals , and modem converts these signals into digital (0,1) and computer connect to internet and wifi.

ISP (Analog Signals) → Modem (Converter) → Digital Signals → Your Computer → Internet Access.

without modem , ISP will gives you analog signals but your computer cannot understand and proceed it , and you will be unable to connect with internet.

Firewall :

• A firewall is a security device or software that checks and controls incoming and outgoing network traffic.

• It is exact like a security guard who checks everyone before entering in the house from outside.

• A firewall decides which data packets are allowed to enter your network and which ones should be blocked.

• This all done on firewall by predefined security rules.

Load Balanacer :

• Load balancer is used to manage clients request. If the client requests a website,

• The request goes to load balancer first.

• Load balancer check all available servers and response the minimal traffic server .

• Large websites like Google, Facebook, and YouTube use multiple load balancers to handle billions of requests every day.

These all Network Devices , internal devices , external devices, ISP etc works combine to run the whole world of the network known as Networking .

cURL is a command-line tool that help us to talk with servers and APIs directly using terminal without opening any browser.

Why Programmers Need cURL ?

cURL helps programmers to easily access websites and test APIs without opening browsers again and again. Using cURL, programers test APIs in the backend and can get whole HTML code without inspecting the browser.

Making your first request using cURL :

Step 1 : Check if cURL is installed on Windows

cURL comes pre-installed with Windows 10 and later versions (PowerShell).

Open PowerShell or Command Prompt and type:

curl --version

If you see a version number then it`s already installed , or you can download it from curl.se/download.

Step 2 : Make Your First Request

Open PowerShell and run this command:

curl http://www.google.com

What will happen?

• cURL will send a GET request to Google server

• Server will send data packets

• You`ll recieve google homepage HTML code

Common cURL Mistakes to avoid as a Beginner :

1. Forget to Include the Address

   Don`t write like this :

    curl               # this is not correct, because it don`t have any URL.
   

   Always include a URL because it is exactly like you are giving an address:

    curl http://google.com        # It is Correct because it have url.
   

2. Use of HTTP and HTTPS

   i) HTTP is less common now , use it when the website supports non secure connection.

     curl http://google.com         # Non-secure connection
   

   ii) Use HTTPS when the website supports a secure connections (mostly in modern websites).

     curl https://google.com       # Secure connection with encryption
   

3. Writing Incomplete Command :

   Don`t write incomplete or wrong command,

    curl google.com                 # sometimes, this command can be wrong
   

   This works on many setups , it`s clearer and safer to write:

    curl http://google.com       # this is correct command
   

   ---

i) This is very Reliable. It transfers data from server to client completely and very carefully.

ii) It transfer data in the same order from server to client without changing or lossing any data packet. It also detect loss of data packets.

iii) It delivers data packets slowly compared to UDP .

iv) It does a synchronous acknowledgment. (3 way Handshake at start and end).

3-way Handshake B/W Server and Client :

Client : Hello, are you listening, Can we talk? (syn)

Server : Yes, we can talk . (syn-ack)

Client : Ok , send me Data Packets of a video . (ack)

This is 3-way handshaking, done at the start and at the end. It is synchronous process.

When to use TCP

Use TCP when you want to transfer data completely and in order ( delivery > speed ). It is mostly used for,

• Websites

• Emails

• File transfer

• Chat apps (WhatsApp, Telegram, etc.)

• Banking / payment apps

• APIs

Example:
If one byte of bank transaction is lost, whole transaction will be wrong → so TCP is used.

Protocols help to connect one computer to another computer/server for talk . These are standard rules in which computer tells that how data will transfer. Without these rules user/server cannot understand the data language, who and what is sending, and there will be no privacy, that`s why they use Http.

There are a Lot of Protocols but We will focus on two protocols

i) TCP ii) UDP

Server can send data packets to the client through TCP and UDP .

TCP ( Transmission Control Protocol )

i) This is very Reliable. It transfer data from server to client very carefully and completely.

ii) It transfer data in the same order from server to client without changing or lossing any data packet. It also detect loss of data packets.

iii) It delivers data packets slowly compared to UDP .

iv) It does a synchronous acknowledgment. (3 way Handshake at start and end).

When to use TCP

Use TCP when you want to transfer data completely and in order ( delivery > speed ). It is mostly used for,

• Websites

• Emails

• File transfer

• Chat apps (WhatsApp, Telegram, etc.)

• Banking / payment apps

• APIs

Example:
If one byte of bank transaction is lost, whole transaction will be wrong → so TCP is used.

UDP ( User Datagram Protocol ) :

i) This is not Reliable , also it does not detect loss data packets and also do not deliver data in the order.

ii) It deliver data packets with very fast speed compared to TCP but with less control .

iii) It does Asynchronous acknowledge. (no handshake, direct data transfer).

When to use UDP

Use UDP when speed is more important than 100% delivery ( delivery < speed ):

• Live video calls (Zoom, Meet, WhatsApp video)

• Online gaming (PUBG, Free Fire, etc.)

• Live streaming (YouTube Live, Twitch)

• DNS queries (very small, can be re-sent if lost)

• VoIP (Voice over IP, e.g., WhatsApp calls)

Example:
If one frame in live video is lost, just a small glitch appears → but next frame comes → so UDP is used.

HTTP = Postman (What send - letter, parcel, etc.)

TCP = Secure courier ( How send - carefully with guarantee )

UDP = Fast delivery bike ( How send - quickly, no guarantee )

IP = Road system ( Where send - which path through )

HTTP is a protocol in which standardized data format (text-based, structured communication). TCP and UDP both work on the upper Layer of the HTTP layer. They define how the data will transferred (reliably or quickly). HTTP, TCP, and above work for web browsing.

DNS is exectly like a phone book .

When we entered in any DNS section of a Domain , then there we saw A Record, CAA Record, NS Record, TXT Record CNAME Record etc. We need to manually update these records as soon as we host our website on another ip addresses .

Why DNS records are needed ?

DNS Records helps browser to identify correctly that where the server is and what is the ip address of the server , Using DNS Records browser can easily get`s IP address and can show the website to the client .

What is a NS Record ?

NS Records tells that who is the owner of this specific domain and which nameserver like ( godaddy/namcheap/spaceship/hostinger etc ) is managing it`s dns, and through NS only we go to dns and add A Record and CNAME Record.

Like if we buy domain from Namecheap then domain and DNS provider both will be Namecheap only, and one NS record become ns1.namecheap.com, now when we type website, then browser request to root server and root server will give data of nameserver ( link: ns1.namecheap.com ip address: 208.109.188.100 etc ), now browser from this link or ip address inside it can access A Record or CNAME record easily.

What is A Record ?

Remember A Record always show ip address.

When we tell the browser to open google.com then it request from root server and get`s data from it and then from that data it goes to google`s server , and in DNS section it first search for A Record because the server`s IP is in A Record and if IP address is find out then it show us the website. This means the browser only need the A Record`s IP address.

Now we host our website on any hosting providing server (netlify, vercel, digital ocean) then our code stay always available on vercel/netlify`s machine which never turn off and vercel/netlify give us one ip address (like 77.66.1.1) and tell us that add this ip address in your domain`s A Record. but

If for some reason in future vercel/netlify need to change their server/machine (normally it is not possible but if this happen then), then vercel will inform everyone through email`s to update thier A Records which is very big issue for millions of users so in this situation CNAME helps.

What is CNAME Record ?

CNAME use when browser don`t get updated ip address from A Record , then as alternative browser check CNAME and from here it takes ip address and show website. CNAME is one link given from vercel side ( like website`s hosted link etc 9cbe0a1c625.vercel-dns-07.com ) and vercel tell us that add this link in your CNAME Record so that in case if ip address change , then browser can access updated ip address from this link and this link cannot change only its ip address can update. This way without manually informing users through emails, vercel can automatic change and browser easily can access updated ip address from CNAME Record.

What is AAAA Record ?

This is also the more complex version of A Record . The ip address which we give in A Record that is ipv4, and in AAAA Record we add with more details (2001:0db8:85a3:0000:0000:8a2e:0370:7334 etc) and this is also known as ipv6.

Example:

Old: House address "Block 5, House 123, Lahore"

New: House detailed address "Block 5, House 123, Street 45, Sector 6, Lahore, Punjab, Pakistan."

In both one same house is find out, just format is different.

What is MX Record ?

DNS is exactly like a Phone book .

Just like in phone book it is write: "Ali ka number: 03001234567"

Similarly in DNS it is write: "google.com ka address: 142.250.185.46"

If you make your business website

Website: www.mysite.com Email: contact@mysite.com

Now in DNS you will add something like this:

A Record: mysite.com → 192.168.1.1 (Website is here)

MX Record: mysite.com → mail.mysite.com (Email is here)

What is TXT Record ?

TXT Record is like a small note space in DNS where we can put any extra text.

Normal DNS server address stores the addresses (A, CNAME) and mail server (MX), but TXT record is different. In this we can add anything in text form.

How All DNS Records Work Together for One Website ?

Let’s say:

• Domain: mysite.com

• Hosted on: Vercel

• Email: contact@mysite.com → Google Workspace

Real setup in DNS:

• NS records:
  ns1.namecheap.com
ns2.namecheap.com
  → Tells internet: “This domain’s DNS is managed by Namecheap.”

• A Record:
  mysite.com → 123abc.vercel-dns.com
  → Browser pata lagata hai: “Website is hosted on Vercel.”

• CNAME:
  www.mysite.com → mysite.com
  → So both mysite.com and www.mysite.com open the same site.

• MX Record:
  mysite.com → aspmx.l.google.com
  → It finds the Email : “Email in on the server of google.”

• TXT Record:
  mysite.com → “google-site-verification=xyz123”
  → Google will check : “Owner added the confirmation .”

When you type mysite.com:

1. Browser → Root server → NS → Namecheap DNS

2. Namecheap DNS → A Record → Vercel IP

3. Vercel server → Send website

4. Email → MX → Google → Deliver email

All Records work together, like a team.
and this is how whole domain dns system works.”

It's not magic. It's just a clever database hidden in plain sight.

The Hidden Database: .git Folder

When you run git init in your project, Git creates a hidden folder named .git. This folder is the brain of your entire version control system.

If you open your terminal and type:

ls -a

You will see the .git folder appear (along with other hidden files). This folder contains your entire project history. If you delete this folder, your project becomes just a regular folder, and all version control is lost.

Important: Never delete the .git folder unless you intentionally want to stop using Git!

Inside the .git Folder: Three Critical Components

The .git folder has several important parts, but three of them matter the most:

Figure 1: The hierarchical structure of the .git folder and its key components.

1. HEAD: Your Current Location

The HEAD file is simple but important. It tells Git which branch you are currently on.

If you check its contents:

cat .git/HEAD

You will see:

ref: refs/heads/main

This means: "You are currently standing on the main branch."

2. refs/heads/main: The Commit Pointer

Inside the .git/refs/heads/ folder, there are files for each branch. Let's look at the main file:

cat .git/refs/heads/main

Output:

abc123def456xyz789abc123def456xyz789abc123

This is a commit hash ID. This specific string points to your latest commit on the main branch.

Here's the connection: This is exactly the same hash that appears when you run:

git log --oneline

Why this matters: Git doesn't need to search for your latest commit. It already knows where it is because it's stored in this file!

3. objects: The Data Storage

This is where the actual magic happens. The .git/objects/ folder contains all the real commit data:

• Tree objects: Snapshots of your file structure.

• Commit objects: Author, date, message, and parent commit.

• Blob objects: The actual file contents.

When you run git log or git diff, Git retrieves data from here.

How Git Actually Retrieves Your History

When you run git log, Git doesn't magically pull data from nowhere. It follows a specific path:

Figure 2: The step-by-step process Git follows when you run 'git log'.

Step-by-step:

1. Read .git/HEAD: Git checks which branch you're on.

2. Read .git/refs/heads/main: Git retrieves the latest commit hash.

3. Go to .git/objects/: Git finds the commit data using that hash.

4. Display it to you: Git shows you the history in the terminal.

This entire process happens in milliseconds!

Verification: Connecting the Dots

Here's how you can verify that this is actually happening:

Step 1: Get the latest commit hash

cat .git/refs/heads/main

Output: abc123def456...

Step 2: Check what git log shows

git log --oneline

Output:

abc123def (HEAD -> main) Added login feature

Notice: The hash at the beginning is the same! This proves that Git is reading from the .git/refs/heads/main file.

Why This Understanding Matters

Understanding the .git folder structure helps you realize several important truths:

1. Your code is safe: As long as the .git folder exists, your entire history is preserved.

2. Git is portable: The .git folder is self-contained. You can move your project anywhere, and Git still works.

3. No internet needed: Git works entirely offline. GitHub is optional; Git itself doesn't require the internet.

4. Commands are shortcuts: When you type git log, you're essentially asking Git to read and display files from the .git folder.

The Complete Picture

The .git folder isn't mysterious—it's just well-organized:

• HEAD tells you where you are.

• refs point to the latest commits.

• objects store the actual data.

When you understand this structure, Git stops feeling like magic and starts feeling like a well-engineered tool.

In this guide, we will break down the essential commands you need to know to work like a professional developer.

How Git Tracks Changes

When Linus Torvalds built Git, he needed a place to store changes without relying on external servers. His solution was brilliant: The .git folder.

When you initialize Git, it creates a hidden folder named .git inside your project. This folder acts as a local database that records every single change.

• Scanning: Git scans your files for changes.

• Diffing: It marks lines as + (added) or - (removed).

• Hashing: It generates a unique ID (Hash) for every save.

  Note: The .git folder is hidden by default so you don't accidentally delete it!

The Essential Workflow

To use Git effectively, you only need to master a few core commands.

1. git init (Start Here)

This command tells Git: "Start tracking this project."

git init

What happens: Git creates the hidden .git folder. You only run this once per project.

2. git add (The Staging Area)

Writing code doesn't mean Git is tracking it yet. You have to tell Git which files to prepare for saving. This is called "Staging."

git add file.js    # Stage a specific file
git add .          # Stage ALL files (Recommended)

Analogy: Think of this like putting a parcel in a box. You haven't mailed it yet; you're just packing it.

3. git commit (The Save Button)

Now that your files are staged, you need to permanently save them.

git commit -m "Added login feature"

What happens:

• Git saves a snapshot of your files in the .git folder.

• It generates a unique ID (e.g., abc123d).

• It clears the staging area for your next work.

4. git log (Check History)

Want to see what you've done? This command shows your history.

git log                 # Shows full details
git log --oneline       # Shows a short summary (Recommended)

Important Concept: HEAD 🧠

You will often hear developers talk about "HEAD."

• HEAD is simply a pointer to your latest commit.

• It tells Git: "This is where we are standing right now."

When you make a new commit, HEAD automatically moves forward to that new commit.

Fixing Mistakes: Revert vs. Reset

We all make mistakes. Maybe you broke the code or deleted the wrong file. Git gives you two ways to fix it, but one is safe and the other is dangerous.

Figure 2: Why you should choose Revert over Reset in professional teams.

✅ The Safe Way: git revert

This command undoes a mistake by creating a new commit that reverses the changes.

git revert <commit-id>           # Commit hash ID obtained after making a commit

• Why it's good: It preserves your history. You can see that a mistake happened and was fixed. This is great for teams.

⚠️ The Dangerous Way : git reset --hard

This command deletes everything after a specific point.

git reset --hard <commit-id>      # Commit hash ID obtained after making a commit

• Why it's risky: It completely erases history. If you reset, those later commits are gone forever.

• Professional Advice: Avoid using this in team projects. Once you delete history, you can't get it back easily.

Summary

1. git init → Create the repo.

2. git add . → Stage your changes.

3. git commit -m "msg" → Save your changes.

4. git status → Check what's happening.

5. git log → View history.

Master these, and you are already ahead of 90% of beginners

To understand the answer, we have to look at how we used to work without them.

The Old Way: The Pendrive Chaos

Imagine a developer named Ahmad who runs code on his local machine. He saves his code on a pen drive and shares it with his teammate so they can use it.

When the teammate views the code, they make some changes and return the updated code via the pen drive back to Ahmad.

Now, Ahmad faces a dilemma. He doesn't know what is happening in the code:

• Which changes were made?

• Where did the changes occur?

After a while, the teammate realizes there is an issue in the code and fixes it. Again, they have to give Ahmad the pen drive. This cycle continues, and it creates a massive headache.

Figure 1: The confusion of manual collaboration without version control ( Git ).

The Problems They Faced

This manual process created several critical issues:

1. Unknown Changes: When the teammate made changes, Ahmad didn't know what changed. When Ahmad made changes, the teammate was equally lost.

2. No Tracking: There was no way to know which files were changed or deleted.

3. Physical Limitations: Every time someone made a change, they had to physically share the pen drive.

4. No Collaboration: Both developers couldn't work simultaneously; collaboration was extremely difficult.

5. No History: There was no record of code changes, meaning they couldn't retrieve old versions if something broke.

   Solution Part 1 : Git (Local Version Control)

   When developers identified this problem, they built a Code Tracker which they named "Git".

   Actually, Git is a Version Control System (VCS). There are other VCS options in the market like Mercurial or Apache Subversion (SVN), but Git is the most popular.

   What Git does locally:

   • It tracks all changes in the code.

   • It shows who made what changes and when.

   • It displays a history of modified files.

   • It can be used by a single developer on their local machine.

This solved the tracking problem. However, there was still a big problem remaining: The pen drive still had to be shared.

There was confusion about which version was the "latest," no central backup existed, and code was stuck on local machines.

Solution Part 2 : Remote Repository (GitHub)

To solve the collaboration issue, they built a Single Source Solution where all developers could push their updated code to a central server. They named this "GitHub".

In this context, what we call a "server" is referred to as a Remote Repository.

Figure 2: GitHub acting as a central hub for developers to push and pull code.

What GitHub (Remote) does :

• It acts as a central server (in the cloud) for collaboration.

• All developers connect to it simultaneously.

• When a developer updates code, they "Push" it to GitHub.

• Other developers can easily view the latest code and "Pull" it.

• Everyone instantly knows what changed, and a complete backup stays safe in the cloud.

With this, the collaboration problem was completely solved.

Important Clarification: Git vs. GitHub

Nowadays, many people write "Learned GitHub" on their resume, but this is technically wrong.

• ❌ "Learned GitHub" = WRONG

• ✅ "Learned Git" = CORRECT

Why?
GitHub is just a hosting service (a platform) where you store code. Learning GitHub just means clicking buttons.
Git is the complete Version Control System (the tool) that needs to be learned. It requires understanding commands (init, add, commit), concepts (staging, history), and workflows.

In Simple Words:

• Git = Local Version Control System (On your computer).

• GitHub = Remote Repository Hosting (On the internet).

Who Built Git?

Git was created by Linus Torvalds in 2005.

He was working on the Linux Operating System. At that time, Linux was growing rapidly, and thousands of developers were working together. Tracking code became very difficult. They were using other systems (like SVN), but they were slow.

Linus decided to build his own system that would be fast, distributed, and reliable. He built Git in just a few weeks as a side project!

` Fun Fact: "Git" is British slang for "an annoying or foolish person." Linus jokingly gave it this name because Git was quite strict and complicated. `