DEV Community: Rakshambika

Arrays in JS

Rakshambika — Thu, 03 Sep 2026 13:30:00 +0000

What is Array?

Array is a special type of object used to store multiple items under a single variable name.

Example:

Without an array:

let fruit1 = "Apple";
let fruit2 = "Mango";
let fruit3 = "Pineapple";
let fruit4 = "Guava";

With an array:

let fruits=["Apple", "Mango", "Pineapple", "Guava"];

Characteristics:

Zero-indexed: The first element starts at index 0.
Dynamic size: Arrays can automatically grow or shrink.
Heterogeneous: They can hold mixed data types (numbers, strings, objects, or other arrays).
Mutable: Arrays are mutable.

Creating a Array:

The most common way to create an array is using array literals [].

// Creating array

const students=["Raksha" , "Rakshan" , "Ranjani" , "Varun"];
console.log(students);

[ 'Raksha', 'Rakshan', 'Ranjani', 'Varun' ]

Accessing Array Elements :

Elements in the array are accessed using their index.
Index starts from 0.

let fruits = ["Apple", "Mango", "Pineapple" , "Guava"];

console.log(fruits[0]); 
console.log(fruits[1]); 
console.log(fruits[2]); 
console.log(fruits[3]);

Apple
Mango
Pineapple
Guava

Updating Array Elements:

We can update an array element by accessing its index and assigning a new value to it.

Example:

let fruits = ["Apple", "Mango", "Pineapple", "Guava"];

fruits[3] = "Banana";

console.log(fruits);

Output:

[ 'Apple', 'Mango', 'Pineapple', 'Banana' ]

Here, the fruits[3]="Guava" is changed to "Banana".

Finding the Array Length:

The length property returns the number of elements in the array.

Example:

let fruits = ["Apple", "Mango", "Pineapple", "Guava"];
console.log(fruits.length);

Output:

Arrays can store heterogeneous data:

What is heterogeneous array?

Heterogeneous data means storing different types of values in the same array.

Example:

let data = ["Raksha", 23, true, 10.5, null];

console.log(data);

Output:

[ 'Raksha', 23, true, 10.5, null ]

Here the array contains different data types:

Value	Data Type
`"Raksha"`	String
`23`	Number
`true`	Boolean
`10.5`	Number
`null`	Null

Loop for Arrays:

for Loop

The traditional for loop is used when you want to access the index of each array element.

Example:

let fruits = ["Apple", "Mango", "Pineapple", "Guava"];

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

Output:

Apple
Mango
Pineapple
Guava

Adding Elements to an Array Without Functions:

We can add an element to an array without using a function by assigning a value to an index that is equal to or greater than the current array length.

Example:

// Adding element without functions

let zoo=["Lion" , "Tiger" , "Parrot" , "Peacock" , "Monkey"];
console.log(zoo);
zoo[zoo.length]="King cobra";
console.log(zoo);

Output:

[ 'Lion', 'Tiger', 'Parrot', 'Peacock', 'Monkey' ]

[ 'Lion', 'Tiger', 'Parrot', 'Peacock', 'Monkey', 'King cobra' ]

How does zoo[zoo.length] work?

Initially:

Index:    0        1        2         3         4
          ↓        ↓        ↓         ↓         ↓
Value:   Lion     Tiger    Parrot    Peacock   Monkey

The array has 5 elements, so: zoo.length =5

Therefore:

zoo[zoo.length] = "King cobra";

is equivalent to:

zoo[5] = "King cobra";

Now:

After adding "King cobra":

Index:    0        1        2         3         4          5
          ↓        ↓        ↓         ↓         ↓          ↓
Value:   Lion     Tiger    Parrot    Peacock   Monkey    King cobra

Objects in JS

Rakshambika — Wed, 02 Sep 2026 13:31:00 +0000

What is an Object?

An Object is a non-primitive data type used to store data in key-value pairs.
It is a dynamic data structure, meaning properties can be added, updated, or removed at runtime.
Objects are mutable, which means their contents can be changed after creation.

Why do we use Objects?

Objects are used to store related data and behavior in a single variable. Instead of creating multiple separate variables, we can group them together using an object.

Without Object:

// Without Object

let name="Raksha";
let age=21;
let location="Chennai";

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

Output:

Raksha
21
Chennai

With Object:

// With Objects

let student = {
    name: "Raksha",
    age: 22,
    city: "Chennai"
};

console.log(student);

Output:

{ name: 'Raksha', age: 22, city: 'Chennai' }

Advantages of objects:

Used to organize the related data in a single variable.
Easy to access and update data.
Can store different types of value.
Can store functions.

Creating Objects in JavaScript:

Example:

let student = {
    name: "Raksha",
    age: 22,
    city: "Chennai"
};

console.log(student);

Output:

{ name: 'Raksha', age: 22, city: 'Chennai' }

Accessing Objects in JavaScript:

Once an object is created, we can access its properties and methods using two main ways:

1. Dot notation (.)
2. Bracket notation ([])

1. Dot Notation:

We use the dot (.) followed by the property name.

syntax:

object.property

Example:

// Dot Notation

let home={
    NoofMembers:4,
    type:"Independent House",
    noofrooms:4,
    location:"Thiruvarur"
}

console.log(home.NoofMembers);
console.log(home.location);

2. Bracket Notation:

We use square brackets [] and specify the property name as a string or symbol.

Syntax:

object["property"]

Example:

// Bracket Notation

let house={
    NoofMembers:4,
    type:"Independent House",
    noofrooms:4,
    location:"Thiruvarur"
}

console.log(house["noofrooms"]);
console.log(house["type"]);

Why do we need bracket notation?

It is especially useful when the property name is stored in a variable.

Example:

let student = {
    name: "Raksha",
    age: 22
};

let key = "name";

console.log(student[key]);

Output:

Raksha

Adding Properties:

let house={
    NoofMembers:4,
    type:"Independent House",
    noofrooms:4,
    location:"Thiruvarur"
}

house.colour="Blue";
house.floors=2;

console.log(house);

Output:

{
  NoofMembers: 4,
  type: 'Independent House',
  noofrooms: 4,
  location: 'Thiruvarur',
  colour: 'Blue',
  floors: 2
}

Modifying Properties:

let classroom={
   teacher:"Kavitha",
   noofStudents:50
}
console.log(classroom);
classroom.noofStudents=70;
console.log(classroom);

Output:

Before Modification:
{ teacher: 'Kavitha', noofStudents: 50 }

After Modification:
{ teacher: 'Kavitha', noofStudents: 70 }

Deleting Properties:

// Delete

let animal={
    name:"Tiger",
    colour:"Orange",
    gender:"Male",
    isActive:true,
    noofsiblings:5
}

console.log(animal);
delete animal.isActive;
console.log(animal);

Output:

Before Deletion:
{
  name: 'Tiger',
  colour: 'Orange',
  gender: 'Male',
  isActive: true,
  noofsiblings: 5
}

After Deletion:
{
  name: 'Tiger',
  colour: 'Orange',
  gender: 'Male',
  noofsiblings: 5
}

Loop in JS

Rakshambika — Tue, 01 Sep 2026 13:31:00 +0000

What is Loop?

A loop is used to execute a block of code repeatedly as long as a specified condition is true. The loop stops when the condition becomes false.
A loop is used to perform the same task multiple times without writing the same code repeatedly.

Without Loop:

console.log("Welcome");
console.log("Welcome");
console.log("Welcome");
console.log("Welcome");
console.log("Welcome");

With Loop:

let i=1;
while(i<=5)
{
console.log("Welcome");
i++;
}

Welcome
Welcome
Welcome
Welcome
Welcome

Why do we use loop?

Reduce the lines of code.
Without loops, we need to write the same code multiple times manually. Using loops, we can execute a block of code repeatedly and automatically until the specified condition becomes false.
Easier to maintain.
Used to iterate arrays, objects...

Types of Loop:

There are two types of Loops:

Entry Controlled Loops:

Any loop where we check the test condition before entering the loop is an entry controlled loop.
If the condition is false initially, the loop body will not execute even once.

Exit Controlled Loops:

Any loop where we check the test condition after the statements are executed once is an exit controlled loop.
The loop body executes at least once, even if the condition is initially false.

             While loop
             do...while loop
             for loop
             for .. in loop
             for .. of loop

While loop:

While loop is an entry-controlled loop.
It executes the block of code when the condition is true, when the condition becomes false, the loop stops.

Syntax:

while(condition)
{
//code
}

Example:

// While loop

let n=1;

while(n<=5)
{
    console.log(n);
    n++;
}

Output:

Here:

Check 1 <= 5 → true → print 1
Check 2 <= 5 → true → print 2
Check 3 <= 5 → true → print 3
Check 4 <= 5 → true → print 4
Check 5 <= 5 → true → print 5
Check 6 <= 5 → false → stop the loop

do.. While Loop:

Do... While is a exit-controlled loop.
The loop body executes at least once, even if the condition is initially false.
The condition is checked after executing the loop body.

Syntax:

do
{

//code

}while(condition)

Example:

//do while

let i = 10;

do {
    console.log(i);
    i++;
} while (i <= 5);

Output:

Here, i <= 5 is initially false, but 10 is printed because the loop body executes before the condition is checked.

For Loop:

For loop is an entry-controlled loop.
For loop is used when the number of iteration is known.
In for loop, initialization, condition, and increment/decrement are written in the same line, separated by semicolons (;).

Syntax:

for (initialization; condition; increment/decrement) {
    // code to execute
}

Three Parts of for Loop:

for (let i = 1; i <= 5; i++)
     ↑          ↑       ↑
     |          |       |
Initialization Condition Update

Initialization → Executes only once at the beginning.
Condition → Checked before every iteration.
Increment/Decrement → Updates the value after each iteration.

Example:

//for loop
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Output:

for .. in Loop:

The for...in loop is used to iterate over the keys (property names) of an object.
In each iteration, the variable contains the key/index, not the value.

Syntax:

for (let key in object) {
    // code
}

Example:

// for in
let Data={
   name:"Raksha",
   location:"Thiruvarur",
   isStudent:true,
   age:21
}

for(let key in Data)
{
    console.log(key);
}

Output:

name
location
isStudent
age

Example:

let animals=["Lion","Tiger","Cat"]


for(let index in animals)
{
    console.log(index);
}

Output:

0
1
2

for .. of Loop:

The for...of loop is used to iterate over the values of an iterable objects.
It is commonly used with arrays, strings, Sets, and Maps.
It directly gives you the value, not the key/index.

Syntax:

for (let value of iterable) {
    // code
}

Example:

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

for (let fruit of fruits) {
    console.log(fruit);
}

Output:

Apple
Banana
Mango

Conditional Statements in JS

Rakshambika — Mon, 31 Aug 2026 17:06:52 +0000

What is Conditional Statements?

Conditional Statements are used to execute a different block of code based on the conditions.
Conditional Statements are also known as Decision-making statements.

Types of Conditional Statements:

        1. if statement
        2. if else statement
        3. else if statement
        4. Nested statement
        5. Switch statement

If statement:

It executes the block of code if the condition is satisfied, otherwise nothing is executed.

Example:

// if statement

let age=20;

if(age>18)
{
    console.log("Eligible to vote");
}

Output:

Eligible to vote

In the above example, the age is 20 and the condition is (age>18). So here the condition is true and the output is Eligible to vote . If the age is less than 18, then nothing will be printed.

if else statement:

If the condition is satisfied then it executes the block of code inside the if block, if the condition is not satisfied then it executes the block of code inside the else block.

Example:

 let age =15;

    if(age>20)
    {
        console.log("Eligible to vote");
    }

    else
    {
        console.log("Not Eligible to vote");
    }

Output:

Not Eligible to vote

In the above example, the age is 15 and the condition is (age>18). Here the condition is false and the output is Not Eligible to vote . If the age is greater than 18, then it will execute the block of code inside the if block.

else if statement:

Using if else statement we can only compare one condition. If we want to check multiple conditions at that time we use else if statement.

Example:

If we are calculating the grade for every subjects based on our marks. we need check multiple conditions because different marks can correspond to different grades.

let mark=80;

if(mark>90 && mark<=100)
{
    console.log("O grade");
}

else if(mark>80 && mark<=90)
{
    console.log("A+ grade");
}

else if(mark>70 && mark<=80)
{
    console.log("A grade");
}

else if(mark>60 && mark<=70)
{
    console.log("B+ grade");
}

else if(mark>50 && mark<=60)
{
    console.log("B grade");
}

else if(mark>40 && mark<=50)
{
    console.log("C grade");
}

else if(mark>0 && mark<=40)
{
    console.log("Fail");
}

else
{
    console.log("Enter the Valid mark");
}

Output:

A grade

Nested Statement:

A nested if statement is an if statement placed inside another if statement.

It is used when we need to check one condition inside another condition.

Example:

// Find the largest Number

let a=90 , b=180 , c=190;

if(a>b)
{
    if(a>c)
    {
        console.log("A is greater than B and C");
    }

    else
    {
        console.log("C is greater than A and B");
    }

}

else
   {
    if(b>c)
    {
         console.log("B is greater than A and C");
    }

    else
    {
        console.log("C is greater than A and B");
    }
   }

Output:

C is greater than A and B

In the above example, we have three numbers: a = 90, b = 180, and c = 190.

First, the condition a > b is checked. Since 90 > 180 is false, the else block is executed.

Inside the else block, the condition b > c is checked. Since 180 > 190 is false, the nested else block is executed.

Therefore, c is the largest number, and the output is:

C is greater than A and B.

Switch statement:

The switch statement is a conditional statement used to execute one block of code from multiple possible options based on the value of an expression.

It is useful when we need to compare one value with multiple possible values.

Syntax:

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

    case value2:
        // code
        break;

    case value3:
        // code
        break;

    default:
        // code
}

Example:

// Switch statement

let day = 4;

switch (day) {

    case 1:
        console.log("Sunday");
        break;

    case 2:
        console.log("Monday");
        break;

    case 3:
        console.log("Tuesday");
        break;

    case 4:
        console.log("Wednesday");
        break;

    case 5:
        console.log("Thursday");
        break;

    case 6:
        console.log("Friday");
        break;

    case 7:
        console.log("Saturday");
        break;

    default:
        console.log("Invalid day");
}

Output:

Wednesday

The switch statement compares day with each case:

3 is not equal to 1
3 is not equal to 2
3 is equal to 3

Therefore, the code inside case 3 is executed, and "Wednesday" is printed.

The break statement stops the execution of the switch statement after the matching case is executed.

The default block is executed when none of the cases match.

Operators in JavaScript Part-2

Rakshambika — Sat, 29 Aug 2026 15:19:47 +0000

Bitwise Operator:

Bitwise operators in JavaScript treat their operands as a sequence of 32 bits (zeros and ones) instead of normal numbers, performing operations directly at the binary level.
Bitwise operators are used to perform operations on the individual bits of a number.
Computers represent numbers internally in binary form (0s and 1s). Bitwise operators work directly with these binary representations.

Operator	Usage	Description
Bitwise AND	`x & y`	`1` in each bit position for which the corresponding bits of both operands are `1`.
Bitwise OR	`x \	y`
Bitwise XOR	`x ^ y`	`0` in each bit position for which the corresponding bits are the same and `1` in each bit position for which the corresponding bits are different.
Bitwise NOT	`~x`	Inverts all the bits of the operand.
Left Shift	`x << y`	Shifts `x` in binary representation `y` bits to the left, shifting in zeros from the right.
Right Shift	`x >> y`	Shifts `x` in binary representation `y` bits to the right, discarding bits shifted off.
Zero-fill Right Shift	`x >>> y`	Shifts `x` in binary representation `y` bits to the right, discarding bits shifted off and shifting in zeros from the left.

Example:

// Bitwise Operators
let a = 5;
let b = 3;

console.log(`Bitwise AND - ${a & b}`);
console.log(`Bitwise OR - ${a | b}`);
console.log(`Bitwise XOR - ${a ^ b}`);
console.log(`Bitwise NOT - ${~a}`);
console.log(`Left Shift - ${a << 1}`);
console.log(`Right Shift - ${a >> 1}`);
console.log(`Zero-fill Right Shift - ${a >>> 1}`);

Output:

Conditional (Ternary) Operator:

This is the only JavaScript operator that takes 3 operands.
It assigns one of the two values to a variable based on some condition.
The ternary operator is a shorthand way of writing an if...else statement.

The syntax for this operator is:
condition? val1: val2;

If the condition is true, this operator returns val1; else it returns val2.

Example:

let age = 20;

let result = age >= 18 ? "Eligible to Vote" : "Not Eligible to Vote";

console.log(result);

Output:

String Operator:

Sometimes you need to join two or more strings together in JavaScript. Technically, joining two strings is known as string concatenation.
We use the concatenation operator (+) for this purpose.
This operator concatenates two or more strings together and returns a single string which is the union of all the operand strings.
Remember, you need at least one of the operands as strings otherwise + will act as an Arithmetic Operator.

Example:

let a = "Age: ";
let b = 21;

console.log(a + b);

Output:

Operators in JavaScript Part-1

Rakshambika — Thu, 27 Aug 2026 13:30:00 +0000

Operators:

Operators are special symbols used to perform operations on operands (values or variables).

Types of Operators:

      - Arithmetic Operator
      - Assignment operators
      - Comparison operators
      - Logical operators
      - Bitwise operators
      - Conditional (ternary) operators
      - String operators

Arithmetic Operators:

Arithmetic operators are used to perform mathematical operations such as addition, subtraction, multiplication, division, and modulus on numeric values.

Operator	Description
Addition (`+`)	It returns the value after addition.
Subtraction (`-`)	It returns the value after subtraction.
Multiplication (`*`)	It returns the value after multiplying the operands.
Division (`/`)	It returns the value after dividing 2 operands.
Modulus (`%`)	It returns the integer remainder after dividing 2 operands.
Increment (`++`)	It adds 1 to the operand. For the prefix operator (`++var2`), it returns the value after adding 1. For the postfix operator (`var2++`), it adds 1 to the value and then returns the original value.
Decrement (`--`)	It subtracts 1 from the operand. For the prefix operator (`--var2`), it returns the value after subtracting 1. For the postfix operator (`var2--`), it subtracts 1 from the value and then returns the original value.
Exponentiation operator (`**`)	It calculates the base to the exponent power, i.e., `base ** exponent`.

Example:

 // Arithmetic Operator
        let a=100;
        let b=50;
        console.log(`Addition - ${a - b}`);
        console.log(`Subtraction - ${a - b}`);
        console.log(`Multiplication - ${a * b}`);
        console.log(`Division - ${a / b}`);
        console.log(`Modulus - ${a % b}`);
        console.log(`Pre-Increment - ${++a}`);
        console.log(`Post-Increment - ${a++}`);
        console.log(`Value of a - ${a}`);
        console.log(`Pre-Decrement - ${--a}`);
        console.log(`Post-Decrement - ${a--}`);
        console.log(`Value of a - ${a}`);

Output:

Assignment Operator:

Assignment operator in JavaScript is used to assign a value to a variable or property.

Name	Shorthand	Meaning
Assignment	`x = y`	`x = y`
Addition Assignment	`x += y`	`x = x + y`
Subtraction Assignment	`x -= y`	`x = x - y`
Multiplication Assignment	`x *= y`	`x = x * y`
Division Assignment	`x /= y`	`x = x / y`
Remainder Assignment	`x %= y`	`x = x % y`
Exponentiation Assignment	`x **= y`	`x = x ** y`

Example:

//Assignment Operator
        let a=100;
        let b=50;
        let c=2;
        let d=4;
        console.log(`Addition Assignment - ${a += b}`);
        console.log(`Subtraction Assignment - ${a -= b}`);
        console.log(`Multiplication Assignment - ${a *= b}`);
        console.log(`Division Assignment - ${a /= b}`);
        console.log(`Remainder Assignment - ${a %= b}`);
        console.log(`Exponentiation Assignment - ${c **= d}`);

Output:

Comparison operators:

Comparison operators are used to compare two values. The result of a comparison is always a Boolean value: true or false.

Operator	Description
Equal (`==`)	It returns true if the operands are equal.
Not equal (`!=`)	It returns true if the operands are not equal.
Strict equal (`===`)	It returns true if the operands are equal and of the same type.
Strict not equal (`!==`)	It returns true if the operands are not equal or are of different types.
Greater than (`>`)	It returns true if the left operand is greater than the right operand.
Greater than or equal (`>=`)	It returns true if the left operand is greater than or equal to the right operand.
Less than (`<`)	It returns true if the left operand is less than the right operand.
Less than or equal (`<=`)	It returns true if the left operand is less than or equal to the right operand.

Example:

// Comparison Operators
        let a = 100;
        let b = 50;

        console.log(`Equal - ${a == b}`);
        console.log(`Not Equal - ${a != b}`);
        console.log(`Strict Equal - ${a === b}`);
        console.log(`Strict Not Equal - ${a !== b}`);
        console.log(`Greater Than - ${a > b}`);
        console.log(`Greater Than or Equal - ${a >= b}`);
        console.log(`Less Than - ${a < b}`);
        console.log(`Less Than or Equal - ${a <= b}`);

Output:

Logical Operators:

Logical operators are used to combine or reverse conditions. They return a Boolean value (true or false).

Operator	Description
Logical AND	The AND operator returns true if both expressions are true, otherwise false.
Logical OR	The OR operator returns true if one or both expressions are true, otherwise false.
Logical NOT	The NOT operator (!) returns true for false expressions and false for true expressions.

Example:

// Logical Operators
let a = 100;
let b = 50;

console.log(`Logical AND - ${a > b && b > 0}`);
console.log(`Logical OR - ${a < b || b > 0}`);
console.log(`Logical NOT - ${!(a > b)}`);

Output:

Data Types in JavaScript

Rakshambika — Wed, 26 Aug 2026 14:10:00 +0000

What is Datatype?

Datatype is used to tell us that what kind of data is stored inside a variable.

Example:

let name = "Raksha";  // String
let age = 21;         // Number
let isStudent = true; // Boolean

There are two types of Datatypes:

       1. Primitive Datatype
       2. Non-Primitive Datatype

Primitive Datatype:

Primitive Datatypes are used to store a single value.
Primitive Datatypes in JavaScript are immutable in nature.
Immutable means their value can't be changed after creation.

Types of Primitive Datatypes:

        1. Number
        2. String
        3. BigInt
        4. Boolean
        5. Undefined
        6. Null
        7. Symbol

Number:

Number datatype is used to store the numeric values including both integer and decimals values.

Example:

let age = 21;
let marks = 85.5;
let temperature = -10;

Output:

console.log(typeof age);         // number
console.log(typeof marks);       // number
console.log(typeof temperature); // number

String:

string datatype is used to store sequence of characters as well as single characters.

Example:

let name="Raksha";
let grade="O";

Output:

console.log(typeof name);  // string
console.log(typeof grade); // string

Boolean:

boolean datatype is used to store true or false values.

Example:

let isStudent = true;
let isLoggedIn = false;

Output:

console.log(typeof isStudent); // boolean
console.log(typeof isLoggedIn); // boolean

BigInt:

bigint is used to store very large integer values. It is created by adding n at the end of an integer.

Example:

int largeNumber=123456789905322324456667864433n;

Output:

console.log(typeof largeNumber); // bigint

Undefined:

undefined datatype is used represents a variable that has been declared but has not been assigned a value.

Example:

let animal;

Output:

console.log(typeof animal); // undefined

Null:

null datatype is used to intentionally make the variable as empty.

Example:

let user = null;

Output:

console.log(user); // null

Text Properties in CSS

Rakshambika — Tue, 25 Aug 2026 13:30:00 +0000

Text Properties:

Text properties in CSS are used to control the appearance, alignment, spacing, decoration, and transformation of text on a webpage.

1.color:

color property is used to set the color for the text inside an element.

p{
   color:red;
}

2.text-align:

text-align property is used to align the text horizontally.

h1{
   text-align:center;
}

Values:
- left
- right
- center
- justify

3.text-decoration:

text-decoration property is used to add or remove decorations such as underline, overline or line-through from the text.

#heading{
text-decoration:underline;
}

Values:

   - none – Removes any text decoration
   - underline – Adds a line below the text
   - overline – Adds a line above the text
   - line-through – Adds a line through the middle of the text

4. text-transform:

text-transform property is used to change the text from one case to another.

h2 {
text-transform:uppercase;
}

Values:

uppercase
lowercase
capitalize
none

5.letter-spacing:

letter-spacing property is used to provide the space between the letters in the text.

p {
    letter-spacing: 2px;
}

6.word-spacing:

word-spacing property is used to provide space between the words in the text.

p {
    word-spacing: 5px;
}

7.text-indent:

text-indent property is used to adding space at the beginning of a line or paragraph.

p {
    text-indent: 50px;
}

Example:

Without Indentation:

This is the first line of the paragraph.
This is the second line of the paragraph.

With text-indent: 50px:

           This is the first line of the paragraph.
This is the second line of the paragraph.

Overflow in CSS

Rakshambika — Mon, 24 Aug 2026 13:30:00 +0000

Overflow Property:

Overflow in CSS is used to control what happens when the content inside an element is larger than the element's specified width or height.

Syntax:

selector {
    overflow: value;
}

Why do we use overflow?

Suppose a <div> has a fixed height, but the content inside it is too large. The content may go outside the boundaries of the element.

The overflow property controls whether that extra content should be:

Visible
Hidden
Scrollable
Automatically scrollable when necessary

Types of Overflow:

overflow: visible

This is the default value.

The content that exceeds the element's boundary will still be visible.

.box {
    width: 200px;
    height: 100px;
    overflow: visible;
}

overflow: hidden

The content that exceeds the element's boundary will be hidden.

.box {
    width: 200px;
    height: 100px;
    overflow: hidden;
}

overflow: scroll

This always displays scrollbars, even when the content does not necessarily need scrolling.

.box {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

overflow: auto

The browser automatically decides whether scrollbars are required.

.box {
    width: 200px;
    height: 100px;
    overflow: auto;
}

This is commonly preferred when you don't want unnecessary scrollbars.

Hoisting in JavaScript

Rakshambika — Sat, 22 Aug 2026 13:46:00 +0000

What is Hoisting in JavaScript?

Hoisting is the behavior of moving declarations to the top of their scope before the code is executed.

Hoisting with var:

Variables declared with var are hoisted and initialized with undefined.

Example:

<script>
console.log(name);

var name = "Raksha";

</script>

Output:

undefined

Hoisting with let:

Variables declared with let are hoisted but not initialized.
They remain in the Temporal Dead Zone (TDZ) until the declaration is reached.

What is Temporal Dead Zone?

TDZ (Temporal Dead Zone) is the period between entering a scope and the point where a let or const variable is declared and initialized.
During this period, the variable exists in memory, but JavaScript does not allow access to it.

Example:

<script>
console.log(age);

let age = 21;
</script>

Output:

ReferenceError: Cannot access 'age' before initialization.

Hoisting with const:

Variables declared with const are hoisted but not initialized.
They remain in the Temporal Dead Zone (TDZ) until the declaration is reached.
const behaves similarly to let.

Example:

<script>
console.log(PI);

const PI = 3.14;
</script>

Output:

ReferenceError: Cannot access 'age' before initialization.

Selectors in CSS

Rakshambika — Fri, 21 Aug 2026 14:30:00 +0000

There are five types of selectors are there:

  •   Simple Selector
  •   Combinator Selector
  •   Pseudo-class Selector
  •   Pseudo-element Selector
  •   Attribute Selector

Simple Selectors:

Simple selectors are used to select HTML elements based on their element name, class, ID, or all elements.

There are 4 main types of simple selectors:

1.Element Selector – Selects elements by their tag name.

p {
    color: blue;
}

2.Class Selector – Selects elements using the class attribute. It starts with ..

.box {
    color: red;
}

3.ID Selector – Selects an element using the id attribute. It starts with #.

#header {
    color: green;
}

4.Universal Selector – Selects all HTML elements. It is represented by *.

* {
    margin: 0;
}

Combinator Selectors

Combinator selectors are used to select HTML elements based on the relationship between two or more elements.

There are 4 main types:

1.Descendant Selector ( ) – Selects all elements inside another element.

div p {
    color: blue;
}

2.Child Selector (>) – Selects only the direct children of an element.

div > p {
    color: red;
}

3.Adjacent Sibling Selector (+) – Selects the element immediately following another element.

h1 + p {
    color: green;
}

4.General Sibling Selector (~) – Selects all sibling elements that come after another element.

h1 ~ p {
    color: orange;
}

Pseudo-class Selectors

Pseudo-class selectors are used to select an element based on its state, condition, or position.
They are written using a single colon (:).

Common pseudo-classes:

  •   :hover – Applies styles when the mouse pointer is over an element. 
  •   :focus – Applies styles when an element receives focus. 
  •   :active – Applies styles when an element is being clicked. 
  •   :first-child – Selects the first child element. 
  •   :last-child – Selects the last child element. 
  •   :nth-child() – Selects elements based on their position.

Pseudo-element Selectors

Pseudo-element selectors are used to style a specific part of an HTML element rather than the entire element.
They are written using a double colon (::).

Common pseudo-elements:

  •   ::before – Inserts content before an element. 
  •   ::after – Inserts content after an element. 
  •   ::first-letter – Styles the first letter of an element. 
  •   ::first-line – Styles the first line of an element. 
  •   ::selection – Styles the text selected by the user.

Attribute Selectors

Attribute selectors are used to select HTML elements based on their attributes or attribute values.
They are written using square brackets [].

Example

input[type="text"] {
    border: 1px solid blue;
}

Here, input[type="text"] selects only elements whose type attribute is "text".

The CSS style is applied only to the text input.

CSS Interview Questions

Rakshambika — Thu, 20 Aug 2026 13:30:00 +0000

CSS Interview Questions and Answers

1. What is CSS? What are the different ways to apply CSS?

CSS stands for Cascading Style Sheets.
It is a stylesheet language used to style and design HTML elements on a webpage.
CSS is used to control Colors, Fonts, Spacing, Sizes, Layouts, Borders, Animations, and Responsive Design.

h1 {
    color: blue;
    font-size: 30px;
}

Here, CSS changes the color and font size of the <h1> element.

Different ways to apply CSS

There are three ways to apply CSS to an HTML document:

1. Inline CSS

CSS is written directly inside the HTML element using the style attribute.

<h1 style="color: blue;">Hello World</h1>

Use: For applying styles to a single element.

2. Internal CSS

CSS is written inside the <style> tag within the <head> section of the HTML document.

<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>

Use: When styles are required for a single HTML page.

3. External CSS

CSS is written in a separate .css file and connected to the HTML file using the <link> tag.

style.css

h1 {
    color: blue;
}

index.html

<head>
    <link rel="stylesheet" href="style.css">
</head>

2. What is CSS Priority?

CSS Priority: Inline vs Internal vs External

When the same element is styled by Inline, Internal, and External CSS, the browser generally gives higher priority to Inline CSS.
Inline CSS generally has higher priority than Internal and External CSS.
For Internal vs External CSS, the one that comes later generally wins if both have the same specificity.

Example

External CSS

p {
    color: blue;
}

Internal CSS

<style>
    p {
        color: green;
    }
</style>

Inline CSS

<p style="color: red;">Hello</p>

The text will be red because the inline style has higher priority.

3. What is the CSS Box Model?

The CSS Box Model is a concept that describes how every HTML element is represented as a rectangular box on a webpage.

The Box Model consists of four parts:

Content – The actual content of the element, such as text or an image.
Padding – The space between the content and the border.
Border – The line surrounding the padding and content.
Margin – The space outside the border, used to create distance between elements.

The order is:

Content → Padding → Border → Margin

Example

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

4. What is the difference between `display: block` and `display: inline`?

`display: block`

A block-level element:

Starts on a new line.
Takes up the full available width by default.
Allows width and height to be applied.
Allows margin and padding on all sides.
Common block elements: <div>, <p>, <h1>, <section>.

Example

div {
    display: block;
    width: 200px;
    height: 100px;
}

`display: inline`

An inline element:

Does not start on a new line.
Takes only the width required by its content.
Width and height generally do not apply.
Horizontal margin and padding work, but vertical spacing behaves differently.
Common inline elements: <span>, <a>, <strong>, <em>.

Example

span {
    display: inline;
}

5. What is Flexbox? What are its main properties?

Flexbox, or Flexible Box Layout, is a CSS layout system used to arrange and align elements inside a container.
It makes it easier to create responsive layouts and control the direction, alignment, spacing, and size of elements.

To use Flexbox, we set:

.container {
    display: flex;
}

The element with display: flex becomes the flex container, and its direct children become flex items.

Main Flexbox Properties

1. `display: flex`

Makes an element a flex container.

.container {
    display: flex;
}

2. `flex-direction`

Defines the direction of the flex items.

.container {
    flex-direction: row;
}

Common values:

row – left to right
row-reverse – right to left
column – top to bottom
column-reverse – bottom to top

3. `justify-content`

Controls the alignment of items along the main axis.

.container {
    justify-content: center;
}

Common values:

flex-start
center
flex-end
space-between
space-around
space-evenly

6. What is Grid? What are its main properties?

CSS Grid is a two-dimensional layout system used to arrange elements into rows and columns.
It is useful when you need to create complex layouts where you want to control both horizontal and vertical positioning.

To use CSS Grid:

.container {
    display: grid;
}

Main Grid Properties

display: grid – Makes an element a grid container.
grid-template-columns – Defines the columns.
grid-template-rows – Defines the rows.
gap – Creates space between rows and columns.
grid-column – Controls how many columns an item occupies.
grid-row – Controls how many rows an item occupies.

7. How is Grid different from Flexbox?

The main difference is that Flexbox is one-dimensional, while CSS Grid is two-dimensional.

Flexbox is used to arrange elements in one direction at a time — either a row or a column.
Grid is used to arrange elements in both rows and columns at the same time.
Flexbox is useful for component-level layouts, such as navigation bars, buttons, and cards.
Grid is useful for larger page layouts, such as headers, sidebars, content areas, and footers.

Simple Example

Flexbox

.container {
    display: flex;
    justify-content: space-between;
}

It arranges items mainly along one axis.

Grid

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

It creates a layout with multiple columns and rows.

8. What is the `position` Property in CSS?

The CSS position property is used to control how an element is positioned on a webpage.
It allows us to position elements relative to their normal position, a parent element, the viewport, or the scrolling position.

Types of Position

There are 5 main values:

static
relative
absolute
fixed
sticky

Static → Default position.
Relative → Moves relative to its original position.
Absolute → Positioned relative to the nearest positioned ancestor.
Fixed → Positioned relative to the viewport and stays while scrolling.
Sticky → Acts like relative until a scroll threshold, then sticks.

9. What are Media Queries in CSS?

Media queries are a CSS feature used to apply different styles based on the screen size, device type, orientation, or other characteristics.

They are mainly used to make websites responsive, so the website looks good on mobile, tablet, and desktop devices.

Syntax

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

Here, the CSS inside @media will be applied when the screen width is 768px or less.

Example

.container {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

On a desktop, the items are displayed in a row.

On a mobile/tablet, the items are displayed in a column.

10. Why do we need a Responsive Web Page?

A responsive web page automatically adjusts its layout and content according to the screen size and device being used.

We need responsive web pages because users access websites from different devices such as mobile phones, tablets, laptops, and desktops.

Reasons

Works on different devices
The website can adapt to mobile, tablet, and desktop screens.
Better user experience
Users can easily read content, click buttons, and navigate the website without zooming or scrolling unnecessarily.
Improves accessibility
Content becomes easier to view and interact with across different screen sizes.
Reduces development effort
Instead of creating completely separate websites for mobile and desktop, one responsive website can adapt to different devices.
Improves SEO
Search engines generally prefer websites that provide a good experience across devices.
Future-friendly
A responsive layout can adapt more easily to new screen sizes and devices.

DEV Community: Rakshambika

Arrays in JS

What is Array?

Characteristics:

Creating a Array:

Accessing Array Elements :

Updating Array Elements:

Finding the Array Length:

Arrays can store heterogeneous data:

Loop for Arrays:

Adding Elements to an Array Without Functions:

Objects in JS

What is an Object?

Why do we use Objects?

Advantages of objects:

Creating Objects in JavaScript:

Accessing Objects in JavaScript:

Adding Properties:

Modifying Properties:

Deleting Properties:

Loop in JS

What is Loop?

Why do we use loop?

Types of Loop:

While loop:

do.. While Loop:

For Loop:

for .. in Loop:

for .. of Loop:

Conditional Statements in JS

What is Conditional Statements?

Types of Conditional Statements:

If statement:

if else statement:

else if statement:

Nested Statement:

Switch statement:

The default block is executed when none of the cases match.

Operators in JavaScript Part-2

Bitwise Operator:

Conditional (Ternary) Operator:

String Operator:

Operators in JavaScript Part-1

Operators:

Types of Operators:

Arithmetic Operators:

Assignment Operator:

Comparison operators:

Logical Operators:

Data Types in JavaScript

What is Datatype?

Text Properties in CSS

Text Properties:

Overflow in CSS

Overflow Property:

Types of Overflow:

Hoisting in JavaScript

What is Hoisting in JavaScript?

Hoisting with var:

Hoisting with let:

Hoisting with const:

Selectors in CSS

CSS Interview Questions

CSS Interview Questions and Answers

1. What is CSS? What are the different ways to apply CSS?

Different ways to apply CSS

1. Inline CSS

2. Internal CSS

3. External CSS

2. What is CSS Priority?

CSS Priority: Inline vs Internal vs External

Example

3. What is the CSS Box Model?

Example

4. What is the difference between display: block and display: inline?

display: block

Example

display: inline

Example

5. What is Flexbox? What are its main properties?

4. What is the difference between `display: block` and `display: inline`?

`display: block`

`display: inline`

1. `display: flex`

2. `flex-direction`

3. `justify-content`

8. What is the `position` Property in CSS?