When writing JavaScript, you’ll often repeat the same logic multiple times. For example, imagine you frequently need to add two numbers.

Without functions, you might write something like this again and again:

let result = 5 + 3;
console.log(result);

Now imagine you need to do this 20 times in different parts of your program.

Instead of repeating the logic, we create a function.

A function is simply a reusable block of code that performs a specific task.

Think of a function like a machine: you give it some input, it performs a task, and it returns an output.

Example:

function add(a, b) {
  return a + b;
}

console.log(add(5, 3)); // 8

Here, the function add takes two numbers and returns their sum. Instead of rewriting the logic, we just call the function whenever needed.

Function Declaration

A function declaration is the most common way beginners learn to create functions.

Syntax

function functionName(parameters) {
  // code to execute
}

Example: multiplying two numbers.

function multiply(a, b) {
  return a * b;
}

console.log(multiply(4, 5)); // 20

Here’s what’s happening:

• function is the keyword used to define a function.

• multiply is the name of the function.

• a and b are parameters.

• The function returns the result of a * b.

Once declared, this function can be used anywhere in your program.

Function Expression

A function expression is another way to create functions. Instead of declaring a function directly, we store the function inside a variable.

Syntax

let variableName = function(parameters) {
  // code
};

Example using the same multiplication logic:

let multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

The result is the same, but the way the function is defined is slightly different.

Here:

• A function is created.

• That function is assigned to the variable multiply.

This means the variable now holds the function.

Declaration vs Expression (Side-by-Side)

Let’s compare both approaches.

Function Declaration

function multiply(a, b) {
  return a * b;
}

Function Expression

let multiply = function(a, b) {
  return a * b;
};

Both functions work the same way when called:

console.log(multiply(3, 4)); // 12

But there are some important differences between them.

Key Differences

The biggest difference comes from how JavaScript loads and executes code.

1. Hoisting Behavior

Function declarations are hoisted, but function expressions are not.

Hoisting simply means JavaScript moves certain declarations to the top of the file before execution.

Let’s see what this means in practice.

Calling a Function Before It Is Defined

Example with Function Declaration

console.log(multiply(3, 4));

function multiply(a, b) {
  return a * b;
}

This works perfectly.

Output:

12

Even though the function is written later in the code, JavaScript already knows about it because function declarations are hoisted.

Example with Function Expression

console.log(multiply(3, 4));

let multiply = function(a, b) {
  return a * b;
};

This will cause an error.

Why?

Because the variable multiply does not contain the function yet when JavaScript tries to run the first line.

In simple terms:

• Function declaration → available before definition

• Function expression → available only after assignment

When Should You Use Each?

Both approaches are useful, and developers use them for different reasons.

Use Function Declarations When:

• You want functions available anywhere in the file

• The function represents a core piece of logic

• You want simpler, cleaner syntax

Example:

function calculateTotal(price, tax) {
  return price + tax;
}

Use Function Expressions When:

• You want to store functions inside variables

• You want functions to behave like values

• You plan to pass the function as an argument later

Example:

let greet = function(name) {
  return "Hello " + name;
};

Function expressions are also common in callbacks and modern JavaScript patterns.

When you start writing small JavaScript programs, you often store data in variables or simple objects. But as your applications grow, you begin to notice a problem: a lot of your code starts repeating itself.

Imagine building a student management system. Every student has a name, age, and maybe a function that shows their details.

You might write something like this:

let student1 = { name: "Amit", age: 20 };
let student2 = { name: "Priya", age: 21 };
let student3 = { name: "Rahul", age: 22 };

This works, but if you have 50 or 100 students, repeating the same structure again and again becomes messy and hard to maintain.

This is where Object-Oriented Programming (OOP) helps. OOP allows us to create a blueprint for objects so we can easily generate multiple similar objects without rewriting the same code.

The Blueprint Analogy: Understanding the Core Idea

A helpful way to understand OOP is through a real-world analogy.

Think about how cars are manufactured. Before a car is built, engineers design a blueprint. This blueprint describes things like the engine, wheels, and body structure.

Once the blueprint exists, the factory can create many cars from it.

In programming, the idea is similar:

• The blueprint is called a class

• The actual cars created from the blueprint are called objects

So instead of manually defining each object, we create a class and generate many objects from it.

What is a Class in JavaScript?

A class in JavaScript is simply a template used to create objects. It describes what properties an object should have and what actions it can perform.

Here is the basic syntax:

class Student {

}

At this point, the class does not contain any data yet. It is just a structure that we will use to create objects later.

Classes help us organize code and define reusable structures for our objects.

Creating Objects from a Class

Once a class is defined, we can create objects from it using the new keyword. Each object created from a class is called an instance.

For example:

let student1 = new Student();

This creates a new object based on the Student class.

However, this object currently has no information such as name or age. To assign values when an object is created, we use something called a constructor.

The Constructor Method

The constructor is a special method inside a class. It runs automatically whenever a new object is created.

Its main job is to initialize properties for that object.

Example:

class Student {

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

}

Here’s what happens:

• The constructor receives name and age as parameters.

• this refers to the current object being created.

• The values are stored as properties of that object.

Now we can create multiple students easily:

let student1 = new Student("Amit", 20);
let student2 = new Student("Priya", 21);

Each object now has its own data.

Methods Inside a Class

Classes can also contain methods, which are simply functions defined inside the class. Methods describe what an object can do.

For example, we might want each student to print their details.

class Student {

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  showDetails() {
    console.log(this.name + " is " + this.age + " years old");
  }

}

Now we can use this method with any student object:

let student1 = new Student("Amit", 20);
let student2 = new Student("Priya", 21);

student1.showDetails();
student2.showDetails();

Even though we created two different students, the same method works for both. This is one of the key benefits of OOP: code reusability.

The Basic Idea of Encapsulation

Encapsulation may sound complicated, but the idea is simple.

Encapsulation means keeping related data and functions together inside a class.

In the Student class:

• name and age are data

• showDetails() is a function that works with that data

Both are grouped together inside the class.

You can think of encapsulation like a capsule that holds everything related in one place. This makes code easier to organize and understand.

Why OOP Matters?

Object-Oriented Programming helps developers structure their programs in a cleaner and more logical way. Instead of repeating code, we create reusable blueprints and generate objects whenever needed.

This approach makes programs easier to expand, maintain, and understand—especially in larger applications.

In JavaScript, objects are used to store related information together in a structured way. If you think about real-world things, most of them have multiple pieces of information associated with them. For example, a person has a name, age, and city. Instead of storing these values in separate variables, JavaScript allows us to group them into a single object.

An object is essentially a collection of key-value pairs. The key describes the property, and the value stores the information.

For example, if you wanted to describe a person, you might store their name, age, and city inside one object. This makes your data easier to organize and manage.

Objects are especially useful when dealing with structured data such as user profiles, products in a store, or student records.

Creating Objects

Objects in JavaScript are created using curly braces {}. Inside the braces, you define properties as key-value pairs.

Example:

let student = {
  name: "Rahul",
  age: 20,
  course: "Computer Science"
};

Here, student is the object.
name, age, and course are keys, and the values are "Rahul", 20, and "Computer Science".

This structure clearly groups all the information related to the student in one place.

Accessing Properties (Dot Notation and Bracket Notation)

Once an object is created, you often need to access its properties. JavaScript provides two ways to do this.

The most common method is dot notation.

console.log(student.name);

Output:

Rahul

Another way is bracket notation, where the property name is written as a string inside brackets.

console.log(student["age"]);

Output:

20

Both approaches access the same value. Dot notation is simpler and commonly used, while bracket notation is useful when property names are dynamic or stored in variables.

Updating Object Properties

Object properties can be updated by assigning a new value to the key.

Example:

student.age = 21;

Now the object becomes:

{
  name: "Rahul",
  age: 21,
  course: "Computer Science"
}

You can confirm the change by printing the object.

console.log(student);

Updating properties allows objects to reflect changes as your program runs.

Adding and Deleting Properties

JavaScript objects are flexible, which means you can add new properties anytime.

Example:

student.city = "Delhi";

Now the object contains a new key:

{
  name: "Rahul",
  age: 21,
  course: "Computer Science",
  city: "Delhi"
}

You can also remove properties using the delete keyword.

delete student.course;

After this operation, the course property will no longer exist in the object.

Looping Through Object Keys

Sometimes you need to go through all the properties of an object. JavaScript provides a simple way to do this using a for...in loop.

Example:

for (let key in student) {
  console.log(key, student[key]);
}

If the object looks like this:

let student = {
  name: "Rahul",
  age: 21,
  city: "Delhi"
};

The loop will print:

name Rahul
age 21
city Delhi

The loop accesses each key in the object and then retrieves the corresponding value.

Objects vs Arrays

It is helpful to understand how objects differ from arrays.

Arrays store values in an ordered list, where each value is accessed using a numeric index.

Objects store values using named keys, which describe what the data represents.

For example:

Array:

let fruits = ["Apple", "Banana", "Mango"];

Object:

let person = {
  name: "Rahul",
  age: 21,
  city: "Delhi"
};

Arrays are ideal for lists, while objects are better for representing structured information about something.

Example: Student Object

Let’s put everything together.

let student = {
  name: "Aman",
  age: 19,
  course: "Engineering"
};

student.age = 20;
student.city = "Mumbai";

for (let key in student) {
  console.log(key, student[key]);
}

Above example creates an object, updates a property, adds a new property, and then loops through all keys and values.

When writing programs, we often need to store multiple related values. Imagine keeping a list of your favorite movies, a list of marks, or a list of daily tasks. If you stored each value in a separate variable, your code would quickly become messy.

For example:

let movie1 = "Inception";
let movie2 = "Interstellar";
let movie3 = "The Dark Knight";

This works for a few values, but it becomes difficult to manage as the list grows. Arrays solve this problem by allowing you to store multiple values in a single structure.

An array is simply a collection of values stored in order. Each value inside the array has a position, which allows you to access it later.

How to Create an Array?

Creating an array in JavaScript is simple. You use square brackets and place values inside them, separated by commas.

Example:

let movies = ["Inception", "Interstellar", "The Dark Knight", "Avatar", "Titanic"];

Here, the variable movies holds a list of five movie titles. Instead of managing five separate variables, everything is stored in one organized structure.

Arrays can store different types of values, but most of the time they contain values of the same kind, like a list of numbers or names.

Accessing Elements Using Index

Each item in an array has a position called an index. In JavaScript, indexing starts from 0, not 1.

This means the first element has index 0, the second has index 1, and so on.

Example:

console.log(movies[0]);

Output:

Inception

If you want to access the third movie:

console.log(movies[2]);

Output:

The Dark Knight

Because indexing starts at 0, the position number is always one less than the element's order.

To get the last element:

console.log(movies[4]);

Updating Elements

Array values can be changed by assigning a new value to a specific index.

Example:

movies[2] = "Oppenheimer";

Now the array becomes:

["Inception", "Interstellar", "Oppenheimer", "Avatar", "Titanic"]

You can verify this by printing the array.

console.log(movies);

Updating elements like this allows arrays to change as your program runs.

Array Length Property

JavaScript provides a built-in property called length that tells you how many elements are in an array.

Example:

console.log(movies.length);

Output:

5

This property becomes especially useful when looping through arrays, because it tells the program when to stop.

Basic Looping Over Arrays

Often you need to go through each element in an array and perform some action. A simple for loop can be used for this.

Example:

for (let i = 0; i < movies.length; i++) {
  console.log(movies[i]);
}

Here’s what happens step by step. The loop starts with i = 0, which represents the first index. The program prints the element at that position. Then i increases by one each time until it reaches the end of the array.

This loop will print every movie in the list.

Example Putting Everything Together

Let’s combine everything we learned.

let movies = ["Inception", "Interstellar", "The Dark Knight", "Avatar", "Titanic"];

console.log("First movie:", movies[0]);
console.log("Last movie:", movies[movies.length - 1]);

movies[1] = "Oppenheimer";

console.log("Updated array:", movies);

for (let i = 0; i < movies.length; i++) {
  console.log(movies[i]);
}

Above example creates an array, accesses elements, updates one value, and loops through all the elements.

When writing a program, we often need a place to store information. This information could be a person’s name, age, score, or whether someone is logged in. In JavaScript, variables are used to store such data.

A simple way to understand a variable is to think of it as a box that stores information. The box has a label so we can find it later, and inside the box we keep the value.

For example, imagine you want to store someone’s name. You create a variable and put the name inside it.

let name = "Ravi";

Here, name is the label of the box, and "Ravi" is the value stored inside it. Later in the program, you can use this variable whenever you need that information.

How to Declare Variables Using var, let, and const?

In JavaScript, variables can be declared using three keywords: var, let, and const.

The most common way today is using let.

let age = 20;

You can also use var, which was the older way to declare variables.

var city = "Mumbai";

The third keyword is const, which is used when the value should not change.

const country = "India";

All three keywords create variables, but they behave slightly differently in terms of scope and whether their values can change.

Primitive Data Types

Variables can store different kinds of data. JavaScript has several basic data types called primitive data types.

String

A string represents text. It is written inside quotes.

let name = "Anita";

This is useful for storing names, messages, or any text.

Number

Numbers represent numeric values.

let age = 25;

JavaScript uses the same type for integers and decimal numbers.

let price = 99.99;

Boolean

A boolean represents either true or false.

let isStudent = true;

Booleans are often used in conditions and decision-making.

Null

null represents an intentional empty value.

let result = null;

This means the variable exists but currently holds no meaningful value.

Undefined

undefined means a variable has been declared but not assigned a value.

let score;
console.log(score);

Since no value was assigned, the output will be undefined.

Basic Difference Between var, let, and const

The main differences between these keywords are related to how their values can change and how they behave in scope.

var was used in older JavaScript and can sometimes behave unpredictably because of its wider scope.

let allows the value to change later in the program.

let age = 20;
age = 21;

This works because let variables can be updated.

const is used for values that should remain constant.

const country = "India";

If you try to change it:

country = "USA";

JavaScript will show an error because const values cannot be reassigned.

What Is Scope?

Scope describes where a variable can be accessed in your code.

Imagine writing something inside a room. Only people inside that room can see it. People outside cannot access it.

In programming, a variable declared inside a block of code is usually only available within that block.

For example:

if (true) {
  let message = "Hello";
  console.log(message);
}

Inside the block, the variable works normally. But outside the block, it cannot be accessed.

This helps keep variables organized and prevents accidental changes in other parts of the program.

Let’s create a few variables and print them.

let name = "Rahul";
let age = 22;
let isStudent = true;

console.log(name);
console.log(age);
console.log(isStudent);

Output in the console:

Rahul
22
true

Now try changing the value of age.

age = 23;
console.log(age);

This works because let allows reassignment.

Now try doing the same with const.

const country = "India";
country = "USA";

JavaScript will throw an error because const variables cannot be reassigned.

In JavaScript, operators are symbols that perform actions on values. They allow you to calculate numbers, compare values, combine conditions, or update variables.

You already use operators in everyday math. For example, when you write 5 + 3, the + symbol tells the computer to add the numbers. Programming works the same way. Operators help the program manipulate data and make decisions.

Most JavaScript programs rely heavily on operators, especially when working with calculations and conditions.

Arithmetic Operators (+, -, *, /, %)

Arithmetic operators perform basic mathematical operations. They work exactly like the math you already know.

For example:

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1

Here is what each operator does:

+ adds numbers
- subtracts numbers
* multiplies numbers
/ divides numbers
% returns the remainder of a division

The remainder operator % is especially useful when checking things like whether a number is even or odd.

Example:

let number = 8;

console.log(number % 2); // 0 means even

Comparison Operators (==, ===, !=, >, <)

Comparison operators are used to compare two values. They return a result that is either true or false.

For example:

let a = 10;
let b = 5;

console.log(a > b);  // true
console.log(a < b);  // false
console.log(a != b); // true

The two most commonly confused operators are == and ===.

Example:

console.log(5 == "5");   // true
console.log(5 === "5");  // false

The == operator checks if the values are equal after converting types if necessary.

The === operator checks both the value and the type. Since "5" is a string and 5 is a number, they are not strictly equal.

In modern JavaScript, developers usually prefer === because it avoids unexpected type conversions.

Logical Operators (&&, ||, !)

Logical operators allow you to combine or modify conditions. They are often used inside decision-making statements like if.

The && operator means AND. Both conditions must be true.

let age = 20;
let hasID = true;

console.log(age >= 18 && hasID); // true

The || operator means OR. At least one condition must be true.

let isWeekend = true;
let isHoliday = false;

console.log(isWeekend || isHoliday); // true

The ! operator means NOT. It reverses a condition.

let loggedIn = false;

console.log(!loggedIn); // true

Logical operators are powerful because they allow multiple conditions to work together.

Assignment Operators (=, +=, -=)

Assignment operators are used to store values in variables.

The simplest one is =.

let score = 10;

This assigns the value 10 to the variable score.

JavaScript also provides shortcut assignment operators that combine assignment with arithmetic.

Example:

let score = 10;

score += 5;
console.log(score); // 15

This is the same as writing:

score = score + 5;

Similarly:

score -= 3;
console.log(score); // 12

This is equivalent to:

score = score - 3;

These shortcuts make code shorter and easier to read when updating values repeatedly.

In everyday life, we constantly make decisions. If it’s raining, we take an umbrella. If it’s late, we hurry. If it’s the weekend, we relax. Programming works in a similar way.

Control flow is simply the way a program decides which code should run and which should not. Instead of executing every line blindly, a program checks conditions and chooses a path based on the result.

In JavaScript, the most common tools for making decisions are if, else, and switch.

The if Statement

The if statement is the simplest way to make a decision in code. It checks whether a condition is true. If it is, the code inside the block runs.

Imagine checking whether a number is positive.

let number = 10;

if (number > 0) {
  console.log("The number is positive");
}

Here’s how the program runs step by step. First, JavaScript evaluates the condition number > 0. Since 10 is greater than 0, the condition becomes true. Because the condition is true, the message inside the block is printed.

If the condition were false, the code inside the block would simply be skipped.

The if-else Statement

Sometimes we want the program to do something different when the condition is false. That’s where else comes in.

let age = 16;

if (age >= 18) {
  console.log("You can vote");
} else {
  console.log("You cannot vote yet");
}

In this example, the program first checks if the age is 18 or more. If the condition is true, it prints that the person can vote. Otherwise, the code inside the else block runs.

This allows the program to choose between two possible paths.

The else if Ladder

Sometimes a program needs to check multiple conditions. In that case, we can use an else if ladder.

Let’s write a program that checks whether a number is positive, negative, or zero.

let number = -5;

if (number > 0) {
  console.log("The number is positive");
} else if (number < 0) {
  console.log("The number is negative");
} else {
  console.log("The number is zero");
}

Here’s how this works. The program first checks if the number is greater than zero. If not, it moves to the next condition and checks if the number is less than zero. If neither condition is true, the program runs the final else block.

This step-by-step checking continues until one condition matches.

The switch Statement

The switch statement is another way to handle multiple possible outcomes. It is often used when a variable can have several known values.

Let’s write a program that prints the day of the week.

let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Invalid day");
}

The program compares the value of day with each case. When it finds a match, that block runs.

The break statement is very important here. It stops the program from continuing to the next case. Without break, JavaScript would keep running the remaining cases even after finding a match.

When to Use Switch vs If-Else

Both structures help control program flow, but they are used in slightly different situations.

The if-else structure is useful when conditions involve comparisons like greater than, less than, or complex logical checks.

The switch statement works best when a variable is compared against many fixed values, such as menu options, days of the week, or status codes.

Choosing the right structure makes your code easier to read and understand.

Let’s walk through the array methods you’ll use almost daily.

For all examples, open your browser console and try them yourself.

push() and pop()

These two methods work at the end of an array.

push() adds a new item to the end.
pop() removes the last item.

let numbers = [10, 20, 30];

Before push:

[10, 20, 30]

numbers.push(40);

After push:

[10, 20, 30, 40]

Now removing the last item:

numbers.pop();

After pop:

[10, 20, 30]

Think of this like stacking plates. You add and remove from the top.

shift() and unshift()

These methods work at the beginning of an array.

unshift() adds an item to the front.

shift() removes the first item.

let numbers = [10, 20, 30];

Before unshift:

[10, 20, 30]

numbers.unshift(5);

After unshift:

[5, 10, 20, 30]

Now remove the first item:

numbers.shift();

After shift:

[10, 20, 30]

If push/pop are like stacking plates, shift/unshift are like adjusting the front of a queue.

map()

map() creates a new array by transforming every element.

Let’s double each number.

let numbers = [5, 10, 15];

Using a traditional loop:

let doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

Using map():

let doubled = numbers.map(function(num) {
  return num * 2;
});

Before:

[5, 10, 15]

After:

[10, 20, 30]

map() is cleaner because it focuses on what you want. transforming each value, not on managing indexes.

filter()

filter() creates a new array with only the elements that match a condition.

Let’s keep numbers greater than 10.

let numbers = [5, 12, 8, 20];

Using a loop:

let result = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    result.push(numbers[i]);
  }
}

Using filter():

let result = numbers.filter(function(num) {
  return num > 10;
});

Before:

[5, 12, 8, 20]

After:

[12, 20]

filter() reads more naturally: “Give me numbers greater than 10.”

reduce()

reduce() combines all values into a single result.

A common use case is calculating the total sum.

let numbers = [5, 10, 15];

Using a loop:

let total = 0;
for (let i = 0; i < numbers.length; i++) {
  total += numbers[i];
}

Using reduce():

let total = numbers.reduce(function(sum, num) {
  return sum + num;
}, 0);

Result:

30

Think of reduce as a rolling calculator. It starts with an initial value (here 0) and keeps combining elements until only one value remains.

forEach()

forEach() simply runs a function for each element in the array. It does not return a new array.

let numbers = [5, 10, 15];

numbers.forEach(function(num) {
  console.log(num);
});

This prints:

5
10
15

Use forEach() when you want to perform an action, like logging or updating something, but not create a new array.

If you’ve ever written HTML by hand, you know it can feel repetitive. You type a tag, close it, indent it, add classes, repeat the same pattern again and again. Emmet exists to remove that friction.

Emmet is a shortcut language for writing HTML. You type short abbreviations, press a key (usually Tab or Enter), and your editor expands them into full HTML code. It doesn’t replace HTML; it helps you write HTML faster.

Why Emmet Is Useful for HTML Beginners?

When you’re learning HTML, your brain should focus on structure and meaning, not typing speed. Emmet helps beginners by reducing typing effort so you can concentrate on understanding what you’re building.

It also encourages good structure. When you use Emmet, you naturally think in terms of elements, nesting, and hierarchy, which are core HTML concepts.

How Emmet Works Inside Code Editors?

Emmet is built into most modern code editors. In VS Code, it works out of the box. You type an abbreviation, press Tab, and the editor expands it into HTML.

Nothing special runs in the browser. Emmet works only while you’re writing code. Once the HTML is generated, it’s just normal HTML.

Basic Emmet Syntax and Abbreviations

At its core, Emmet uses short expressions to describe HTML structure. For example, typing:

p

and expanding it generates:

<p></p>

You describe what you want, and Emmet fills in the details. The syntax is simple and readable, which makes it easy to learn gradually.

Creating HTML Elements Using Emmet

Creating elements is the most basic use case. If you type:

h1

it expands to:

<h1></h1>

This may look small, but over time it saves a lot of repetitive typing. It also keeps your code consistent.

Adding Classes, IDs, and Attributes

Emmet makes adding classes and IDs extremely fast.

Typing:

div.container

becomes:

<div class="container"></div>

Typing:

section#hero

becomes:

<section id="hero"></section>

You can also add attributes:

img[src="image.png" alt="banner"]

which expands to:

<img src="image.png" alt="banner">

Creating Nested Elements

HTML is all about nesting, and Emmet shines here.

Typing:

div>p

expands to:

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

This mirrors how HTML is structured mentally. You describe the relationship, and Emmet writes the code.

Repeating Elements Using Multiplication

Repetition is another common task. Emmet lets you multiply elements easily.

Typing:

li*3

becomes:

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

This is extremely useful for lists, cards, menus, and layouts.

Generating Full HTML Boilerplate with Emmet

One of the most popular Emmet shortcuts is generating a full HTML document.

Typing:

!

or

html:5

expands to a complete HTML boilerplate with doctype, html, head, and body tags. This saves time and ensures you start with a correct structure every time.

Click Here to get complete sheet of emmets.

CSS exists to style HTML, but before you can style anything, you need a way to choose what you want to style. That’s exactly what CSS selectors do.

Think of selectors as instructions that tell the browser, “Apply these styles to these elements.” Without selectors, CSS would have no idea whether you want to style a heading, a paragraph, or a specific button on the page.

Selectors are the foundation of CSS. If you understand selectors, everything else in CSS becomes easier.

Element Selector

The element selector is the simplest way to target HTML elements. You select elements by their tag name.

For example, if you want to style all paragraphs on a page, you can target the <p> tag directly.

p {
  color: blue;
}

This tells the browser to make the text of every paragraph blue. Element selectors are useful when you want consistent styling across all instances of a tag.

You can think of this like saying, “Everyone who is a teacher, please stand up.”

Class Selector

A class selector lets you target a group of specific elements, even if they are different types of tags.

Classes are defined in HTML using the class attribute and selected in CSS using a dot (.).

<p class="highlight">Important text</p>

.highlight {
  background-color: yellow;
}

Now only elements with the highlight class are styled. This gives you more control than element selectors.

In real life, this is like saying, “Everyone wearing a red badge, please stand up.”

ID Selector

An ID selector is used to target one unique element on the page. IDs should not be repeated.

IDs are defined using the id attribute and selected using a hash (#).

<div id="header">Welcome</div>

#header {
  font-size: 24px;
}

Because IDs are unique, they are very specific. Use them when you want to style one exact element, not a group.

This is like calling someone by their full name instead of by a group label.

Group Selectors

Sometimes you want to apply the same styles to multiple selectors. Instead of repeating code, you can group them using commas.

h1, h2, p {
  font-family: Arial;
}

This applies the same font to headings and paragraphs. Group selectors help keep your CSS clean and readable.

It’s similar to saying, “Teachers, students, and staff — please gather here.”

Descendant Selectors

Descendant selectors allow you to target elements inside other elements.

div p {
  color: green;
}

This targets only paragraphs that are inside a <div>. Paragraphs outside a <div> are unaffected.

This selector is powerful because it adds context. You’re not just selecting an element, you’re selecting it based on where it lives.

Think of it as saying, “Everyone in this room wearing a blue shirt.”

Basic Selector Priority (Very High Level)

Sometimes multiple selectors target the same element. When that happens, CSS follows a priority system.

At a very high level:

• ID selectors are stronger than class selectors

• Class selectors are stronger than element selectors

So if the same element is styled by all three, the ID selector wins.

CSS selectors are not about syntax, they’re about precision. They let you choose exactly what you want to style, no more and no less.

HTML stands for HyperText Markup Language, but you don’t need to remember the full form to understand what it does. HTML is the skeleton of a webpage. It gives structure to content so the browser knows what is a heading, what is a paragraph, what is a button, and what belongs where.

Without HTML, a webpage would just be plain text with no structure. HTML tells the browser how content should be organized, not how it should look. Styling comes later with CSS, and behavior comes with JavaScript. HTML’s job is structure.

What an HTML Tag Is?

An HTML tag is a marker that tells the browser what kind of content it is dealing with. You can think of a tag like a label or a container name.

For example, when the browser sees a <p> tag, it understands that the content inside it is a paragraph. When it sees an <h1> tag, it knows the content is a main heading.

Tags are written using angle brackets < > and usually come in pairs.

Opening Tag, Closing Tag, and Content

Most HTML tags have three parts: an opening tag, some content, and a closing tag.

For example:

<p>Hello World</p>

Here, <p> is the opening tag. </p> is the closing tag. Hello World is the content inside. Together, they tell the browser: “This text is a paragraph.”

You can think of this like a sentence inside a box. The tags are the box, and the content is what’s inside the box.

What an HTML Element Means?

This is where beginners often get confused.

An HTML tag is just the label, like <p> or </p>.
An HTML element is the complete thing: opening tag, content, and closing tag together.

So in this example:

<p>Hello World</p>

<p> is a tag.
<p>Hello World</p> is an element.

Remember this simple rule:
Tag is a part. Element is the whole structure.

Self-Closing (Void) Elements

Some HTML elements don’t have content inside them. These are called self-closing or void elements.

For example:

<img src="image.png"/>
<br/>

An image tag doesn’t wrap text, it just displays an image. A line break simply breaks a line. Because there’s no content to wrap, these elements don’t need a closing tag.

Block-Level vs Inline Elements

HTML elements also behave differently in how they appear on a page.

Block-level elements take up the full width and start on a new line. Examples include <div>, <p>, and <h1>. You can think of them as big building blocks stacked vertically.

Inline elements stay within a line and only take as much space as needed. Examples include <span> and <a>. These behave more like words inside a sentence.

Understanding this difference helps a lot when you later work with layout and styling.

Commonly Used HTML Tags

When you start learning HTML, you don’t need to know every tag. A small set of tags is enough to build real webpages and understand structure. Let’s go through the most commonly used ones and see why they exist.

Heading Tags (h1 to h6)

Heading tags are used to define titles and subheadings on a webpage. They help both users and browsers understand the importance of content.

<h1> is the most important heading, usually the main title. <h2> to <h6> are used for smaller sections.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h4>
<h6>Heading 6</h4>

Think of heading tags like chapter titles in a book. They create a clear content hierarchy.

Paragraph Tag (p)

The paragraph tag is used for normal text content. Any block of readable text usually lives inside a <p> element.

<p>This is a paragraph explaining how HTML works.</p>

Browsers automatically add spacing around paragraphs, which is why text doesn’t look cramped.

Division Tag (div)

The <div> tag is a generic container. It doesn’t add meaning by itself, but it groups elements together.

<div>
  <h2>Article Title</h2>
  <p>Article content goes here.</p>
</div>

You can think of a <div> like a cardboard box used to organize things. It becomes very powerful when combined with CSS.

Span Tag (span)

The <span> tag is used for small inline pieces of content. Unlike <div>, it does not break the line.

<p>Hello <span>World</span></p>

<span> is commonly used when you want to style or highlight a specific word or phrase inside text.

Anchor Tag (a)

The anchor tag is used to create links.

<a href="https://chaicode.com">Visit ChaiCode</a>

This tag connects pages together and is one of the reasons the web exists as a network of linked documents.

Image Tag (img)

The <img> tag displays images on a webpage. It is a self-closing element.

<img src="chaicode-logo.jpg" alt="ChaiCode Logo">

The alt attribute is important for accessibility and shows text when the image cannot load.

Line Break Tag (br)

The <br> tag creates a line break without starting a new paragraph.

<p>Hello<br/>World</p>

This is useful for short breaks, like addresses or poetry.

List Tags (ul, ol, li)

Lists are used to group related items.

An unordered list uses bullet points:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

An ordered list uses numbers:

<ol>
  <li>Wake up</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

Lists help structure content clearly and are widely used in menus and documentation.

Button Tag (button)

The <button> tag creates a clickable button.

<button>Click Me</button>

By itself, it doesn’t do much, but when combined with JavaScript, it becomes interactive.

Input Tag (input)

The <input> tag allows users to enter data.

<input type="text" placeholder="Enter your name">

Inputs are commonly used in forms for text, passwords, emails, and more.

Form Tag (form)

The <form> tag groups inputs together and defines how user data should be sent.

<form>
  <input type="email">
  <button>Submit</button>
</form>

Forms are essential for login pages, sign-ups, and data submission.

As you learn more, you’ll naturally discover more tags, but you don’t need to learn everything at once.

When you type a URL and press Enter, a browser does much more than just “open a website.” A browser is a software system whose job is to fetch files from the internet, understand them, and turn them into something you can see and interact with. It acts as a translator between raw web data and a visual page made of text, images, buttons, and layouts.

Main Parts of a Browser (High-Level Overview)

A browser is not a single block of code. It is a collection of components that each handle a specific responsibility. Some parts deal with user interaction, some handle network communication, some interpret code, and others draw pixels on the screen. These parts work together in a pipeline-like flow.

User Interface: Address Bar, Tabs, Buttons

This is the part you interact with directly. The address bar accepts URLs, tabs manage multiple pages, and buttons like back, forward, and refresh send instructions to the browser engine. This layer does not understand HTML or CSS; it only collects user actions and passes them inward.

Browser Engine vs Rendering Engine (Simple Distinction)

The browser engine acts like a coordinator. It takes instructions from the UI and decides what needs to happen next. The rendering engine is the worker that actually understands HTML and CSS and turns them into a visual page. In simple terms, the browser engine manages the process, while the rendering engine builds what you see.

Networking: How a Browser Fetches HTML, CSS, JS

Once a URL is entered, the browser uses networking code to talk to servers. It sends requests over the internet and downloads files like HTML, CSS, JavaScript, and images. These files are just text and data at this point, not a webpage yet.

HTML Parsing and DOM Creation

After HTML is downloaded, the browser starts parsing it. Parsing means reading the document line by line and understanding its structure. From this, the browser builds the DOM, which is a tree-like representation of the page. Each HTML element becomes a node, connected like branches of a tree.

CSS Parsing and CSSOM Creation

CSS files are parsed separately. The browser reads styling rules and converts them into another structure called the CSSOM. This structure describes how elements should look—colors, sizes, positions—but does not decide layout yet.

How DOM and CSSOM Come Together

The browser combines the DOM and CSSOM to figure out what should be visible and how it should look. This combined information is called the render tree. Elements that are not visible are ignored, and only relevant nodes move forward.

Layout (Reflow), Painting, and Display

Next comes layout, where the browser calculates exact positions and sizes of elements. After layout, the browser paints pixels—text, colors, borders—onto the screen. Finally, the page is displayed. This entire process can repeat when content changes.

Very Basic Idea of Parsing (Using a Simple Math Example)

Parsing is like reading “2 + 3 × 4” and understanding it correctly instead of reading it as random symbols. The browser does the same with HTML and CSS—breaking them into meaningful pieces so they can be processed logically.

You don’t need to memorize all these steps. What matters is understanding the flow: fetch, understand, build, and display. Browsers are complex, but they work in a predictable pipeline.

When computers communicate over a network, data is broken into small pieces and sent independently. If there are no rules, these pieces can arrive late, out of order, duplicated, or not arrive at all. The internet itself does not guarantee correctness. This is why TCP exists.

TCP, or Transmission Control Protocol, is designed to make communication reliable. It ensures that data sent from one machine reaches the other machine completely, in the correct order, and without corruption. Most applications that care about accuracy depend on TCP.

Problems TCP Is Designed to Solve

Without TCP, a sender would have no idea whether data reached the receiver. Some packets might be lost due to congestion. Others might arrive in a different order. The receiver could receive duplicate data or incomplete information. TCP solves these problems by adding rules for connection setup, ordering, acknowledgements, and retransmission.

In short, TCP exists to turn an unreliable network into a reliable communication channel.

What Is the TCP 3-Way Handshake

Before any actual data is sent, TCP first establishes a connection between the client and the server. This setup process is called the 3-way handshake.

The purpose of the handshake is to make sure both sides are ready to communicate, agree on starting parameters, and synchronize their communication state. Only after this handshake is complete does data transfer begin.

Step-by-Step Working of SYN, SYN-ACK, and ACK

The handshake works like a short conversation.

First, the client sends a message saying it wants to start communication. This message is called SYN (synchronize). It also includes an initial sequence number to track data later.

Next, the server responds with SYN-ACK. This means the server acknowledges the client’s request and sends its own synchronization information.

Finally, the client replies with ACK, acknowledging the server’s response. At this point, both sides know the connection is established, and data transfer can safely begin.

How Data Transfer Works in TCP

Once the connection is established, data is sent in segments. Each segment has a sequence number. The receiver uses these numbers to reorder data correctly and detect missing pieces. After receiving data, the receiver sends acknowledgements back to the sender, confirming what has been received successfully.

This constant feedback loop allows TCP to manage communication smoothly.

How TCP Ensures Reliability, Order, and Correctness

TCP ensures reliability by requiring acknowledgements for received data. If the sender does not receive an acknowledgement within a certain time, it assumes the data was lost and sends it again.

Ordering is maintained using sequence numbers, so even if data arrives out of order, it can be reconstructed correctly. Error detection mechanisms ensure corrupted data is discarded and retransmitted.

How a TCP Connection Is Closed

When communication is complete, TCP does not simply stop. The connection is closed in an orderly way using FIN and ACK messages. One side sends a FIN to indicate it has finished sending data. The other side acknowledges it and sends its own FIN when ready. After the final acknowledgement, the connection is safely closed.

This careful shutdown ensures no data is lost at the end of communication.

TCP may seem complex, but every part of it exists to solve a real problem. The 3-way handshake, acknowledgements, and controlled shutdown together make reliable communication possible on an unreliable network.

Two of the most important rule sets responsible for this are TCP and UDP. They solve the same basic problem—sending data from one place to another—but they solve it in very different ways. To understand them properly, you don’t need protocol internals. You just need to understand their behavior and intent.

What Are TCP and UDP (At a Very High Level)

At a high level, TCP and UDP are ways of sending data across the internet. They sit below applications like browsers, APIs, and video calls, and decide how raw data moves between machines.

TCP focuses on reliability. It tries hard to make sure that whatever is sent is received correctly, completely, and in the right order.

UDP focuses on speed. It sends data quickly and doesn’t stop to check whether it arrived or not.

Both exist because the internet needs both behaviors.

Key Differences Between TCP and UDP

The main difference between TCP and UDP is what they care about.

TCP cares about correctness. Before sending meaningful data, TCP establishes a connection. As data moves, it constantly checks whether everything is arriving properly. If something is missing, it requests it again. If data arrives out of order, it fixes that.

UDP doesn’t do any of this. There is no connection setup. Data is sent once and forgotten. If it arrives, great. If it doesn’t, nothing is done about it.

You can think of TCP as cautious and thorough, while UDP is fast and careless by design.

When to Use TCP

TCP is the right choice when data accuracy matters more than speed.

If missing data can cause errors, crashes, or incorrect behavior, TCP is the safe option. This is why TCP is used almost everywhere correctness is important.

When you load a website, every byte of HTML, CSS, and JavaScript must arrive correctly. When you call an API, the response must be complete and readable. When you download a file or send an email, losing even a small part can make the data useless.

In these situations, TCP’s retries, ordering, and error handling are exactly what you want, even if it means things move slightly slower.

When to Use UDP

UDP is the better choice when speed matters more than perfection.

In real-time systems, waiting for retries can make things worse. If you’re on a video call and a packet is lost, resending it would introduce delay. It’s better to skip that packet and keep the conversation flowing.

That’s why UDP is commonly used for live video, voice calls, online games, and streaming. Small losses are acceptable. Delays are not.

UDP is also used in places like DNS lookups, where queries are small and fast, and retrying is cheaper than maintaining a connection.

Common Real-World Examples of TCP vs UDP

A helpful way to compare TCP and UDP is through everyday situations.

TCP is like sending important documents through a courier service. The courier confirms pickup, tracks the package, ensures delivery, and resends it if something goes wrong. It takes time, but you trust the result.

UDP is like making a public announcement on a loudspeaker. The message is broadcast once. Some people hear it clearly, some miss parts, and some don’t hear it at all. The system doesn’t slow down to fix that.

Neither approach is wrong. They are designed for different needs.

What Is HTTP and Where It Fits

HTTP often gets mixed up with TCP, but they solve different problems.

HTTP is not responsible for transporting data. Instead, HTTP defines how applications communicate. It specifies things like request methods (GET, POST), headers, status codes, URLs, and response formats.

When a browser sends an HTTP request, it is describing what it wants. When a server sends an HTTP response, it is describing what it is sending back. HTTP focuses on meaning and structure, not delivery.

HTTP assumes that the data will be delivered reliably, but it does not make that happen itself.

Relationship Between TCP and HTTP

This is the most important concept to understand.

HTTP runs on top of TCP.

TCP handles safe delivery. HTTP handles communication rules. They are layered by design.

When a browser sends an HTTP request, TCP ensures that the request reaches the server correctly. When the server responds, TCP ensures that the response reaches the browser intact and in order. HTTP relies on TCP’s reliability but does not replace it.

This is why HTTP does not make TCP unnecessary. They work together, each solving a different problem.

A common beginner mistake is thinking HTTP and TCP are competing protocols. They are not. TCP would still exist even without HTTP. HTTP would not work reliably without TCP underneath it.

TCP and UDP are not about theory. They are about trade-offs.

TCP chooses correctness over speed. UDP chooses speed over correctness.
HTTP builds meaningful communication on top of reliable delivery.

Once you understand why each exists, networking stops feeling abstract. You stop memorizing terms and start reasoning about systems and that’s when these concepts actually become useful.

cURL

People use it in tutorials, debugging, interviews, and production issues.

But beginners often feel:

“I see cURL commands… but I don’t really know what’s happening.”

Let’s fix that — slowly and clearly.

First Things First: What Is a Server?

Before cURL, we need to understand who we’re talking to.

A server is just a computer on the internet that:

• Waits for requests

• Processes them

• Sends back responses

When you open a website:

• Your browser sends a request

• The server replies with data (HTML, JSON, images, etc.)

This request → response model is the foundation of the web.

So… What Is cURL?

cURL is a tool that lets you talk to a server from the terminal.

That’s it.

Instead of:

• Clicking a button in a browser

You:

• Type a command

• Send a request

• See the raw response

Think of cURL as:

“A browser without a UI”

Why Programmers Need cURL

Browsers hide a lot of details.

cURL shows you everything.

Programmers use cURL to:

• Test APIs quickly

• Debug backend issues

• Understand responses from servers

• Learn how requests really work

• Automate server communication

If you can use cURL, you understand the web better.

Your First cURL Command (Simplest Possible)

Let’s make your first request.

Open your terminal and type:

curl https://example.com

Press Enter.

🎉 That’s it. You just talked to a server.

What Just Happened?

Here’s what cURL did behind the scenes:

1. Sent a request to example.com

2. Asked: “Give me the content”

3. Server responded with data

4. cURL printed that data in the terminal

That response is usually:

• HTML (for websites)

• JSON (for APIs)

Understanding Request and Response (Conceptually)

Request

A request says:

• Where you want to go

• What you want to do

Example:

“Hey server, can I get this page?”

Response

A response contains:

• Status (did it work or not?)

• Data (content returned)

Example:

“Yes, here’s the data”
or
“No, something went wrong”

This pattern never changes — browser or cURL.

cURL and APIs (Why This Matters)

APIs are just servers that return data, not web pages.

Let’s try a simple API request:

curl https://api.github.com

You’ll see:

• Structured JSON

• Key-value pairs

• Real API responses

This is how backend services talk to each other.

Introducing HTTP Methods (Only Two for Now)

Don’t overload yourself.

For now, remember just two methods:

GET — Fetch Data

• Used to read data

• Default method in cURL

curl https://api.github.com

POST — Send Data

• Used to send or create data

• We’ll see examples later in the series

For now, just know:

GET = ask
POST = send

That’s enough.

Common Beginner Mistakes with cURL

Let’s save you some frustration.

1. Copy-pasting long commands blindly

Understand the intent, not the flags.

2. Expecting browser-like output

cURL shows raw data, not pretty pages.

3. Mixing up URL and API endpoint

A webpage and an API behave differently.

4. Getting scared by JSON

JSON is just structured text. Take it slowly.

5. Trying everything at once

Start small. Confidence > complexity.

The Mental Model You Should Keep

Whenever you use cURL, think:

I am sending a message to a server
The server will reply
cURL will show me the reply

Nothing more. Nothing less.

Why Learning cURL Early Is a Superpower

If you understand cURL:

• APIs feel natural

• Debugging feels logical

• Backend concepts click faster

• System design makes more sense

cURL isn’t about commands.
It’s about communication.

Final Thoughts

cURL is not scary.

It’s just a way to say:

“Hey server, talk to me.”

And once servers start talking back, you’re officially doing backend development 🚀

You type:

https://example.com

And somehow your browser finds the correct server on the internet.

No guessing.
No searching.
No magic.

This works because of DNS records.

Let’s understand them slowly and simply.

What Is DNS? (Very Simple Explanation)

DNS stands for Domain Name System.

DNS exists because:

• Humans like names (google.com)

• Computers like numbers (142.250.190.14)

So DNS acts like a phonebook of the internet.

It answers one basic question:

“For this name, where should I go?”

That answer is stored in DNS records.

Why DNS Records Are Needed?

A domain name alone is just a label.

DNS records tell the internet:

• Which server hosts the website

• Who manages the domain

• Where emails should be delivered

• How other services should find it

Think of DNS records as instructions, not just data.

NS Record — Who Is Responsible for This Domain?

Problem it solves:
👉 “Who should I ask about this domain?”

An NS (Name Server) record says:

“These servers are responsible for this domain.”

Real-Life Example

Think of an apartment building.

• NS record = building management office

• They don’t know every detail

• But they know who does

Without NS records, DNS would not know where to ask next.

A Record — Domain → IPv4 Address

Problem it solves:
👉 “What is the IP address of this domain?”

An A record maps:

example.com → 93.184.216.34

This is the most common DNS record.

Real-Life Example

• Website name = person’s name

• IP address = house address

When a browser wants to visit a site, it usually ends here.

AAAA Record — Domain → IPv6 Address

Problem it solves:
👉 Same as A record, but for IPv6

An AAAA record maps:

example.com → 2606:2800:220:1:248:1893:25c8:1946

Why does this exist?

• IPv4 addresses are running out

• IPv6 provides a much larger address space

Simple Rule

• A = IPv4

• AAAA = IPv6

That’s it. Nothing more to memorize.

CNAME Record — One Name Points to Another Name

Problem it solves:
👉 “I don’t want to repeat IP addresses everywhere.”

A CNAME (Canonical Name) record says:

“This name is an alias of another name.”

Example:

www.example.com → example.com

The browser then resolves example.com normally.

Real-Life Example

• Nickname → real name

• “Call me John” → “My full name is Jonathan”

Common Confusion: A vs CNAME

• A record → points to an IP

• CNAME → points to another domain name

You don’t use both for the same name.

MX Record — How Emails Find Your Mail Server?

Problem it solves:
👉 “Where should emails be delivered?”

An MX (Mail Exchange) record tells mail servers:

“Send emails for this domain here.”

Example:

example.com → mail.example.com

Important Detail

MX records don’t point directly to IPs.
They point to hostnames, which then resolve using A or AAAA records.

Real-Life Example

• Website address ≠ office mailroom

• MX record = mailroom location

TXT Record — Extra Information & Verification

Problem it solves:
👉 “How do I store extra instructions?”

A TXT record stores plain text.

Used for:

• Domain ownership verification

• Email security (SPF, DKIM, DMARC)

• Third-party integrations

Real-Life Example

TXT records are like:

Notes pinned on your door for visitors

They don’t route traffic, but they provide proof and instructions.

How All DNS Records Work Together (One Website)?

Let’s take a single domain:

example.com

Here’s what happens:

• NS records → say who manages DNS

• A / AAAA records → tell browsers where the site lives

• CNAME records → provide aliases like www

• MX records → route emails correctly

• TXT records → verify and secure services

All of them solve different problems for the same domain.

Clearing Common Beginner Confusion

NS vs MX

• NS → DNS responsibility

• MX → email delivery

Different purposes. Different layers.

A vs CNAME

• A → name → IP

• CNAME → name → name

One is direct. One is indirect.

The Mental Model to Remember

DNS is not complicated.

It’s just answering questions like:

• Who manages this domain? → NS

• Where is the website? → A / AAAA

• Is this name an alias? → CNAME

• Where should email go? → MX

• Any extra instructions? → TXT

That’s it.

Final Thoughts

DNS records are not “advanced networking”.

They’re just labels and directions that help the internet find things.

Once you understand:

• What problem each record solves

• How they work together

DNS stops feeling scary and starts feeling logical.

You type:

google.com

Your browser needs:

142.250.xxx.xxx

That translation is done by DNS.

This blog explains how DNS resolution works step by step, using the dig command to expose what normally happens behind the scenes.

DNS: The Internet’s Phonebook

Computers don’t understand domain names.

They understand IP addresses.

DNS (Domain Name System) exists to answer one simple question:

“Which IP address belongs to this domain name?”

You can think of DNS as the internet’s phonebook:

• Domain name → Contact name

• IP address → Phone number

Without DNS, you would need to remember IP addresses for every website you visit.

Why DNS Resolution Is Layered

There is no single server that knows all domain names.

Instead, DNS is designed as a hierarchical, distributed system:

This design makes DNS:

• Scalable

• Fault tolerant

• Globally distributed

To understand this properly, we need a tool.

Introducing dig: Your DNS Debugging Tool

dig (Domain Information Groper) is a command-line tool used to:

• Inspect DNS records

• Debug DNS issues

• Understand resolution paths

It shows what DNS servers respond, not just the final IP.

Think of dig as:

“X-ray vision for DNS”

Step 1: Root Name Servers

dig . NS

Let’s start from the top of the DNS hierarchy.

dig . NS

What This Means

• . represents the DNS root

• NS asks for name server records

What You Learn

This command returns a list of root name servers, like:

a.root-servers.net
b.root-servers.net
...

Important Insight

Root servers do not know IP addresses for domains.

They only know:

“Who is responsible for .com, .org, .net, etc.”

Root servers are traffic directors, not databases.

Step 2: TLD Name Servers

dig com NS

Now let’s ask:

“Who manages .com domains?”

dig com NS

What This Does

• Queries DNS for name servers of the .com TLD

What You Learn

You’ll get name servers like:

a.gtld-servers.net
b.gtld-servers.net

Key Point

TLD servers:

• Do NOT know IP addresses for google.com

• They only know which authoritative servers are responsible

Think of TLD servers as:

“The department that knows who owns which domain”

Step 3: Authoritative Name Servers

dig google.com NS

Now we ask:

“Who is authoritative for google.com?”

dig google.com NS

What This Returns

You’ll see Google’s authoritative name servers, such as:

ns1.google.com
ns2.google.com

Why This Matters

Authoritative servers:

• Own the DNS records

• Provide final answers

• Are the source of truth

Everything above this layer just points you closer to the answer.

Step 4: Full DNS Resolution

dig google.com

Now let’s ask the real question:

dig google.com

What Happens Behind the Scenes

Even though dig gives you a final answer quickly, this is what actually happens internally:

1. Resolver asks Root server
   → “Who handles .com?”

2. Resolver asks TLD server
   → “Who handles google.com?”

3. Resolver asks Authoritative server
   → “What is the IP for google.com?”

4. Resolver returns IP to client

This process is called recursive resolution.

Understanding NS Records (Why They Matter)

NS (Name Server) records answer this question:

“Who should I ask next?”

They don’t give IPs.
They give directions.

DNS resolution is basically:

Asking better questions until you reach the source of truth.

Recursive Resolvers: The Unsung Heroes

Your browser does not talk to root servers directly.

Instead, it talks to a recursive resolver, usually provided by:

• Your ISP

• Google DNS (8.8.8.8)

• Cloudflare DNS (1.1.1.1)

Recursive resolvers:

• Perform the full lookup

• Cache results

• Speed up future requests

This is why DNS feels instant after the first lookup.

How This Connects to a Real Browser Request

When you type https://google.com:

1. Browser asks resolver for IP

2. DNS resolution happens (often from cache)

3. Browser gets IP address

4. TCP connection starts

5. TLS handshake happens

6. HTTP request is sent

DNS is the first domino in every web request.

If DNS fails:

• Nothing else works

Why DNS Knowledge Matters for System Design

Understanding DNS helps you:

• Debug production issues

• Design highly available systems

• Understand load balancers and CDNs

• Configure custom domains correctly

• Reason about latency and caching

DNS is not “networking trivia”.
It’s core infrastructure.

The Mental Model to Keep

Remember this flow:

Domain Name
   ↓
Recursive Resolver
   ↓
Root Server
   ↓
TLD Server
   ↓
Authoritative Server
   ↓
IP Address

DNS is not magic.
It’s a well-designed, layered lookup system.

Final Thoughts

Most developers use DNS every day without understanding it.

But once you see how resolution actually works:

• Errors make sense

• Outputs stop looking scary

• System design decisions become clearer

DNS is the quiet backbone of the internet —
and now you know how it works.

APIs.
Databases.
Browsers.
Cloud servers.

But somewhere between “my request” and “the server response”, a lot of hardware-level networking quietly does its job.

This blog explains how the internet actually reaches a home or office, what each network device does, and how all of them work together in real-world systems.

No jargon overload.
Just responsibility-first explanations.

The Big Picture: How the Internet Enters Your Network

At a very high level, the flow looks like this:

Every device in this chain has one clear responsibility.
Once you understand that, networking stops feeling mysterious.

Let’s break it down.

What Is a Modem? (Your Internet Translator)

Responsibility:
👉 Connect your private network to the public internet

Your Internet Service Provider (ISP) sends internet signals over:

• Fiber

• Cable

• DSL

• Cellular

These signals are not in a form your computer understands.

That’s where the modem comes in.

What a Modem Does

• Talks to your ISP using their technology

• Converts ISP signals into digital data

• Brings the internet into your building

Simple Analogy

Think of the modem as a language translator between:

• Your ISP’s language

• Your network’s language

Without a modem, your network is completely disconnected from the internet.

What Is a Router? (The Traffic Police)

Responsibility:
👉 Decide where data should go

Once the internet enters your home or office, it doesn’t magically know which device needs which data.

That’s the router’s job.

What a Router Does

• Assigns local IP addresses to devices

• Routes outgoing traffic to the internet

• Routes incoming responses to the correct device

• Separates internal network from the public internet

Simple Analogy

A router is like a traffic police officer at a busy junction:

• Knows which lane leads where

• Prevents chaos

• Keeps traffic moving correctly

Important Distinction

• Modem brings internet in

• Router decides where it goes

Hub vs Switch: How Local Networks Actually Work

Both hubs and switches connect devices inside a local network, but they behave very differently.

What Is a Hub? (The Loud Speaker)

Responsibility:
👉 Broadcast everything to everyone

When a hub receives data:

• It sends that data to all connected devices

• Every device checks if the data is meant for it

Problems with Hubs

• Inefficient

• No privacy

• Network congestion

• Almost obsolete today

Analogy

A hub is like a person shouting in a room:

“HEY! IS THIS MESSAGE FOR YOU?”

What Is a Switch? (The Smart Postman)

Responsibility:
👉 Deliver data only to the intended device

A switch:

• Learns which device is on which port

• Sends data only to the correct destination

• Makes local networks fast and efficient

Analogy

A switch is like a postman who knows exactly:

• Which house belongs to whom

• Where to deliver each letter

Hub vs Switch Summary

What Is a Firewall? (The Security Gate)

Responsibility:
👉 Decide what traffic is allowed in or out

Once your network is connected to the internet, security becomes critical.

That’s where the firewall lives.

What a Firewall Does

• Blocks unauthorized access

• Allows trusted traffic

• Applies security rules

• Protects internal systems

Placement

Firewalls usually sit:

• Between the router and internal network

• Or inside the router itself

• Or as software on servers/cloud

Analogy

A firewall is a security gate:

• Guards the entrance

• Checks ID

• Allows or denies entry

This is why security often “lives” at the firewall layer.

What Is a Load Balancer? (The Smart Traffic Distributor)

Responsibility:
👉 Distribute traffic across multiple servers

When systems grow, one server is not enough.

A load balancer sits in front of servers and:

• Receives incoming requests

• Distributes them evenly

• Prevents overload

• Improves reliability

What a Load Balancer Does

• Routes requests to healthy servers

• Removes failed servers from rotation

• Enables horizontal scaling

Analogy

A load balancer is like a toll booth system:

• Many lanes

• Traffic divided evenly

• No single lane gets overloaded

How All These Devices Work Together (Real-World Setup)

Let’s connect everything.

Typical Flow for a Web Request

Each device does one focused job.
Together, they form a reliable system.

Where Software Engineers Fit Into This

As a backend or full-stack developer, you interact with this stack indirectly:

• Load balancers affect API latency

• Firewalls affect request access

• Routers affect networking issues

• Switches affect internal traffic

• Modems affect connectivity

Understanding this helps you:

• Debug production issues

• Design scalable systems

• Communicate better with DevOps teams

• Understand cloud networking concepts

Final Thoughts

Networking is not magic.

It’s a set of simple devices:

• Each with one clear responsibility

• Working together in layers

Once you understand where each device sits and why,
you stop guessing — and start reasoning.

And that’s the difference between using systems and understanding systems.

git init
git add
git commit

And thought:

“Okay… but what do these actually do?”

In this blog, we’ll slow things down and build Git knowledge from the ground up.
No rushing. No jargon overload. Just clear concepts and a simple workflow.

What Is Git?

Git is a version control system.

In simple words:

Git helps you keep track of changes in your code over time.

It allows you to:

• Save versions of your project

• Go back to older versions

• Work safely with other developers

• Understand who changed what and why

Git does this locally on your machine, even without the internet.

That’s why Git is called a distributed version control system — every developer has a full copy of the project and its history.

Why Git Is Used

Before Git, developers:

• Shared code using zip files

• Overwrote each other’s work

• Lost track of changes

• Had no clear history

Git solves all of that.

With Git, you get:

• A complete history of your project

• Safe collaboration

• Easy bug tracking

• Confidence to experiment without fear

Once you use Git properly, working without it feels risky.

Git Basics: Core Terminologies You Must Know

Before touching commands, let’s understand a few important words.
These concepts matter more than memorizing syntax.

Repository (Repo)

A repository is where Git tracks your project.

It includes:

• Your project files

• A hidden .git folder that stores history

Think of a repository as:

“A project folder with memory”

Commit

A commit is a snapshot of your project at a specific point in time.

Each commit:

• Saves the current state of your files

• Has a message explaining the change

• Becomes part of the project history

Think of commits like save points in a game.

Branch

A branch is a separate line of development.

It allows you to:

• Work on new features

• Fix bugs

• Experiment safely

All without breaking the main code.

You’ll learn more about branches later — for now, just know they exist to keep work isolated.

HEAD

HEAD is simply a pointer to where you currently are in the project history.

In simple terms:

HEAD = “your current commit”

Essential Git Commands (Beginner-Friendly)

Now let’s look at the most important Git commands — the ones you’ll use every day.

git init — Start Git Tracking

This command creates a new Git repository.

git init

What it does:

• Creates the .git folder

• Tells Git: “Start tracking this project”

You usually run this once per project.

git status — Check What’s Going On

git status

This is your most-used command.

It tells you:

• Which files are changed

• Which files are staged

• What Git is waiting for

Whenever you’re confused, run git status.

git add — Prepare Changes

git add file.txt

or

git add .

This command:

• Takes changes

• Puts them into the staging area

Staging means:

“These changes are ready to be committed”

Nothing is saved to history yet.

git commit — Save a Snapshot

git commit -m "Add login feature"

This command:

• Creates a commit

• Saves a snapshot of staged changes

• Adds a message for clarity

Good commit messages explain why, not just what.

git log — View History

git log

This shows:

• All commits

• Commit messages

• Authors and timestamps

This is how Git lets you travel back in time.

A Simple Git Workflow (From Scratch)

Let’s put everything together.

Step 1: Create a Project

mkdir my-project
cd my-project
git init

Step 2: Create or Edit Files

index.html
style.css

Step 3: Check Status

git status

Step 4: Stage Changes

git add .

Step 5: Commit Changes

git commit -m "Initial project setup"

Repeat this cycle:

Change → Add → Commit

That’s the core Git workflow.

What Git Is Really Doing

Behind the scenes:

• Git stores snapshots

• Links commits together

• Tracks history safely

• Never loses data easily

Commands are just ways to talk to this system.

Once you understand the workflow, Git starts feeling natural.

Common Beginner Mistakes (And How to Avoid Them)

• Forgetting to commit regularly

• Writing unclear commit messages

• Being scared to experiment

• Memorizing commands without understanding

Focus on concepts first. Commands will follow.

What’s Coming Next in the Series

In the next part, we’ll cover:

• Git vs GitHub (very important)

• Local vs remote repositories

• How push and pull actually work

Final Thoughts

Git is not about commands.

It’s about:

• History

• Safety

• Confidence

• Collaboration

Once the basics are clear, Git becomes one of the most powerful tools in your developer toolkit.

And this is just the beginning 🚀

Now comes the next natural question:

“Okay, I use Git… but what is Git actually doing behind the scenes?”

This blog answers that question.

No magic.
No memorizing commands.
Just a simple mental model of how Git works internally.

Git Is Not Just Commands

Most beginners learn Git like this:

• git add

• git commit

• git push

But they don’t really know what happens when they run these commands.

The truth is:
👉 Git is just a content tracker
👉 And everything Git does lives inside one folder

That folder is called .git.

The .git Folder: Git’s Brain

When you run:

git init

Git creates a hidden folder called .git.

This folder is the heart of your repository.

If you delete the .git folder:

• Your files remain

• But Git forgets everything

• No history, no commits, no tracking

That’s because Git does not store history in your code files.
It stores everything inside .git.

Think of it like this:

Your project folder is the body
The .git folder is the brain

What Lives Inside the .git Folder (Conceptually)

You don’t need to memorize the internal files, but you do need to understand the idea.

Inside .git, Git stores:

• Snapshots of your files

• Metadata (author, message, time)

• Pointers to history

• Integrity checks using hashes

All of this works using Git objects.

Git Objects: The Core Idea

Git stores data using three main object types:

• Blob

• Tree

• Commit

Let’s understand them without jargon.

Blob: The File Content

A blob represents the content of a file.

Not:

• File name

• File path

• File permissions

Only:
👉 The actual content

Important idea:

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

• This is why Git is efficient

Tree: The Folder Structure

A tree represents a directory.

It contains:

• File names

• Folder names

• References to blobs and other trees

Think of a tree as:

“This folder contains these files and subfolders”

Trees connect blobs together into a structure.

Commit: A Snapshot in Time

A commit is not a diff.
It’s a snapshot of your project at a specific moment.

A commit contains:

• A reference to a tree (project structure)

• Author information

• Commit message

• A reference to the previous commit

This is how Git builds history — commit by commit.

How Git Tracks Changes (The Right Mental Model)

Git does not track changes like Word or Google Docs.

Instead, Git:

• Takes snapshots

• Links snapshots together

Each commit says:

“Here is what the entire project looks like right now”

Changes are inferred by comparing snapshots.

What Happens During git add

When you run:

git add file.txt

Git does not create a commit.

Instead:

• Git takes the content of the file

• Converts it into a blob

• Stores it inside .git

• Adds it to a staging area

Think of staging as:

“I’m telling Git: this version of the file is ready”

What Happens During git commit

When you run:

git commit

Git:

1. Takes everything from the staging area

2. Builds a tree (folder structure)

3. Creates a commit object

4. Links it to the previous commit

Now Git has a new snapshot in history.

Why Git Uses Hashes Everywhere

Every Git object (blob, tree, commit) has a hash.

That hash is:

• Generated from the content itself

• Unique

• Immutable

Why this matters:

• If content changes → hash changes

• If hash matches → content is guaranteed the same

This gives Git:

• Data integrity

• Safety

• Trust in history

Git literally knows if something was altered or corrupted.

The Big Picture Mental Model

Here’s the mental model you should keep:

• .git is where everything lives

• Git stores snapshots, not diffs

• Files → blobs

• Folders → trees

• History → commits

• Hashes ensure integrity

• Commands are just ways to interact with this system

Once this clicks, Git stops being scary.

Why You Should Care About This

When you understand how Git works internally:

• Merge conflicts make more sense

• Reset, checkout, and revert feel logical

• You stop memorizing commands blindly

• Debugging Git issues becomes easier

You start using Git with confidence.

What’s Coming Next

In the next part of this series, we’ll talk about:

• Git vs GitHub (they are NOT the same)

• Local repositories vs remote repositories

• What actually happens during git push and git pull

Final Thoughts

Git isn’t magic.

It’s a well-designed system built on:

• Snapshots

• Objects

• Hashes

• History

Understand the system, and the commands will follow naturally.

This is how you truly learn Git — from the inside out.