Forem: Umar Hayat

Control Flow in JavaScript: If, Else, and Switch

Umar Hayat — Sat, 28 Mar 2026 13:54:04 +0000

🎙️ Introduction

Hey readers — welcome back 👋

I hope you’re doing great. After learning about variables and operators, you now know how to store data and perform operations on it. Good. Solid foundation.

By the way, this blog is part of the JavaScript series.

If you haven’t checked them out yet:

Blog 1 — JavaScript Variables
Blog 2 — JavaScript Operator

Now we move to something more interesting.

In this blog, we’ll learn about the flow of a program.

And by flow, I mean control flow — which is just a fancy way of saying decision-making in code.

With flow of program I mean, control flow. Control flow is just a fancy term of decision making.

In real life, we constantly make decisions:

If it’s raining → take an umbrella.
If marks are low → prepare for a lecture at home.
If salary hits → order food.

Programs work the same way.

We give them conditions.
If the condition is satisfied, they respond with a specific action.

Today, we’ll learn how to teach JavaScript to make decisions.

Let’s go 🚀

🚦 What is Control Flow?

Control Flow is the traffic director of programming — it determines which statements are executed in a program.

Default nature of JavaScript is to execute from top to bottom.

Control flow statements let us change the order, based on conditions, loops or keywords.

Developers tend to manage control flow statements based on their output conditions.

Whenever the conditions are matched, the program just branches out of the control flow and gets executed with result.

Simple Analogy:

There are various kinds of control flow statements for creating branches, we’ll discuss few upcoming topics.

🔍 The `if` and `if-else` Statement

⁜Basic `if` Syntax

Personally, it’s my favorite one. It feels like someone who overthinks everything.

“What if this?”
“What if that?”

The if(...) statement evaluates a condition in parenthesis and, if the result is true, executes a block of code.

Basic Syntax:

if (condition) {
    // code runs if condition is true
}

Example:

let marks = 35;
if(marks >= 40) {
    console.log("Congrats, your ass got saved from dad") // my parents are stict 🥲
}

In this example:

The condition is marks >= 40
We check → is 35 greater than or equal to 40?
The answer is false.
So the code inside the block does not run.

That’s it.

The condition can get complex too — but let’s not scare ourselves yet.

⁜The `if - else` Statement

We can this as a modified version of the if statement.

The else clause gives the operation to do other things if the condition is falsy.

Basic Syntax

if (condition) {
    // runs if true
} else {
    // runs if false
}

Example

let marks = 35;
if (marks >= 40) {
    console.log("Congrats, you passed!");
} else {
    console.log("Better luck next time... maybe bribe the professor with snacks?"); // I'd to pass 
}

Now we have two clear paths:

→ Condition true → first block runs

→ Condition false → else block runs

Only one of them executes.

Let me give you another example…

// You playing FIFA with your friend
let personWon = "friend"; // Ouch!!

if (personWon === "friend") {
  console.log("Blame the loss on lag, the controller, and the ref 🎮😤");
} else {
  console.log("Boo him. Tease him. Screenshot the score. Eternal reminder activated 📸🔥");
}

Guess the output of this one…

🪜The `else if` Ladder

Besides if and else, sometimes two conditions are just not enough.

if-else only gives us two paths.

When we need multiple checks, we use the else if ladder.

Instead of writing many separate if statements, we chain them together.

The conditions are checked from top to bottom.

As soon as JavaScript finds the first true condition, it runs that block — and stops checking further.

Basic Syntax

if (condition1) {
    // runs if condition1 is true
} else if (condition2) {
    // runs if condition2 is true
} else {
    // runs if none are true
}

Example:

let favSuperHero = "Spiderman";

if (favSuperHero === "Batman") {
  console.log("Personality Traits: Rich | Daring | Mysterious 🦇");
} else if (favSuperHero === "Tony Stark") {
  console.log("Personality Traits: Cool | Tech Genius | Confident 🤖");
} else if (favSuperHero === "Spiderman") {
  console.log("Personality Traits: Funny | Responsible | Relatable 🕷️");
} else {
  console.log("You didn’t choose a valid superhero.");
}

The code checks each condition one by one.

Since the value is "Spiderman", it skips the first two and runs the third block.

Order matters here.

Exercise:

let walletHasMoney = 42;
let feeling = "broke";

if (feeling === "generous" && walletHasMoney > 1000) {
  console.log("Tonight we feast like kings 👑");
} else if (feeling === "happy" && walletHasMoney > 200) {
  console.log("Fine. One snack each. Share properly.");
} else if (feeling === "sarcastic") {
  console.log("I support you emotionally, not financially.");
} else if (walletHasMoney <= 50) {
  console.log("Bro I’m one transaction away from homelessness.");
} else {
  console.log("Let’s pretend we already ate.");
}

Try to figure out which condition becomes true.

🔄 The `switch` Statement

When dealing with multiple conditions, we have another tool — the switch statement.

switch is often cleaner than writing many else if statements, especially when checking one variable against many specific values.

Basic Syntax:

switch (expression) {
    case value1:
        // code
        break;

    case value2:
        // code
        break;

    case value3:
        // code
        break;

    default:
        // default code
}

case → Represents a possible value.
break → Stops execution so the program doesn’t continue to the next case.
default → Runs if no case matches (like else).

Example

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of the week 😴");
    break;

  case "Friday":
    console.log("Weekend mood activated 🎉");
    break;

  case "Sunday":
    console.log("Rest day 😌");
    break;

  default:
    console.log("Just another regular day.");
}

JavaScript compares the value using strict equality (===).

Since day is "Monday", the first case runs.

If we forget break, execution continues to the next cases.

This is called fall-through.

If we forget break, execution continues to the next case — and we will see output:

Start of the week 😴
Weekend mood activated 🎉
Rest day 😌

🙃 Ending Thought

Control flow is where JavaScript actually starts to feel alive.

As real-life scenarios, we can now create decisions in our program. Until now, we were just creating variables and operating on them using operators.

But with if, else, else if, and switch, we’re teaching our program how to think — how to choose, react, and respond based on situations.

Thing of it as telling the computer:

“If this happens, do this.

If not, try something else.

And if nothing matches… handle it anyway.”

➡️ What to do next?

I would say, practice is the key.

The more you practice control flow, the better your problem-solving mindset becomes. You’ll start seeing real-life situations in conditions and branches — and that’s when you know you’re growing as a developer.

So keep experimenting.

Break the code. Fix it. Reorder conditions. Remove a break and see what happens.

Till then,

Keep Learning | Keep Breaking | Be Curious

PEACE OUT ✌️

JavaScript Operators: The Basics You Need to Know

Umar Hayat — Wed, 11 Mar 2026 10:22:28 +0000

🎙️ Introduction

Hey readers — welcome to my corner of the internet.

The last time we saw each other, we explored the basics of JavaScript variables and data types.

Blog Link — Variables and Datatypes

I started that blog from a complete beginner’s point of view, and honestly, that was intentional. When you’re learning JavaScript — or any programming language — your fundamentals matter a lot.

Learning a new language can feel exciting, but sometimes it can also throw confusing concepts at you out of nowhere. If your basics aren’t clear, those concepts can knock you out pretty quickly.

So instead of rushing ahead, we’re laying another strong foundation today.

Let’s talk about Operators.

🧰 Operators: The tools that work on your variables

In the previous blog, we talked about variables as boxes that store values.

But storing something in a box is only half the story.

Imagine keeping something in a box but never opening it or using what’s inside. That would feel like a waste, right?

The same thing happens with variables in programming. They store data in memory — but we need a way to work with that stored data.

That’s where operators come in.

Operators are special symbols or keywords that perform operations on values or variables — such as arithmetic, comparison, assignment, or logic.

Simple Analogy

Variables = Boxes that store values
Operators = Tools that work on those values

Example:

6+1

Here:

6 and 1 → Operands (values)
+       → Operator

Operands are simply the values or variables that operators work on.

JavaScript has many types of operators, but we’ll focus on the most common ones that developers use every day.

➕ Arithmetic Operators — Doing Math in JavaScript

Alright, let’s start with something familiar.

You’ve been using these since your school math days — the good old arithmetic operators.

Arithmetic Operators perform basic mathematical operations.

These are the ones developers use all the time.

Operator	Meaning
`+`	Addition
`-`	Subtraction
`*`	Multiplication
`/`	Division
`%`	Remainder (Modulus)

Example:

leta=10;
letb=3;

// addition
console.log(a+b);// 13

// subtraction
console.log(a-b);// 7

// multiplication
console.log(a*b);// 30

// division
console.log(a/b);// 3.33

// modulus → gives remainder of division
console.log(a%b);// 1

Let’s Focus on a Special One

⇒ Modulus Operator `%`

The modulus operator returns the remainder after division.

Example:

8%3// 2

Why 2?

Because:

3 goes into 8 two times → 3 × 2 = 6
8 - 6 = 2 (remainder)

And that remainder is what % returns.

Real-world use case

One common use of % is checking even or odd numbers.

Even numbers divide perfectly by 2.

letnumber=8;

console.log(number%2===0);
// true → number is even

Pretty useful, right?

Now that we can calculate values, let’s move on to comparing them.

🔍 Comparison Operators — Asking Questions in Code

Comparison operators help our code ask questions.

Comparison Operators compare two values and return a Boolean result — either true or false.

These are heavily used inside conditions and decision-making.

Common comparison operators include:

Operator	Meaning
`==`	Equal to
`===`	Strict equal
`!=`	Not equal
`>`	Greater than
`<`	Less than

Example:

letmyAge=25;
letdogAge=5;

if (myAge>dogAge) {
console.log("I’m older than the dog 🐶");
}else {
console.log("Wait… is the dog older?!");
}

Another example:

letcatFavorite="fish";
letofferedFood="broccoli";

if (catFavorite!=offeredFood) {
console.log("The cat gives you a judgmental stare 😾");
}else {
console.log("The cat is happy and purrs 🐱");
}

⚠️ Important Concept: `==` vs `===`

This is one of the first important JavaScript lessons beginners learn.

`==` (Loose Equality)

Compares values
Allows type conversion (type coercion)

Example:

5=="5"// true
0==false// true
null==undefined// true

JavaScript converts values internally before comparing them.

`===` (Strict Equality)

Compares both value and type
Does not perform type conversion

Example:

5==="5"// false (number vs string)
0===false// false (number vs boolean)
null===undefined// false

Best Practice

Most developers prefer using === because it avoids unexpected type conversions and keeps code predictable.

So whenever possible, it’s safer to rely on strict equality.

Alright, now that we can compare values, let’s combine multiple conditions.

🧠 Logical & Assignment Operators — Making decisions and Updating Values

Logical Operators

Logical operators help us combine conditions and make decisions in code.

They are commonly used with if statements, loops, and other control flows.

Operator	Name	Description
&&	AND	Returns `true` if both operands are true

!	NOT	Inverts the Boolean value

Example

// Life with mom 😭

let momHome = true;
let badGrades = true;
let cleanedRoom = false;

// AND
console.log(momHome && badGrades);
// Mom is home AND you got bad grades = Trouble 😭

// OR
console.log(badGrades || !cleanedRoom);
// Bad grades OR messy room = Still trouble 😬

// NOT
console.log(!cleanedRoom);
// NOT cleaned room = Mom is angry 🧹

Logical operators make it possible to build complex conditions in our programs.

Assignment Operators

Now let’s talk about updating variables

This is a basic assignment:

let score = 10;
score = score + 5;

But the JavaScript has shortcuts that make this neater:

score += 5; // same as score =  score + 5

Common Assignment Operators:

Operator	Meaning
`=`	Assign value
`+=`	Add and assign
`-=`	Subtract and assign

Example

let points = 20;

points += 10; // 30
points -= 5;  // 25

These shortcuts make your code shorter and cleaner.

📝 Assignment Section

1️⃣ Perform arithmetic operations:

let a = 15;
let b = 4;

/*
Calculate:
i) a + b
ii) a - b
iii) a * b
iv) a % b

*/

2️⃣ Compare values

console.log(10 == "10");
console.log(10 === "10");

// Observe the differences

3️⃣ Logical condition

let age = 20;
let hasTicket = true;

console.log(age > 18 && hasTicket); // guess the output...

🎯 Ending Thought

Operators are the actions of JavaScript.

They allow us to perform calculations, compare values, combine conditions, and update variables based on our needs.

Without operators, variables would simply sit there in memory doing nothing.

If variables are boxes that store your data, then operators are the tools you use to work with what’s inside those boxes.

And once you start combining variables with the right operators, that’s when your programs actually start doing something useful.

That’s it folks.

Till then —

KEEP LEARNING | BE CURIOUS | PEACE OUT ✌️

JavaScript Variables and Data Types Explained (Beginner-Friendly Guide)

Umar Hayat — Thu, 26 Feb 2026 06:00:36 +0000

🎙️ Introduction

Hey readers — welcome back to the series 👋

Recently, I’ve been writing a lot of JavaScript code. And the more I understand it, the more fascinated I become.

Trust me when I say this — JavaScript isn’t just an ordinary programming language. It feels like a side character in a TV show who got one unexpected chance to shine… and ended up becoming the hero.

It’s not a perfect language. It has quirks. But the audacity of developers constantly improving it makes it powerful.

Before we dive into JavaScript variables and data types, let’s take a quick look at how it all started.

Let’s get going 🚀

🧐 JavaScript and Its origins

In its early days, JavaScript was created to serve browsers. It worked alongside HTML and CSS to make web pages interactive.

Back then, it wasn’t designed for large applications. Many quick decisions were made — and some of those decisions caused strange behaviors. Later, these became known as JavaScript quirks.

Everything changed in 2009 with the release of Node.js. JavaScript moved beyond the browser and into backend development.

Now developers could build full-fledged server-side applications using JavaScript.

Today, JavaScript powers:

Frontend applications
Backend systems
Mobile apps
Desktop applications
Even smart devices

The language is standardized under ECMAScript by ECMA International.

Despite its quirks, JavaScript keeps evolving — and it remains the language of the web.

Now that you know the story, let’s have our first proper handshake with JavaScript by learning its key concepts:

👉 Variables and Data Types in JavaScript

📦 1. Variables — The “Boxes” That Store Information

Most of the time, a JavaScript application needs to work on the information.

For example:

💬 Chat Application — storing user info, messages, chat history
🎮 Game — storing username, score, enemies defeated, power-ups collected

To work on such applications we use, variables.

Generic definition:

A variable is a named container used to store data values that can be referenced and manipulated in a program.

Simple analogy

A variable is like a box of with a name tag. We put something inside (a value), and whenever we need it, we look inside the box.

Why we need variables?

Reuse data without rewriting it
Track changes (e.g., user’s score)
Make code readable and dynamic

Example:

let name = "Hayat"; // stores text
let age = 5; // stores a number
age = 10; // updates the value (now age = 10)

🛠️ 2. Declaring Variables — `var`, `let`, and `const`

So far, we’ve understood what variables are and how they are used.

Now, let’s look at the three ways to declare variables in JavaScript.

var
- Can be redeclared — We can declare the same variable again.
- Can be updated — Values can be changed
- Function scoped — Works inside a function, not block ({}) scoped.
- Old way — Used before ES6 (not used now)

```jsx
var x = 10; 
var x = 20; // allowed
x = 30; // allowed
```

let
- Cannot be redeclared — In the same scope
- Can be updated — Value can be changed
- Blocked scoped — Works only inside {} block
- Modern way — Introduced in ES6 (recommended)

```jsx
let y = 10;
y = 20; // allowed
// let y = 30; => not allowed
```

const

- Cannot be redeclared — In same scope
- Cannot be updated — Value cannot changed
- Block scoped — Same as let.
- Best for fixed values — Use when value should not change.

```jsx
const z  = 10;
// z = 20; => not allowed
```

⭐ Pro Tips:

Default to const
- Always start by declaring variables with const
- It prevents accidental reassignment
- Makes the code safer and predictable
Use let only when you know the value will change
- If a variable need to be updated later
- Common in loops or counters
Avoid using var
- var is scoped, can cause unexpected behavior.
- Modern JavaScript prefers let and const

🔤 3. Primitive Data Types — The Type of Data Inside the Box

After declaring variables, the next step is understanding what kind of data they store.

A wise line from my mentor:

Writing code becomes easy when you know what datatype you are operating on. ~ Hitesh Choudhary

There are more data types in JavaScript, but we’ll focus on the essential ones.

Number

let n = 123;
n = 12.345;
const bigInt = 1234567890123456789012345678901234567890n; // bigInt (+ve|-ve)

The number type represents both integer and floating-point numbers.

There are many operations for numbers, e.g. *, division /, addition +, subtraction -, and so on.

String

let str = "Hello"; // double quotes
let str2 = 'Single quotes are ok too'; // single quotes
let phrase = `can embed another ${str}`; // Backticks (embed)

A string in JavaScript is a sequence of characters used to represent text. Anything written inside quotes ("", '') is considered a string.

Boolean

let isHuman = true; // yes is Human
let isAlien = false; // no, not an alien

A Boolean has only two values: true or false. It is mainly used for decision making. {Explicitly no value}

Boolean are used in:

Conditional
Comparison
Logical

Null

let yourPrivacy = null // you don't have any privacy, sorry!

The null is special datatype which represents “nothing”, “empty” or “value unknown”.

The above code states that yourPrivacy is unknown.

Undefined

let replyFromCrush; // which is hard for me personally

The undefined is also a special value and stands apart. It makes a type of its own just like null.

Undefined means it has been declared but value has not been assigned.

The above code states that replyFromCrush exists but has no value.

I have many other things today, but this is a blog, not a book so keeping things concise hehe.

🌍 4. Understanding Scope — Where Your Variables Live

This is one concept that quietly causes bugs if ignored.

Generic definition:

Scope determines where variables are accessible in your code.

Simple Definition:

Scope decides in which "room" a variable life and who can access it.

The house Analogy:

Your program is a house .

Each room is a scope.

The living room = Global Scope
The bedroom = Function Scope
The cupboard inside the bedroom = Block Scope

🏠 The Living Room (Global Scope)

If you keep a TV in a living room:
```
let tv = "Sony"; // variable in Global Scope
```
Everyone in the house can access it.

✔️ Bedroom can access it

✔️ Kitchen can access it

✔️ Balcony can access it

Because it's a global scope.
🛏️ The Bedroom (Function Scope)

Now inside the bedroom you keep a laptop.
```
function bedroom() {
    let laptop = "MacBook" // variable inside a function scope
}
```
Only people inside the bedroom can use this laptop.

If someone in living room asks for laptop → Error because the laptop is inside that room only
```
// console.log(laptop) => ❌ Gives Error
```
✔️ Bedroom can access laptop

❌ Kitchen can’t access it

❌ Balcony can’t access it

3. 🗄️ The Cupboard (Block Scope)

Inside the room, there’s a cupboard.

function bedroom() {
  if (true) {
    let secretMoney = 1000; // variable in block scope
  }
}

The money stays inside the cupboard.

✔ Accessible inside the cupboard

❌ Not accessible in the bedroom

❌ Not accessible in the living room

The Rule

Things in the big room (global) → everyone can access
Things in the smaller room (function) → only inside the room
Things in the cupboard (block) → only inside that block

🫧 Ending Thought

That’s its folks —

🗝️ Key Takeaways

JavaScript is an amazing language, despite of being quirky.
Variables are labelled boxes or say it as containers for data.
Different versions for creating based on various purposes
Primitive types define what kind of data you’re storing.
Scope determines where a variable is accessible.

🚀 What to Do Next?

Create your own variables.
Experiment with var, let, and const.
Try different data types.
Print results using console.log().

Practice is where understanding becomes mastery.

Till then,

Stay Productive, Stay Curious!! Peach Out ✌️

Thinking in JavaScript

Umar Hayat — Sun, 22 Feb 2026 04:39:24 +0000

Hey fellow readers…

Long time no see.

Thank you all for the amazing response to the networking series. I didn’t know that even in this generation of AI and instant solutions, people would still prefer blogs for real knowledge.

I guess quality content always finds its audience.

With that incredible response, I’m starting another blog series on the topic mentioned above:

THINKING IN JS

This series will cover topics related to JavaScript like:

Variables & Data Types
Control Flow
JavaScript Arrays — Advanced Arrays
Functions — Arrow Functions
And more along the way…

Let’s see where it takes us.

Honestly speaking…

I’m just a learner documenting my journey and learning through these series. I hope to provide the best resources and guide you through my blog.

And if something goes off track, I know you’ve got my back — the comment section is always open.

Understanding HTML Tags and Elements

Umar Hayat — Sat, 14 Feb 2026 11:09:44 +0000

🌟 Introduction

Hey Reader —

Lately, I’ve been tight on schedule and barely finding time to publish blogs.

But I’ve always believed something simple:

If you truly love doing something, you’ll find a way.

So here I am again — sharing another blog, this time about something people often underestimate… HTML.

Yes, HTML.

Most people rush past it. They want React, Node, AI, Web3 — all the shiny stuff. But here’s the truth:

If your HTML fundamentals are weak, everything built on top of it becomes shaky.

And here’s something even more serious — writing clean, semantic HTML can save companies thousands of dollars in accessibility-related legal issues. Poor structure isn’t just messy — it can become a compliance problem.

So today, let’s clear the fog.

🦴 HTML: The skeleton of web

Let’s start simple.

What is HTML?

HTML (HyperText Markup Language) is not a programming language.

It is a markup language used to structure content on the web.

Think of a webpage like a human body:

🦴 HTML → Skeleton (structure)
🎨 CSS → Appearance (style)
🧠 JavaScript → Behavior (logic)

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

It defines:

Headings
Paragraphs
Images
Links
Lists
Sections

In short — it tells the browser what exists on the page.

A Little History

HTML was created in 1991 by Tim Berners-Lee while working at CERN.

His goal wasn’t just formatting documents.

He wanted a universal way to structure information and make it accessible across computer systems worldwide.

It started as a tool for knowledge sharing.

And today, it powers the entire web.

🧱 HTML tags: the building blocks

Now that we understand why HTML matters, let’s zoom into the real stars — tags.

The very first version of HTML included only 18 tags like:

<title> , <p>, <h1> - <h6>, <ul>, <li>.

Today, HTML has over 140 tags.

Relax.
You’ll regularly use maybe 20–30 of them.

Basic Structure of a Tag:

<opening-tag> Content goes here <closing-tag>

Example:

<p> Hello World </p>

Here’s what’s happening:

<p> → Opening tag
Hello World → Content
</p> → Closing tag

🔍Tag vs Elements: spot the difference

Just remember the simple definition about them:

Tags : A tag is the instruction written inside angle brackets.

And…

Elements: An element is the complete structure:

Let me give a demonstration through simple Image:

If you want to know more about the Tags - Elements.

Check out 👉 : What is the difference between HTML tags and elements? - Stack Overflow

🏷️ Opening, Closing & Self-Closing Tags

Let me explain more about Tags (btw I love to over express myself, hehehe)

Opening & Closing Tags
- Consider a duo tags. (one in start & other at the end)
- Opening Tag: Starts an element. Written inside angle brackets. Example
- Closing Tag: Ends an element. Same as the opening tag but with a forward slash. Example
- Together, they wrap around content.

Self Closing Tags
- Some tags don’t need a closing tag because they don’t wrap content.
- Example: <img> / <br> / <hr>

📚 Common HTML Tags You Should Know

Here are the essential ones every beginner must understand:

Tag	Usage
`<h1>`–`<h6>`	Headings (largest to smallest)
`<p>`	Paragraph
`<a>`	Link
`<img>`	Image
`<br>`	Line break
`<ul>`	Unordered list
`<ol>`	Ordered list
`<li>`	List item
`<div>`	Block container
`<span>`	Inline container

Master these first.

Everything else builds from here.

🎭 How elements behave

So, I can see you really getting the hang of the tags.

No doubt that you got yourself an amazing writer 🙃

In the browser blog, we understood how the HTML parser works and parses HTML.

There are few HTML tags, where it forces the elements to behave differently on the screen. Let’s have a look at them.

Block Elements:
- Block elements always starts with new line
- It takes the full width of parent container
- Used for larger structures like sections, paragraphs, or headings
- Examples <div>, <p>, <h1>–<h6>, <section>
Inline Elements:
- Inline elements do not start with new line
- It takes as much width as the content
- Used for styling or linking small parts of text.
- Examples <span>, <a>, <strong>, <em>

Quick Comparison

Block → Full-width structure

Inline → Small content inside structure

Understanding this saves you from layout confusion later.

🔎 Pro Tip: Inspect Real HTML

Here’s something powerful.

Right-click on any website → Click “Inspect”.

You’ll see the actual HTML behind it.

Browsers read HTML line by line and build a structure called the DOM (Document Object Model). That structure is what gets rendered on your screen.

The internet is basically one giant open classroom.

Use it.

💡 Ending thought

That’s the foundation of HTML — simple, but powerful.

People often underestimate it because it looks easy.

But writing clean, semantic, well-structured HTML is a skill.

It improves:

Accessibility
SEO
Performance
Maintainability

And yes — it can prevent legal headaches too.

I’m still improving as a writer, just like you’re improving as a developer.

We build step by step.

Till then…

Stay curious.

Keep building.

And respect the skeleton before decorating the body.

PEACE OUT ✌️

How a Browser Works: A Beginner-Friendly Guide to Browser Internals

Umar Hayat — Mon, 09 Feb 2026 07:48:46 +0000

🎙️ Introduction

You know the funny thing about marathons?

Once you survive a few, you start thinking you’re David Goggins.

I just wrapped up a full networking series — DNS, IPs, connections, the whole deal.

You can read it here: Networking Blog Series Recap - DEV Community

But there was one elephant in the room.

We talked about how browsers connect to the internet —

never about how browsers actually show things on your screen.

That question bothered me.

So if it bothered you too… welcome. 😄

🧠 What a Browser Really Is

We talk a lot about IPs, DNS, and servers.

But what actually happens inside the browser?

🧭 Browser ≠ Website Opener

(More than just a website opener)

What is a browser?
A browser acts as a network client, connecting users to servers and turning responses into visuals.

A browser is best thought of as a network client.

It:

Connects users to servers
Requests data over the network
Translates raw responses into something humans can understand

So why isn’t a browser just a “website opener”?

It actively participates in networking
Multiple internal components work together
It acts as a bridge between client and server
It turns text and files into visuals and interactions

⌨️ Address bar → URL → request

Let’s zoom into the simplest flow:

Address bar → URL → Request → Response → Page

Step:

You type a URL in the address bar
The browser sends a request to a server
The server responds with data (HTML, CSS, JS, images)
The browser processes that data and shows you a page

Simple on the surface.

Wild underneath.

🏗️ Main parts of a browser (high-level overview)

No jargon overload. Just the essentials.

🌐 Network Layer:

Handles all communication with servers
Sends HTTP/HTTPS requests
Receives HTML, CSS, JS, images
Basically: the browser’s internet department

⚙️ Browser Engine

The coordinator of everything
Passes data between:
- Networking layer
- Rendering engine
- JavaScript engine
Decides what happens next

🎨 Rendering Engine

The main worker behind what you see
Parses HTML and CSS
Builds the DOM
Paints pixels on the screen

Without this, the web would just be text files.

🧩 JavaScript Engine

Executes JavaScript code
Enables interactivity and dynamic behavior
Handles logic, events, and updates

This is why websites feel alive.

📦 Data Storage

Stores cookies, cache, and local data
Helps pages load faster
Prevents repeating expensive network work

Yes, your browser remembers things. On purpose.

🖥️ User Interface (UI)

Address bar, tabs, buttons, bookmarks
Everything you directly interact with

The visible layer of a very invisible machine.

⚙️ Browser Engine and Rendering engine

They sound similar. They’re not.

Aspect	Browser Engine	Rendering Engine
Role	Coordinates the browser	Draws the page
Focus	Control, communication, flow	Visual output
Handles	Networking, UI, JS engine	HTML, CSS, layout
Examples	Blink, Gecko, WebKit	WebCore, Gecko layout
Output	Decisions	Pixels

Think of it like this:

Browser engine = manager
Rendering engine = artist

🌐 How Browser understands Web Page

(From internet files to structured meaning)

Ever wondered what happens after the browser receives files?

How does code turn into structure?

📡 How HTML, CSS, and JS are fetched

Let’s keep this super simple.

The core flow:

Browser fetches HTML, CSS, JS
HTML is parsed → DOM
CSS is parsed → CSSOM
DOM + CSSOM → Render Tree
Layout & paint → pixels on screen

That’s the browser lifecycle in five steps.

📄 Turning HTML into DOM

DOM (Document Object Model)
A tree-line structure representing HTML

Example:

<html>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Becomes a tree:

html
 └── body
      └── h1 ("Hello")

The rendering engine builds this structure while parsing HTML.

Fun fact:
HTML parsing is forgiving.
Errors don’t crash the browser — they get handled gracefully.

🎨 Turning CSS into CSSOM

CSSOM (CSS Object Model):
Another tree structure, but for styles.

Example:

```css
h1 { color: red; font-size: 20px; }
```

Becomes rules like:

```powershell
h1
 ├── color: red
 └── font-size: 20px
```

How it happens:

Browser finds the <link> tag
Fetches the CSS file
Parses it into the CSSOM

Styles now have structure.

🧮 What parsing means (simple Example)

I’ve used the word parsing a lot — time to demystify it.

Parsing means:

Converting raw text into a structured format a computer can understand.

Just like how:

A sentence has grammar
A math expression has structure

Parsing turns chaos into meaning.

Not magic. Just rules.

🖥️ How a Page Is Drawn on the screen

(Turning structure into pixels)

This is where everything comes together.

🔗 How DOM and CSSOM work together

Think like a developer:

HTML = skeleton
CSS = makeup

Or more formally:

DOM = structure
CSSOM = style

DOM + CSSOM = Render Tree

Render Tree:

You may I ask what is render tree

Render Tree:

Contains only visible elements
Knows what goes where
Knows what color, size, and style

It updates whenever DOM or CSSOM changes.

📐 How layout decides size and position

First step of rendering.

Browser calculates:

Element sizes
Positions
Spacing

This process is called layout.

When something changes (resize, DOM update):

Layout recalculates
This is called reflow

🖌️ How painting adds colors and text

Second step of rendering.

Now the browser:

Applies colors
Draws text
Adds borders, shadows, images

Think of sketch → then coloring.

🟦 How everything finally shows up on screen

Final step.

Layers are combined
Pixels are pushed to the screen
Page becomes visible

And this process can happen many times per second.

Browsers are fast. Like, scary fast.

☺️ Ending Thought

Browsers were ignored for a long time — treated as just tools.

But once you understand what’s happening underneath,

you realize they’re more like operating systems for the web.

One of my teachers once said:

I would like to quote my teacher here

“Browsers are so powerful that plain HTML is enough to light up pixels on a screen.”

And honestly…

That is kind of magical.

That’s it, folks —

see you in the next marathon 🏃‍♂️

Networking Blog Series Recap

Umar Hayat — Sat, 31 Jan 2026 20:34:25 +0000

Oh boii!! 😄

That was one heck of a blog marathon.

This is my first-ever tech blog series, and I went straight for networking—because why not start with the thing that literally connects the entire world, right?

This series is a journey.

Not just definitions and diagrams, but imagining how devices talk, how packets travel, how DNS plays matchmaker, and how the internet quietly runs our lives while we’re busy doom-scrolling.

If you’ve ever wondered:

What actually happens when you type a URL?
Why TCP insists on handshakes like a polite human 🤝
Why UDP just… sends it and moves on 🚀
What curl is really doing behind that terminal command

Then yeah—this series is for you.

If you’re done with “internet magic ✨” explanations and want to understand the real plumbing behind the web, dive in 👇

📘 Networking Blog Series

Blog 1: Understanding Network Devices
Blog 2: How DNS Resolution Works
Blog 3: DNS Record Types Explained
Blog 4: TCP vs UDP: When to Use What, and How TCP Relates to HTTP
Blog 5: TCP 3-Way Handshake
Blog 6: Getting Started with cURL

My goal is simple:

to turn “the internet just works” into “ohhh… that’s how it works.”

If even one person walks away less confused and more curious, mission accomplished 🚀

Networking Blog Series Recap

Umar Hayat — Sat, 31 Jan 2026 20:34:25 +0000

Oh boii!! 😄

That was one heck of a blog marathon.

This is my first-ever tech blog series, and I went straight for networking—because why not start with the thing that literally connects the entire world, right?

If you’ve ever wondered:

What actually happens when you type a URL?
Why TCP insists on handshakes like a polite human 🤝
Why UDP just… sends it and moves on 🚀
What curl is really doing behind that terminal command

Then yeah—this series is for you.

If you’re done with “internet magic ✨” explanations and want to understand the real plumbing behind the web, dive in 👇

📘 Networking Blog Series

Blog 1: Understanding Network Devices
Blog 2: How DNS Resolution Works
Blog 3: DNS Record Types Explained
Blog 4: TCP vs UDP: When to Use What, and How TCP Relates to HTTP
Blog 5: TCP 3-Way Handshake
Blog 6: Getting Started with cURL

My goal is simple:

to turn “the internet just works” into “ohhh… that’s how it works.”

If even one person walks away less confused and more curious, mission accomplished 🚀

Getting Started with cURL

Umar Hayat — Sat, 31 Jan 2026 17:14:29 +0000

🎙️ Introduction

Hey reader — welcome back 👋

I tried to change the NPC line… but failed again 🙄

This is my 9th and final blog in the Networking series, and honestly, it’s been a great learning experience for me too. The goal of this series was simple:

to understand the gears and mechanisms behind something as simple as a search working.

If you’ve been following along from the start — that’s amazing 🙌

If not, no worries. These blogs are always here to help you build a solid foundation in networking.

Blog 1: Understanding Network Devices - DEV Community

Blog 2: How DNS Resolution Works - DEV Community

Blog 3: DNS Record Types Explained - DEV Community

Blog 4: TCP vs UDP: When to Use What, and How TCP Relates to HTTP - DEV Community

Blog 5: TCP 3-way Handshake - DEV Community

For this final blog, I’ll introduce you to another tool — just like dig — that developers absolutely love: cURL.

💻 How we talk to Servers?

In the previous blogs, we learned how data travels from LAN → WAN, the devices involved, how domain names map to IP addresses, and how TCP and UDP work.

Now it’s time to focus on how we actually talk to servers.

🗄️ What Is a Server?

A server is a computer that provides information or services to other computers.

In today’s world, every app or service you use — Instagram, Google, Netflix — runs on servers somewhere.

Your phone or laptop acts as a client, requesting data from these servers.

🧑 Client → Server → Response

For example:

You open a website
Your browser sends a request to a web server
The server sends a response back
Your browser displays it for you

That request–response cycle is the backbone of the internet.

🌐 Using cURL to Talk to a Server

Developers often need to communicate with servers without a browser — for testing, debugging, or understanding raw responses.

That’s where cURL comes in.

⚙️ What Is cURL?

cURL (Client URL) is a command-line tool that lets a client (your computer) communicate with a server using a URL to fetch or send data.

In simple terms:

cURL runs in your terminal
It sends requests to servers
It shows you the raw responses

You can use it to:

Fetch web pages
Download files
Test APIs

🔬 Your First cURL command

Let’s try a simple example.

What this means:

curl → invokes the tool
I → fetches only the response headers
http://www.google.com → the target URL

This command:

Sends a request to Google’s server
Receives a response containing:
- Status code (like 200 OK)
- Headers (metadata about the response)

The response will look something like this:

🎉 A Fun cURL Example

Try this command:

curl [ascii.live/parrot](http://ascii.live/parrot)

Copy-paste it into your terminal…

and boom — you’ll see a parrot dancing🦜💃

To stop the madness, press CTRL + C.

More info here:

GitHub – ascii-live

Yes, cURL can be fun too.

📃 cURL and API’s

Now let’s talk about APIs.

An API (Application Programming Interface) is a server designed to communicate with programs instead of people.

🔑 Basic API Requests with cURL

GET — Receive Data

curl https://api.example.com/users

This fetches a list of users from the API.

POST — Send Data

curl -X POST https://api.example.com/users \
-H"Content-Type: application/json" \
-d'{"name":"Alice","age":25}'

This sends new user data to the API.

📌 Why Developers Use cURL for APIs

Quickly test endpoints
No need to write application code
Easily inspect status codes, headers, and responses
Great for debugging backend issues

😗 Ending Thought

This blog series has been one heck of a journey.

We covered the fundamentals that give you a real understanding of how the internet works behind the scenes.

If you’ve been reading consistently — thank you.

If not, give it a try. It will genuinely change how you look at the web.

Till then —

See ya, Amigos 🦩

TCP 3-way Handshake

Umar Hayat — Fri, 30 Jan 2026 17:35:42 +0000

🎙️ Introduction

Hey Reader — welcome back

Okay, that did sound like an NPC. Let’s fix that.

In last blog, we really had an intense discussions about the internet rules.

If you’ve been following along, you should already have a rough mental map of:

how devices connect,
how DNS finds servers,
and how TCP and UDP choose how data moves.

If not, quick catch-up here:

Blog 1: Understanding Network Devices - DEV Community

Blog 2: How DNS Resolution Works - DEV Community

Blog 3: DNS Record Types Explained - DEV Community

Blog 4: TCP vs UDP: When to Use What, and How TCP Relates to HTTP - DEV Community

The more I learn about this stuff, the more I understand why the internet is considered one of humanity’s greatest inventions.
Sometimes it honestly feels like I’m debugging packets with Iron Man holograms floating around me.

Anyway — before I drift again — let’s talk TCP.

🧨 When Data has no Rules

🤔 Internet with & without rules

Imagine a highway.

No traffic lights.

No lanes.

No signs.

Just vibes.

Every car rushes forward trying to win. Very GTA energy. Fun for chaos — terrible for reaching a destination.

That’s what the internet looks like without rules.

On the internet, cars are data packets.

And the “rules” are called protocols.

With protocols:

Data arrives reliably
Packets stay in order
No duplication
Errors are detected and corrected

Without protocols:

Packets get lost
Order breaks
Duplicates appear
Corrupted data slips through

Chaos. Every time.

🚫 Why Internet cannot rely on “best effort” alone

The internet’s core design is best effort delivery.

That means:

The network tries to deliver packets
But it makes zero promises

If a packet is lost, delayed, duplicated, or reordered — the network shrugs and moves on.

That’s fine for:

video streaming
voice calls
casual browsing

But it’s disastrous for:

file downloads
emails
online payments

When correctness matters, best effort isn’t enough.

That’s where TCP enters.

📌 TCP and 3-way handshake

As we have seen TCP in the last blog and discussed its meaning and full-form and where to use TCP , I won’t be able to repeat myself.

Don’t worry I will explain TCP here but in short…

You are always welcomed to checkout the last blog as well the series

🌐 TCP: Reliable Connections

TCP (Transmission Control Protocol) sits at the transport layer and is the backbone of reliable internet communication.

Key traits:

Connection-oriented
Reliable delivery
Ordered data transfer
No duplication

TCP doesn’t just send data.

It builds trust first.

🤝 Why a handshake is Needed

Before sending data, TCP asks one simple question:

“Are you there — and are you ready?”

The handshake:

Confirms both sides are reachable
Synchronizes sequence numbers
Establishes reliability rules

Only after this agreement does data flow.

🔄️ TCP 3-Way Handshake

The TCP 3-way handshake establishes a reliable connection before data transfer begins.

The three steps:

SYN

Client: “I want to connect. Here’s my starting sequence number.”
SYN-ACK

Server: “I hear you. Here’s mine — and I acknowledge yours.”
ACK

Client: “Acknowledged. Let’s begin.”

After this, the connection is live.

Why three steps?

Both sides confirm readiness
Both sides acknowledge each other
No assumptions, no guessing

That’s reliability by design.

This guarantees both devices are fully ready and “in sync”

🗣️ Conversation Analogy:

Client: “Hey, can we talk? My first word will be number 100.” (SYN)
Server: “Sure! I heard you. My first word will be number 300.” (SYN-ACK)
Client: “Got it, I’ll listen starting at 300.” (ACK)

📦 Reliable Data Transfer and Connection Closure:

Data Transfer After Handshake

Once the handshake is established, data flows in segments
Each segments has a unique number known as sequence number, receiver acknowledges receipt.

Role of Sequence Numbers and Ack’s

Sequence number ensure data arrives in order
Acks confirms successful delivery
If an ACK is missing, the sender knows something is wrong

Detecting Packet Loss & prevention

TCP uses timeouts and duplicates ACK’s to detect lost packets
If a packet is lost, TCP retransmits it to maintain reliability

Ensuring Correctness

TCP checks data integrity using checksums.
If corrupted data is detected, it is discarded and retransmitted.

😁 Ending Thought

I’m trying my best to stay consistent with this series, but time management is starting to hit hard.
So for the next few blogs, the long introductions and ending thoughts might take a back seat.

The focus will stay the same though:
understanding how the internet actually works — clearly, honestly, and without magic.

Humor may go quiet for a bit, but the learning won’t.

TCP vs UDP: When to Use What, and How TCP Relates to HTTP

Umar Hayat — Wed, 28 Jan 2026 22:08:04 +0000

🎙️ Introduction

Hey Reader — welcome back

The opening line already sounds like an NPC, never mind.

This networking series has been stretching my brain in the best way possible.

Every post peels back another layer of how the internet actually works — not the magical version we imagine, but the engineered one.

So far, we’ve talked about:

Blog 1: Understanding Network Devices - DEV Community

Blog 2: How DNS Resolution Works - DEV Community

Blog 3: DNS Record Types Explained - DEV Community

Now comes the next question:

Once the destination is known… how does data actually travel?

That’s where TCP and UDP come in — the rules of the internet.

🌐 TCP vs UDP — Two Ways Data Travels

Humans love rules.
Turns out, the internet does too.

Once computers started talking to each other at scale, rules became unavoidable.

Without rules, data would:

Get lost
Arrive out of order
Or never arrive at all

TCP and UDP are the transport-layer rules that prevent that chaos.

📜 Why Internet Needs Rules?

The internet is like a busy highway.

Without traffic rules:

Cars would crash
Some would never reach their destination
Others would arrive completely out of order

On the internet, those “cars” are data packets, and the rules they follow live in the transport layer.

🔎 What happens After DNS

When DNS finishes its job, a human-readable domain like example.com is resolved into an IP address like 93.184.216.34

Once that’s done:

The destination is known

Now the real work begins: moving data

At this point, the transport layer decides:

Should this data arrive reliably and in order?

Or should it arrive as fast as possible, even if some is lost?

The answer determines whether TCP or UDP is used.

🚚 What are TCP and UDP?

The transport layer includes several protocols, but the internet mostly relies on two:

TCP — Transmission Control Protocol
UDP — User Datagram Protocol

They solve the same problem — moving data — but with very different priorities.

✅ TCP: Transmission Control Protocol

Before jumping into a definition, the name itself explains a lot.

Transmission

Sending data from one system to another
Data is split into smaller packets

Control

TCP doesn’t send data blindly
It controls the flow using:
- Sequencing (ordering packets)
- Error checking
- Acknowledgements
- Flow control

Protocol

A shared set of rules that both sides understand

In short:

TCP is a rulebook that ensures data is transmitted reliably, in order, and correctly, even if it means being slower.

⚡ UDP: User Datagram Protocol

UDP takes a very different approach.

User

Refers to the application sending or receiving data
The application decides how to handle loss

Datagram

Each packet is independent
No guarantee of order or delivery

Protocol

A lightweight set of rules for fast communication

In short:

UDP is a fast, connectionless protocol that sacrifices reliability for speed — ideal for real-time communication.

🔑 Key Differences

Feature	TCP	UDP
Connection	Connection-oriented	Connectionless
Reliability	Guaranteed delivery	Best-effort
Ordering	Maintained	Not guaranteed
Speed	Slower	Faster
Overhead	Higher	Minimal
Common Uses	Web, email, files	Streaming, gaming, calls

In short:

TCP ⇒ safe and reliable, but slower

UDP ⇒ fast and lightweight, but less reliable

🧭 When to use TCP vs UDP

The choice depends on one question:

What matters more — correctness or speed?

🖥️ When to Use TCP

Use TCP when correctness matters more than speed:

🌍 Web browsing (HTTP/HTTPS)
📂 File transfers (FTP, SFTP)
📧 Emails (SMTP, IMAP, POP3)
🖥️ Remote access (SSH)

If losing or reordering data breaks meaning, TCP is the right choice.

🎮 When to Use UDP

Use UDP when speed matters more than perfection:

🎥 Video streaming
🎮 Online gaming
📞 Voice and video calls
🌐 DNS lookups

In real-time systems, late data is often worse than missing data.

📑 What HTTP Fits

Here’s where beginners often get confused

HTTP is not a transport protocol.

HTTP operates at the application layer
It defines how clients and servers communicate
It relies on transport protocols underneath

🧩 What HTTP Is (and Isn’t)

✅ A protocol for client–server communication
❌ Not responsible for packet delivery
❌ Not the same as TCP or UDP

HTTP defines:

Request methods (GET, POST)
Headers and status codes
Request–response structure

🔗 How HTTP Relates to TCP

HTTP does not replace TCP — it runs on top of it.

The flow looks like this:

Browser creates an HTTP request
HTTP passes data to TCP
TCP ensures reliable delivery
IP routes packets across the network

In simple terms:

HTTP defines what is said.
TCP defines how it safely arrives.

This is why:

HTTP ≠ TCP
HTTP depends on a transport protocol
Most HTTP traffic uses TCP

(HTTP/3 uses QUIC over UDP — a story for later)

🤯 Ending Thought

The beauty of the internet lies in its layers.

Each protocol focuses on one responsibility:

DNS finds where
TCP and UDP decide how
HTTP defines what

So the next time a webpage loads, a video streams, or a game responds instantly — remember:

It’s not magic.

It’s rules, layers, and very good engineering.

See you in the next blog. 🚀

DNS Record Types Explained

Umar Hayat — Wed, 28 Jan 2026 10:03:05 +0000

🎙️ Introduction:

Hey reader — welcome back.

Wait… (huff) let me breathe.

This blog series is really giving me marathon vibes. Not because I’m running out of idea ideas — but because turning understanding into clear writing takes time, patience, and a lot of rewrites

As promised — I’m here with another network blog.

This is the third post in my networking series:

Blog 1: Networking Devices

Blog 2: How DNS resolution works

In the last blog, we explored how DNS works behind the scenes.
This time, we’ll go one layer deeper and understand DNS record types — the actual information DNS stores and serves.

Goal: give you technical jargon with simple meaning.

Let’s go 🚀

🌐 Why DNS Needs Records (Not Just Names)

Like we discussed in the last blog — the internet works with numbers, even though we use names.

But just having names and numbers isn’t enough.

The internet needs a reliable way to decide:

where to send web traffic
where to send emails
who controls a domain
how a domain proves its identity

DNS records exist to answer different questions about the domain.

Think of DNS records as instructions, not just mappings.

They tell the internet what to do with different kinds of requests.

❓ What is DNS? (Quick Revision)

Let’s quickly revise from the last blog.

DNS (Domain Name System) converts human-friendly domain names into IP addresses so browsers can load websites.

Humans prefer names. Machines prefer numbers.

Example:

When you search google.com, your system eventually needs something like: 142.250.190.14 to connect it further for information.

That’s how the connection actually happens.

We won’t go deeper here — we already covered that in — How DNS resolution works

Here, we’ll focus on DNS records.

📑 Why DNS Records are needed

A modern domain does many jobs, not just one.

The same domain may need to:

serve a website
route emails
act as an alias for another name
verify ownership for services
define who controls its DNS data

So one domain needs multiple kinds of information.

That’s where DNS records come in.

One domain contains many categories of information — that’s where DNS records comes into play.

Each DNS record solves one specific problem:

web traffic
email traffic
authority
verification
redirection

Instead of one overloaded answer, DNS gives clear, separate answers — using different record types.

🧩 The Core DNS Records (And the Problems They Solve)

Imagine if a domain handled only one type of data.

Email traffic would collide with web traffic.
Aliases would break.
Ownership would be unclear.

To keep things organized and scalable, DNS uses different record types to route different kinds of traffic.

Let’s go through them one by one.

🏛️ NS Record — Who is responsible for Domain

I explained NS records in my previous blog, but they’re important enough to revisit.

The NS (Name Server) record answers one simple question:

“Who should I ask next for the real DNS information?”

NS records define authority.

They tell the internet which name servers are responsible for a domain’s DNS data.

In simple terms:

NS records don’t point to websites
They don’t point to mail servers
They point to decision-makers

Example flow:

A client requests google.com
DNS checks which name servers are authoritative
The request is delegated to ns1.google.com
That server provides the next answer

In short:

NS records delegate responsibility
They don’t point to websites or mail servers

🖥️ A Record — Domain to IPv4 Address

The A record is the most common DNS record.

Its job is simple:

Map a domain name to an IPv4 address.

Example:

google.com → 142.250.190.14

When your browser loads a website, this is usually the record it ultimately needs.

Without A records, computers wouldn’t know where to send web requests.

📱 AAAA Record — Domain to IPv6 Address

The AAAA record does the same job as an A record — but with IPv6.

A record → IPv4

AAAA record → IPv6

IPv6 exists because IPv4 addresses are limited and mostly exhausted.

Important points:

AAAA does not replace A records
Both can exist together
Browsers prefer IPv6 if available

For most users, this happens automatically.

🔗 CNAME Record — One Name Pointing to Another

CNAME record - (Canonical Name record) maps one domain name (an alias) to another domain name (the canonical/true name)

Instead of pointing to an IP address, it points to another domain.

Example:

`www.example.com → example.com`

DNS basically says:

“Go look at the real name instead.”

Analogy:

CNAME = nickname

A/AAAA = real address

📬 MX Record — How Email Finds Your Mail Server

MX record - (Mail Exchange record) record tells the world which mail servers are responsible for receiving email for a domain.

Web traffic and email traffic are handled differently

It tells the world which mail server is responsible for receiving emails for a domain.
Instead of pointing to an IP address, it points to mail server’s domain name.

In short: An MX record tells email where to go.

📝 TXT Record — Extra Information and Verification

TXT record - Text record

Originally, it was meant for human-readable notes.
Today, it’s mostly used by machines.

It lets you add any text information to your domain’s DNS
It doesn’t point to IP addresses or domains
It holds text used for verification and security

In short:

TXT records store proof and instructions

🔄 How All DNS Records Work Together for One Website

Individually, each record is simple.

Together, they form a coordinated system.

Each one handles a specific responsibility, but together they ensure that:

websites load correctly
emails are delivered
domains are secure
ownership is clear

🌍 A DNS Setup for a single domain

A typical DNS setup includes:

A / AAAA → Web server IPs
CNAME → Aliases (like www)
MX → Email routing
TXT → Verification and security
NS → Authoritative name servers

Simple Example

For example.com:

A → 93.184.216.34
CNAME → www.example.com → example.com
MX → mail.example.com
TXT → "v=spf1 include:_spf.google.com ~all"
NS → ns1.hosting.com, ns2.hosting.com

🤔 Common Beginner Confusions

If this feels heavy, that’s normal.

DNS takes time to fully click.

Let’s clear some common doubts.

IPv4 vs IPv6
- IPv4: 32-bit addresses (~4.3 billion)
- IPv6: 128-bit addresses (~3.4×10³⁸)

IPv6 is more scalable, efficient, and future-proof.

A vs CNAME
- A record → domain to IP address
- CNAME → domain to another domain

A = direct address

CNAME = nickname

NS vs MX
- NS → who controls the domain’s DNS
- MX → who handles email for the domain
NS → the “phonebook” that stores all DNS records

MX → the “mailroom” that directs email to the right server

💡Ending Thought

DNS isn’t magic — it’s a system of organized answers.

Each DNS record has a clear role:

A and AAAA connect domains to servers
CNAME handles aliases
MX routes email
TXT verifies and secures
NS defines authority

They work quietly in the background — like hardworking parents — making sure everything reaches the right place.

And honestly, that’s what good internet infrastructure looks like.

Forem: Umar Hayat

Control Flow in JavaScript: If, Else, and Switch

🎙️ Introduction

🚦 What is Control Flow?

Simple Analogy:

🔍 The if and if-else Statement

⁜Basic if Syntax

⁜The if - else Statement

🪜The else if Ladder

🔄 The switch Statement

🙃 Ending Thought

➡️ What to do next?

JavaScript Operators: The Basics You Need to Know

🎙️ Introduction

🧰 Operators: The tools that work on your variables

Simple Analogy

➕ Arithmetic Operators — Doing Math in JavaScript

Let’s Focus on a Special One

⇒ Modulus Operator %

Real-world use case

🔍 Comparison Operators — Asking Questions in Code

⚠️ Important Concept: == vs ===

== (Loose Equality)

=== (Strict Equality)

Best Practice

🧠 Logical & Assignment Operators — Making decisions and Updating Values

Logical Operators

Assignment Operators

📝 Assignment Section

1️⃣ Perform arithmetic operations:

2️⃣ Compare values

3️⃣ Logical condition

🎯 Ending Thought

JavaScript Variables and Data Types Explained (Beginner-Friendly Guide)

🎙️ Introduction

🧐 JavaScript and Its origins

📦 1. Variables — The “Boxes” That Store Information

Generic definition:

Simple analogy

Why we need variables?

🛠️ 2. Declaring Variables — var, let, and const

⭐ Pro Tips:

🔤 3. Primitive Data Types — The Type of Data Inside the Box

Number

String

Boolean

Null

Undefined

🌍 4. Understanding Scope — Where Your Variables Live

Generic definition:

Simple Definition:

The house Analogy:

3. 🗄️ The Cupboard (Block Scope)

The Rule

🫧 Ending Thought

🗝️ Key Takeaways

🚀 What to Do Next?

Thinking in JavaScript

Understanding HTML Tags and Elements

🌟 Introduction

🦴 HTML: The skeleton of web

A Little History

🧱 HTML tags: the building blocks

🔍Tag vs Elements: spot the difference

🏷️ Opening, Closing & Self-Closing Tags

📚 Common HTML Tags You Should Know

🎭 How elements behave

Quick Comparison

🔎 Pro Tip: Inspect Real HTML

💡 Ending thought

How a Browser Works: A Beginner-Friendly Guide to Browser Internals

🎙️ Introduction

🧠 What a Browser Really Is

🧭 Browser ≠ Website Opener

⌨️ Address bar → URL → request

🏗️ Main parts of a browser (high-level overview)

⚙️ Browser Engine

🎨 Rendering Engine

🧩 JavaScript Engine

📦 Data Storage

🔍 The `if` and `if-else` Statement

⁜Basic `if` Syntax

⁜The `if - else` Statement

🪜The `else if` Ladder

🔄 The `switch` Statement

⇒ Modulus Operator `%`

⚠️ Important Concept: `==` vs `===`

`==` (Loose Equality)

`===` (Strict Equality)

🛠️ 2. Declaring Variables — `var`, `let`, and `const`