In early days we used Callbacks. Take it like a game of Chinese Whispers where you told soldier X to find the map then you had to tell soldier Y to find the keys and then soldier Y had to tell soldier Z to start the car.

If soldier Y tripped then the entire line broke because of a single soldier. And that time you couldn't see what was happening. We called it Callback Hell.

The New Order: What is a Promise?

A Promise is nothing else just like a commitment just take a real world example such as when you give an order to a soldier in return you want the result but soldiers don't give you the result immediately, instead they give a Promise that they will complete the given task.

Now you have sent the all soliders in to the field and you don't just sit in your room. You prepare the entire battle you check the weather, you prepare the rations and plan the next move. You are called asynchronous.

The 3 States of a Soldier

Every mission includes these three states whcih are used to handle the entire mission.

• Pending

• Fulfilled/Resolved

• Rejected

Pending State

On pending state the soldier is on the way but the result is still unknown.

Fulfilled

On this state not only soldier but everyone celebrate it because this is the state where soldiers return with the enemy flags It shows that the mission is accomplhished and they are coming back to the base.

Rejected (Failure)

On this state you can understand it like this, suppose the soldiers where they were being sent there was a bridge between the command base and the destination where they wanted to go. So the bridge was broken and the soldiers couldn't cross it. It means the mission was postpond at that time. In promises world this is called rejected.

Mission Issuing the Order

In JavaScript this is how you send a soldier on a mission. It's not difficult to understand issuing the order means you are preparing the soldiers to send them.

const captureBase = new Promise((resolve, reject) => {
    let baseCaptured = true; // The battlefield reality to understand promises in js bro...

    console.log("Soldier: Major The mission is started");

    setTimeout(() => { // It simulates the time which is taken for the mission
        if (baseCaptured) {
            resolve("Sir! We captured the base. Now it is under our control"); // On this state the mission is accomplished
        } else {
            reject("We can not cross the bridge it is broken"); // On this state the mission is failed
        }
    }, 2000);
});

You can handle the report very easily.

You don't wait for anything you can directly tell the soldiers what to do after accomplishing the mission.

• .then(): If you succeed, hoist the flag.

• .catch(): If you fail, call for backup.

• .finally(): Whether you win or lose return to base for dinner.

captureBase
    .then((msg) => console.log("Message:", msg))
    .catch((err) => console.log("Error:", err))
    .finally(() => console.log("Major: All units must return for dinner."));

The Shocking Comparison

Squad (Static Methods)

In some critical missions you need a squad because one soldier won't be enough for that mission.

The Joint Strike (Promise.all)

Suppose you send 3 soldiers to 3 different location for the battle if all get success then you win otherwise if 1 soldier fails then the whole mission is a failure.

• Use Case in real softwares, such as loading a user's profile, photos, and settings. You need all three to display the page.

The Full Report (Promise.allSettled)

You send 3 scouts but in this case you don't care about the result if they fail or secceed instead you just want a report from everyone regarding what they saw.

• Use Case in real world software like sending 8 emails, you want to know which ones were sent and which ones bounced at that time.

The Scout Race (Promise.race)

You send 3 scouts to find a secret path as soon as the first one returns whether they found a secret path or just found an error, you immediately take action on that.

• In real world software we use it like setting a 6 second of timeout. If the data doesn't come in 6 seconds, the Timeout Error wins the race.

The Backup Plan (Promise.any)

Lets understand Promise.any like some spies suppose you send 3 spies to find the location of your enemy. As soon as one spy succeeds you celebrate that and you ignore the other ones who failed.

• In real world software we can see the usecase like Fetching data from 3 different servers. Suppose there are 3 servers, server A, server B, and server C. If Server A is down, but Server B is up and it's running so you take data from Server B.

The Final Upgrade: Async/Await

In modern warfare, we use Async/Await. It makes the code look like a simple list of commands, but it uses Promises secretly in the background. Async/Await in JavaScript allows you to write asynchronous code in a clean way which makes it easier to read, understand and maintain the code while working with promises. Async functions always return a Promise. Await keyword pauses the exectuion of the code until the Promise is resolved or rejected. The code becomes more readable as compare to .then() and .catch() chaining which makes the code frustrating to read if it gets very big. Async and await also make error handing very easy by using try.....catch.

async function executeMission() {
    try {
        const report = await captureBase; // It waits here until the promise is resolved or rejected
        console.log("Major reads report:", report);
    } catch (error) {
        console.log("Major handles crisis:", error);
    }
}

This was the journey of Promises in JS. I tried my best to explian it in a story form to make you understand what happens in Promises behind the scenes. Instead of using a lot of .then() in modern codes we use async and await to make our code maintainable and readable which handles all of these promised itself.

Beyond just "opening websites," a browser is a specialized piece of software designed to request, retrieve, and render content from the internet. It takes raw text (HTML/CSS) and transforms it into a visual experience you can interact with.

The Architecture: A Team of Specialists

A browser isn't one single program; it’s a collection of components working in harmony.

• User Interface (UI): This is everything you see that isn't the website itself—the address bar, back/forward buttons, and tabs.

• Browser Engine: The "manager" that coordinates actions between the UI and the Rendering Engine.

• Rendering Engine: The "artist" that paints the website on your screen. Chrome uses Blink (part of Chromium), while Firefox uses Gecko.

• Networking: The "courier" that fetches resources like HTML, CSS, and images using protocols like TCP and HTTP.

• JavaScript Engine: The "brain" that handles logic. For example, Chrome uses the V8 Engine.

The Journey: From URL to Pixels

What happens after you type a URL and press Enter? Once the Networking component fetches the HTML file, the Rendering Engine starts its work.

1. Parsing and Building the DOM

The browser can't "read" HTML like a human. It has to parse it—which means breaking it down into a structure it understands.

• HTML Parsing: The browser reads the tags and creates a DOM (Document Object Model).

• The Analogy: Think of the DOM as a Tree Structure where the <html> tag is the trunk and every other tag is a branch.

2. CSS Parsing and the CSSOM

While building the DOM, the browser finds CSS files. It parses these into a CSSOM (CSS Object Model). This is a separate map that tells the browser what colors and fonts belong to which parts of the DOM.

3. Combining into the Render Tree

Now, the browser joins the DOM (structure) and the CSSOM (style) together to create the Render Tree. This tree only contains the things that will actually be visible on your screen.

The Final Stages: Layout and Paint

Once the Render Tree is ready, the browser still doesn't know where things go on the screen.

• Layout (Reflow): The browser calculates the exact coordinates and size of every element. It asks, "How wide is this box?" and "Where does this text wrap?"

• Painting: Finally, the browser fills in the pixels with colors, borders, and images.

• Display: The finished "painting" is sent to your screen.

A Simple Note on Parsing

You might wonder: What is parsing? Imagine a math expression: 2 + 3 * 5. To solve it, your brain "parses" it by identifying the numbers and the operators, then building a mental order of operations. The browser does the same with code!

Conclusion

Building a website is like writing a script for a play. The HTML is the script, the CSS is the costume design, and the Browser is the director who takes all that information to put on the final performance!

Just as you learned that JavaScript works through a Global Execution Context, the browser works through a Rendering Pipeline.

Why Do We Need Selectors?

Imagine you are in a bus full of people. If you shout “Hey you” everyone might look at you. If you want to call a specific person to look at you then you need to call him by his name or by pointing out him by his shirt color.

CSS selectors work exactly the same way. They allow you to target specific parts of your HTML without affecting the rest of the page. You can target an specific element to add styling.

The Big Three: Element, Class, and ID

The Element Selector

This targets all elements of a specific type. It’s the "shouting in a bus" approach.

• Example: p { color: orange; } will make every single paragraph on your page orange.

The Class Selector (.)

Classes are like "groups" or "roles." You can give the same class to multiple elements. In CSS you target a class by putting a dot . before the name.

• Example: .highlight { background-color: yellow; }

• Use Case: Use this when you want several different items (like a button and a link) to share the same style.

The ID Selector (#)

An ID is a unique name. On a single webpage an ID should only be used once. In CSS, you target an ID by using a hashtag # to select an element.

• Example: #main-header { font-size: 32px; }

• Use Case: Use this for a one-of-a-kind element, like your website's main logo or navigation bar.

Advanced Targeting: Group and Descendant

Group Selectors

If you want the same style for your h1, h2, and p, you don't need to write three separate rules. You can group them with a comma and then you can easily apply the css styling to all of them.

• Example: h1, h2, p { text-align: center; }

Descendant Selectors

Sometimes you only want to style an element if it is inside another specific element.

• Example: div p { color: gray; }

• Such as in this case only those paragraphs color will be gray which are inside the div element.

Basic Selector Priority

What happens if you tell a paragraph to be orange using an Element selector, but then tell it to be red using a Class selector?

CSS has a "Weight" system (called Specificity):

1. ID is the heaviest (wins most battles).

2. Class is medium weight.

3. Element is the lightest.

What is an HTML Tag?

Think of a Tag as a set of instructions for the browser. A tag tells the browser that the text inside here should be treated as a specific type of content. Such as if it is a heading then it will be treated as a heading.

Most tags come in pairs:

• Opening Tag (<p>): Tells the browser where the instruction starts.

• Closing Tag (</p>): Tells the browser where the instruction ends (notice the forward slash /).

• Content: The actual text or image sitting between the tags.

Tag vs. Element: What’s the Difference?

These terms are often used changeably but there is a bit different:

• The Tag is just the piece of code like <p> or </p>.

• The Element is the whole package: the opening tag + the content + the closing tag.

Self-Closing (Void) Elements

Remember every element doesn’t need a closing tag. But some elements don't contain any text; they just "exist" as a single instruction. These kind of elements are called Void Elements.

• Example: The <br> tag (for a line break) or the <img> tag (for an image). You don't need to say "stop image" because the image is just a single point on the page.

Block-Level vs. Inline Elements

This is the most important concept to understand how your website will actually look in the browser.

Block-Level Elements

These elements always start on a new line and take up the full width available. They are like big boxes stacked on top of each other.

• Examples: <div>, <h1> to <h6>, <p>, <ul>.

Inline Elements

These elements do not start on a new line. They only take up as much width as necessary and sit "in line" with other content. Inline elements doesn’t acquire the entir with of the line.

• Examples: <span>, <a> , <strong>.

Conclusion

When you start writing HTML code you will use these tags 90% of the time:

• <div>: A generic container (Block).

• <span>: A generic container for text (Inline).

• <h1> - <h6>: Headings for your titles.

• <p>: For your standard paragraph text.

• <a>: For creating links to other pages.

The two most famous delivery rules are TCP and UDP. While they both move data, they have very different personalities. One is obsessed with being perfect the other is obsessed with being fast.

TCP: The Reliable Courier

TCP (Transmission Control Protocol) is the "Safe and Steady" option. Before it sends any data, it performs a "handshake" to make sure the other side is ready.

If a piece of data gets lost along the way, TCP will stop everything and resend it until the message is complete and perfect.

• Key Feature: Reliability.

• The Analogy: A Registered Courier. The delivery person won't leave until you sign for the package, ensuring nothing is missing.

UDP: The Live Broadcaster

UDP (User Datagram Protocol) is the "Fast and Furious" option. It doesn't wait for a handshake, and it doesn't care if you received the data or not. It just keeps "firing" data at you as fast as possible.

• Key Feature: Speed.

• The Analogy: A Live Radio Broadcast. If you miss a word the host said because of static, the host doesn't stop and repeat it; they just keep talking.

Key Differences

When to Use Which? (Real-World Examples)

Use TCP When Accuracy is Everything:

• Web Browsing: You don't want half an image or missing text on a blog.

• File Downloads: If one bit of a .exe file is missing, the program won't run.

• Emails: You need every word of the message to arrive.

Use UDP When Speed is Everything:

• Video Calls (Zoom/WhatsApp): If a tiny bit of data is lost, the screen might flicker, but the call continues in real-time.

• Online Gaming: You need to know where your opponent is right now, not where they were two seconds ago.

What is HTTP and Where Does it Fit?

This is where beginners often get confused. HTTP (Hypertext Transfer Protocol) is the "Language" we use to talk about websites.

However, HTTP is an Application-Level protocol. It doesn't actually move the data itself; it relies on TCP to do the heavy lifting.

Crucial Concept: HTTP sits on top of TCP. Think of HTTP as the Letter (the content) and TCP as the Envelope (the delivery method).

Is HTTP the same as TCP?

No! You can’t have a website without HTTP, but HTTP wouldn't work without TCP. HTTP tells the server what you want ("Give me index.html"), and TCP makes sure every piece of that file arrives at your computer without a single error.

Think of the internet as a massive highway system. To get from point A to point B, you need ramps, traffic lights, and security checkpoints. Let's break down the hardware that makes this possible.

Think of the internet like a highway. To get from point A to point B, you need traffic lights, security checkpoints and sopes. Let’s understand the hardware components which make this process possible.

The Modem: Your Translator

Used to connect your home to the Internet Service Provider (ISP).

A Modem (short for Modulator-Demodulator) is the bridge between your house and your ISP. Your computer only understands binary language (0s and 1s) but the cables which are placed outside of your house oftern use analog signals.

The Modem works liek a translator. It sits at the edge of your house to translate the outside world language into a language which your devices can understand.

The Router: The Traffic Police

The Router plays a crucial role to connect your home network (LAN) to the global network (WAN).

Once the Modem brings the interet to your house the Router task begins it uses IP address and a Routing Table to decide which is the best path for data to travel.

The Router is the Traffic Police. It looks at the destination address on every "packet" of data and directs it to the right place so that your sister’s Netflix movie doesn't end up on your laptop.

The Router is like Traffice Police. It figures out the diestination address on every packet and ensure to send the data on right place so that your friends’s movie doesn’t play on your device.

Switch vs. Hub: Smart vs. Simple

Their role is to connect multiple devices in your local network.

Both are used to connect multiple devices using Ethernet cables but their working behavior look different

• The Hub (The Simple One): When a Hub receives any data it doesn’t know the owner of data, it means it doesn’t know to whom it should send this data, So it sends it to every port. It is slower as compared to switch and has some security risks because everyone hears everyone else’s data.

• The Switch (The Smart One): A Switch learns the MAC Address (the unique hardware ID) of every conducted device. Because of knowing of each connected device MAC Address it only sends data to those which exacly need it.

A Hub is like a person shouting a message in a crowded room. A Switch is like a private text message sent directly to one person.

The Firewall: The Security Gate

On the basis of security rules firewall controls incoming and outgoing traffic.

A Firewall acts like a barrier between your internal network and the outside world. It looks at every packet of data then decide whether to let it in or block it based on set of some rules.

The Firewall is the Bouncer at a Club. If your name is not in the list then they don’t allow you to enter.

The Load Balancer: The Master Coordinator

Distributing traffic across multiple servers to ensure speed and reliability.

In large scale web applications a single server can not handle millions of users at once so a Load Balance sits in front of your servers to manage the incoming requests. It spreads the incoming requests to all the servers.

The Load Balancer is like a Toll Booth Coordinator. It directs cars into the shortest line so that traffic keeps moving smoothly and no one lane gets backed up.

Putting It All Together: A Real-World Setup

In a production environment for a software engineer, the journey looks like this:

1. A user's request hits the Internet.

2. It passes through a Firewall for safety.

3. A Load Balancer decides which server is the least busy.

4. A Router directs the request to the correct data center rack.

5. A Switch delivers the data to the specific physical server where your code is running.

Why This Matters for Developers

Understanding these devices helps you create better software. Suppose if your app is slow, it might not be your code. There could be a problem with the Load Balancer or a slowdown at the Switch. When we mention "The Cloud" ite means we're talking about thousands of these devices working together in a big warehouse.

Before we had version control tools like Git, developers managed their code using pendrive method. It was a very difficult time to collaborate and work easily on single project.

The Pendrive Analogy

Image gine you and your friends are working on a single project but you are not using control version you save your entire work on a pendrive and pass it to eachother in that room.

1. Developer One finishes the home page and hands the pendrive to Developer two.

2. Developer Two starts working on the card section.

3. While Developer One realizes they made a mistake in the card but they can't fix it because they don't have the pendrive anytime if the need to fix this error they need the pendrive.

Using a pendrive to track your work and project history is becomes very difficult for a team to work on a single project.

Problems Faced Before Version Control

Befor Version Control Systems developers faced mostly three major problems:

The "Final_v2_REALLY_FINAL" Folder

Without having a system which tracks your project history they used to create multiple folders to track their changes to know which file’s code works properly and the file directory looks like this.

• my_website_v1

• my_website_v2

• my_website_v2_final

• my_website_FIXED_dont_delete

By follow this pattern they got confused which file contains the working code.

The Overwrite Disaster

Imagine you and your friend both have a copy of a file named style.css. Suppose you change the color to blue and your friend change its font to Arial. If he sends his file to you and when you try to replace it your blue color is gone forever. There was no way to merge these two files.

The "Who Broke It?" Mystery

If we look at in a large team where a website might suddenly stop working. Before version control it was almost impossible to know who changed which line of code and why he changed it because the history of code was not tracked but now. You couldn’t undo the mistake because the previous records were not saved.

Why Version Control Became Mandatory

Nowadays version control is knows as the backbone of modern software engineering. It solved the pendrive problem that developers paced in early days.

• A Time Machine: You can jump back to any point in the history of your project.

• A Parallel Universe: You can work on a new feature in a "branch" without breaking the main website that users are currently visiting.

• A Master Ledger: It records exactly who changed every single character in the project.

Before version control, developers faced challenges such as managing multiple file versions, dealing with overwriting issues, and identifying the source of code errors. Version control provides essential features like project history tracking, branching for new features, and detailed change records, making it essentail in modern software engineering.

The .git Folder: The Brain of Your Project

Everything Git knows about your project is stored inside the .git directory it's not just a simple folder, your complete project history is being tracked and saved inside it. If you delete this file then Git lose the context means it will no longer recognize it as a git repo.

objects/: This is the most important part. It’s the "database" where all of your file content and history are stored.

refs/: This stores pointers to your commits (like where main or head is currently pointing).

index: This area is known as Staging Area. It’s a binary file used to track the messages that go into the commit.

The Three Git Objects: Blobs, Trees, and Commits

Git stores everything using three main types of objects. To keep things simple, think of them as Files, Folders, and Snapshots.

The Blob (The File Content)

Blob stands for Binary Large Object. Whenever you add a file to Git it doesn't care about the name of that file. It only cares about the content of that file then compresses that content and give it a unique ID. It generates a unique 40-character SHA-1 hash, known as an Object ID (OID). You can consider a Blob like a piece of paper but the paper doesn't have a name yet.

The Tree (The Folder Structure)

A Tree acts like a directory which map the Blob (file content) to their actual filenames. A Tree is like an envelope that says this piece of paper is called style.css.

Commits

A commit is like taking a shanpshot of your project at a specific point at a time. It points to a specific Tree and includes information of all the changes such as who made the change, when they made the change and why. It creates a chain of commit by rendering the history of commits.

How Git Tracks Changes

Git uses a math formula called SHA-1 to create a unique 40 character "Fingerprint" for every object. Enen though if you change a single line of code in your project the Fingerprint(Hash) changes completely.

The Internal Flow: Add and Commit

Let’s look what actually happens "backstage" when you run your two favorite commands:

When you run

git add <filename>

Git looks at your file.

• It creates a Blob object for that content.

• It updates the index file to say: "Hey, this Blob is ready to be committed."

When you run

git commit

• Git creates a Tree object to represent the structure of your project.

• It creates a Commit object that points to that Tree.

• It moves the HEAD pointer to this new commit.

Git is often treated like a series of magical commands including (push, pull, and commit). It is not as much complicated you just have to these basic commands to move forward.

Computers are great with numbers but they don't understand these plain texts on the other hand humans are great with names.

Name Resolution

Name Resolution is a the bridge between these two which is the process of converting a human readable domain google.com into a machine readable IP address (142.250.190.46). Just imagine if this didn't exist then you had to memorize hundreds of random numbers just to browse each site.

dig: command The DNS Detective

The dig (Domain information Groper) command is a powerful command line tool for querying DNS servers. It is used by developers and network administrators. It gives detailed information about domain names, IP addresses, and various DNS records such as A, MX and CNAME.

The Root Name Servers

dig . NS

The journey starts at the Root. The dot (.) in the command represents teh root of the entire internet. When you run dig . NS it means you are asking for the NS (Nameservers) which manage the top of the hierarchy. Globally there are 13 logical root server addresses. They don't know where is google.com but they know exactly who is the in charge of .com.

Once the Root Server tells you which "floor" to go to, you arrive at the TLD Name Servers. If you are looking for google.com, you must first talk to the .com TLD server.

What is a TLD Server?

A Top-Level Domain (TLD) server is a specialized DNS server that maintains the "master list" for a specific domain extension. Whether it’s .com, .net, .org, or specialized ones like .codes (which you use for your blog), every extension has its own dedicated set of TLD servers.

The Authoritative Name Servers

dig google.com NS

The authoritative DNS server is the final destination of the IP of the domain that you are actually finding. This is known as the boss. When you run dig google.com NS your see the servers that google has designated as the official source of truth. If a record is not found then it means it doesn't exist.

The Final Answer

dig google.com

Finally we perform the full lookup. When you run dig google.com you will be able to see the entire DNS Resolution Flow in action. The output will render an Answer Section with an A Record. This is the IP address your browser uses to finally knock on Google's door.

How This Works in the Real World

• When you type a URL into a browser a Recursive Resolver (usually provided by your ISP)
  does all the dig steps for you in milliseconds.

• It asks the Root where .com is.

• It asks the TLD where google.com is.

• It asks the Authoritative server for the IP address.

• It hands that IP to your browser.

Why This Matters for You

As a developer, understanding this hierarchy helps you debug Propagation. When you change your DNS records and things don't work immediately, it’s usually because a server somewhere in this chain is still "remembering" the old answer.

What is Git? (The Digital Safety Net)

Git is a Distributed Version Control System that records changes to a file or set of files over time so that you can recall specific versions late.

Just think it is like a Time Machine for your project. It keeps track of every single change you make to your code. If your project got a bug which cause your project stop working don’t worry you can simply travel back in time to yesterday when everything was working perfectly in your project. Because it is "distributed," every developer working on the project has a full copy of this history on their own computer.

Why is Git Used?

Collaboration:
Multiple people can work on a single project at the same time without overwriting each other’s work they can work at the same time on the same project.

Experimentation:
You can create a branch to experiment a new feature if it works properly then you can merge this to the actual project otherwise you can delete it if it doesn’t work.

Traceability:
You can see exactly all the changes of your code who changed which line of code and why he changed it you can track all the activities.

Git Basics: The Three Pillars

To understand git first of all you need to know three steps.

Working Directory: It is your actual place where you write your code.

Staging Area: The staging area is file it generally contained in your Git directory, now any changes that will be saved in your next commit they will be saved in this file.

Repository: This is the final stage where Git permanently store the history of your project forever. Your all commit will be stored here.

Essential Git Terminologies

Repository (Repo): The project folder that Git is tracking.
Commit: A snapshot of your code at a specific point in time. Think of it like a "Save Game" point.
Branch: A separate version of the main code.
HEAD: A pointer that tells you which branch or commit you are currently looking at.

Common Git Commands

Here is the workflow you will use 90% of the time:

1. Starting a Project

git init

This tells Git: "Start watching this folder." It creates a hidden .git folder that stores all your history.

2. Checking the Status

git status

This is the most helpful command. It tells you which files have changed and what room (Working, Staging, or Repo) they are in.

3. Adding to the Staging Area

git add filename.js
# Or use 'git add .' to add everything

This moves your changes from the Working Directory to the Staging Area.

4. Saving the Snapshot

git commit -m "Fixed the login button bug"

This moves your changes into the Repository. The -m stands for "message" always write a clear message so in future you know what you did!

5. Viewing the Timeline

git log

This shows you a list of every commit ever made in the project.

A Simple Developer Workflow

Imagine you are starting a new feature for your website:

1. Work: You edit index.html.

2. Check: You run git status to see your changes in red.

3. Stage: You run git add index.html. Now git status shows it in green.

4. Save: You run git commit -m "Added a new navigation bar".

5. Relax: Your work is now safely recorded in the "Vault."

cURL which stands for client URL and it can be written as curl. It is a command line tool used to transfer file with a URL syntax. It supports a number of protocols including HTTP, HTTPS, FTP and many more. While a browser is designed to show you a webpage but cURL is designed to give you the raw data.

Why Do Programmers Need cURL?

You might wonder: Why should we use terminal if browsers are already in the market. Programmers use cURL because:
It's Fast: You don't have to wait for images to load.
It’s Automatable: You can write a script that uses cURL to check a website every hour automatically.

It’s Great for APIs: When you're building an app that needs weather data or stock prices, before writing your actual code you use cURL to check your API.

Making Your First Request

Open your terminal (Command Prompt on Windows or Terminal on Mac/Linux) and type this simple command:

curl https://www.google.com

When you make a simple curl request by default it will always takes a GET request. Such as we are sending a cURL request to google.com so it asks the server for the default information about this URL and Google replies with the HTML data

Understanding Request and Response

Request: Any time we send a cURL request to google.com behind the scene cURL sends an HTTP request as a GET request to google.com.

Response: This is what server sends back to us means we receive in return. It usually includes two thing status code and body.

Status Code: A number telling you if it worked (e.g., 200 OK means success, 404 Not Found means the page is missing).

Body: The actual data that we get in return (i.e: HTML, JSON or TEXT).

Talking to APIs (GET vs. POST)

In the world of web development we mostly do two things get information or send information

The GET Request
The GET request is used to fetch data from the server as we know cURL uses GET request by default to fetch the data from the servers such as checking the current weather from an API.

The POST Request
You don't always get data sometimes you need to send data so you need to use POST request which is used to send data such as submitting a form or a comment on a blog post.

Common Mistakes Beginners Make

Forgetting the protocol like (http:// or https://).
Missing headers when calling APIs - Forgetting Content-Type or Authorization is a common issue.
Sending JSON without -d. Writing JSON but forgetting -d means no body is sent at all.
Using single quotes wrong on Windows - Single quotes work in Linux/macOS, but can break in Windows CMD.
Assuming curl behaves like Postman - Curl is raw and strict. No auto headers, no body formatting, no retries unless you ask for it.

The Internet’s Phonebook

Computer doesn't understand the domin name of sites instead it uses IP Addresses (which look like 172.217.14.78) to communicate. Every server has a unique IP Address. For humans it becomes difficult to memorize long strings so instead of remembering these IP Addresses we use DNS.

DNS (Domain Name System)

DNS is the bridge between humans and computers. It is called the phonebook of the internet. When you type a domain name in your browser your computer calls up the DNS phonebook and ask it about the IP address for that domain name. DNS looks it up then provide the IP address to connect your computer.

Why We Need Records

If DNS is a phonebook then a DNS Record is a single entry in that book. A domain name doesn’t only display a website. You might want to receive emails at that domian. Because a domain has different jobs so the phonebook needs different types of entries. You can not use an email record to load a website and you can not use a mailing address to make a phone call.

The “Manager” NS Record (Name Server)

Before finding the website we need to know the owner of the information.
The Problem: Who holds the master phonebook for this specific domain?
The Analogy: The Librarian.

The NS record doesn’t tell you where the website is. It only tell the internet which company manages your DNS settings. The registrar (like GoDaddy) sets themeselves as the manager whenever you buy a domain. Whenever you change NS records it means you are telling the internet that I have hired a new librarian go and ask them for my information.

The “Street Address” A Record

This is known as the most important record for getting a website to load.
The Problem: Where is the server hosting this website located (using the standsard internet language)?
The Analogy: Your house street address (e.g 123 Main Street).

The “A” stands for Address. It maps your domain name directly to an IPv4 Address (the standard numbers and dots addresses). To display your site to users you need an A record.

The “Modern GPS” AAAA Record

The Problem: The Internet is running out of standard addresses how do we use the newer system?
The Analogy: A highly precise, modern GPS coordinate.

The internet is upgrading to IPv6 which user much longer and complex address. The “AAAA” record maps the domain name to this modern IPv6 address. Nowadays many sites use these both A and AAAA records to make sure everyone can access the site.

The “Nickname” CNAME Record

The Problem: I want one name to just point to another name not a specific number.
The Analogy: A forwarding address, or a contact in your phone that just says “Hey dear.”

CNAME stands for “Cononical Name.” It creates an alias.

A common use is for the “www” version of your site. You often set up a CNAME for www.yourdomain.com that just points to your.domain.com. It tells the browser whatever the main domain does the “www” version should copy that.

Common Confusion: A vs. CNAME

An A Record connects a name to a phone number (IP Address). A CNAME Record connects a name to another name.

The “Post Office” MX Record

The Problem: If someone sends an email to @yourdomain.com, where it should be delivered?
The Analogy: The local post office branch that handles your mail.

MX stands for “mail Mail Exchange” record is a DNS entry that tells the internet which mail server is responsible for receiving email on behalf of your domain. Your website might live on a single server but your email might be handled by a different company (like Google Workspace or Microsoft 365).

Confusion Between NS vs MX Records
NS records manage your entire domain’s DNS settings and MX records only handle email routing.

The “Sticky Note” TXT Record

The Problem: I need to store some text information to prove ownership or secure my email.
The Analogy: A sticky note on a file containing extra details.

The DNS text (TXT) record lets a domain owner to enter text into the DNS and it stores the text in the form of strings. A single domain cah have many TXT records. It helps to authenticate weather a message is from a trusted source or not.

How do these work for a single website? Let’s imagine Asim’s site

Asim buys the domain balochcoder.com. Here is what his DNS setup might look like":

Ns Records: Point to her registrar, who manages the list.
A Record: Points balochcoder.com to the IP address of the server hosting his website pictures.
CNAME Record: Points www.balochcoder.com to balochcoder.com so both work perfectly.
MX Records: Point to Google's mail servers, so he receives email at subscriber@balochcoder.com.
TXT Record: A verification code he added to prove to Instagram that the website belongs to him.

All these records live peacefully side-by-side in the internet's phonebook to ensure that Asim’s site work properly.