DEV Community: Saravanan Lakshmanan

Immutable vs Mutable ||JavaScript Type Conversion

Saravanan Lakshmanan — Tue, 02 Jun 2026 10:29:16 +0000

Immutable vs Mutable (Non-Immutable)

Immutable

An immutable value cannot be changed after it is created.
When you modify it, JavaScript creates a new value instead of changing the original one.

Example
let a = "Hello"; a = "Hi";
What happens?
"Hello" // old value remains unchanged "Hi" // new value is created
The variable a now points to the new value "Hi".

Immutable Data Types

String
Number
Boolean
Null
Undefined
Symbol
BigInt

Mutable (Non-Immutable)

A mutable value can be changed after it is created.
Instead of creating a new value, JavaScript modifies the existing object.

Example
`let user = {
name: "John"
};

user.name = "David";What happens?{
name: "David"
}`
The same object is updated. No new object is required for this change.

Mutable Data Types

Object
Array
Function

Quick Comparison

Immutable	Mutable
Cannot be changed directly	Can be changed directly
Modification creates a new value	Modification updates the existing value
Primitive data types	Non-primitive data types
Example: String, Number	Example: Object, Array

Easy Memory Trick

Immutable = New value is created when changed
let x = 10; x = 20;

Mutable = Existing value is updated
let arr = [1, 2]; arr.push(3);
x = 20 creates a new value, while arr.push(3) changes the existing array.

JavaScript Type Conversion
In JavaScript Type Conversion can be defined as converting the data type of the variables from one type to the other manually by the programmer(explicitly) or automatically by the JavaScript(implicitly).

Implicit Type Conversion (Coercion): Implicit Type Conversion occurs automatically by the JavaScript.
Explicit Type Conversion: Explicit Type Conversion occurs when the programmer manually changes the type of the variables using the function Number(), String(), and Boolean().

Implicit Type Conversion (Coercion)
In JavaScript, the implicit type conversion or coercion conversion can be defined as the automatic conversion of the data type of the variables from one type to another type. Implicit type conversion mostly occurs when we are performing the arithmetic or the logical operations.

String with Number (Concatenation)
When we add a string with the number, the JavaScript automatically converts the number into a string and performs string concatenation.
let res = 5 + "5"; console.log(res);

Boolean to Number
When we perform the mathematical operations, then JavaScript automatically converts true to 1 and false to 0.
let res = true + 1; console.log(res);

Equality Comparison (==)
When we use the equality operator in the JavaScript, it compares them after converting the value into the same data type.
let res = (5 == "5"); console.log(res);

Automatic Conversion in Logical Operations
In JavaScript, these values are automatically converts undefined, null, "" (empty string), false, NaN, and 0 to false, and all other values to true.
let res = Boolean(""); let res2 = Boolean("Hello"); console.log(res) console.log(res2)

Explicit Type Conversion
In JavaScript, explicit type conversion can be defined as when we manually change the data type of the variable from one to other using some built-in JavaScript functions. JavaScript provides us the built-in functions for performing the explicit conversion.

Converting to String
In JavaScript, we can convert the value into a string using the String() function, toString(), and by concatenating the empty string.

let n = 123; let s1 = String(n); let s2 = n.toString(); console.log(s1) console.log(s2)

Converting to Number
In JavaScript, we can convert the value into a number using the Number() function, parseInt(), and parseFloat().

let s = "123"; let n = Number(s); let s1 = "12.34"; let n1 = parseFloat(s1); console.log(n) console.log(n1)

Converting to Boolean
In JavaScript, we can convert the value into a boolean we can use the Boolean() function.
let str = "Hello"; let b1 = Boolean(str); let emptyStr = ""; let b2 = Boolean(emptyStr); console.log(b1) console.log(b2)

Reasons to Learn JavaScript Type Conversion

Data Handling: In JavaScript when we are working with API responses, user inputs and calculations, these type of the operation require type conversion.
Prevent Bugs: It is important to understand the type conversion which can help in preventing bugs which occurs when JavaScript implicitly converts value.
Code Clarity: By performing the explicit conversion makes our code bug free and more clear.

JavaScript Type Conversion

Conversion Type	Implicit Conversion (Coercion)	Explicit Conversion
String + Number	Automatically converts numbers to strings	Use `String()` or `.toString()`
Number + Boolean	Converts `true` to `1` and `false` to `0`	Use `Number()`
String to Boolean	Non-empty strings become `true`, empty strings become `false`	Use `Boolean()`
Number from String	JavaScript may convert automatically during operations	Use `Number()`, `parseInt()`, or `parseFloat()`

References:
https://www.geeksforgeeks.org/javascript/javascript-type-conversion/
https://www.w3schools.com/js/js_type_conversion.asp
https://immutable-js.com/
https://www.geeksforgeeks.org/javascript/why-is-immutability-so-important-in-javascript/

Introduction to JavaScript

Saravanan Lakshmanan — Mon, 01 Jun 2026 10:17:09 +0000

Introduction to JavaScript
JavaScript is a versatile, dynamically typed programming language that brings life to web pages by making them interactive. It is used for building interactive web applications and supports both client-side and server-side development.

Interpreted language: Code is executed line by line.
Dynamically typed: Variable types are determined at runtime.
Single-threaded: Executes one task at a time (but supports asynchronous operations).

Features of JavaScript
Here are some key features of JavaScript that make it a powerful language for web development:

Client-Side Scripting: JavaScript runs on the user's browser, so it has a faster response time without needing to communicate with the server.
Versatile: Can be used for a wide range of tasks, from simple calculations to complex server-side applications.
Event-Driven: Responds to user actions (clicks, keystrokes) in real-time.
Asynchronous: It can handle tasks like fetching data from servers without freezing the user interface.
Rich Ecosystem: There are numerous libraries and frameworks built on JavaScript, such as React, Angular, and Vue.js, which make development faster and more efficient.

Client Side and Server Side nature of JavaScript
JavaScript's flexibility extends to both the client-side and server-side, allowing developers to create complete web applications. Here’s how it functions in each environment:

Client-Side: Involves controlling the browser and its DOM (Document Object Model). Handles user events like clicks and form inputs. Common libraries include AngularJS, ReactJS, and VueJS.
Server-Side: Involves interacting with databases, manipulating files, and generating responses. Node.js and frameworks like Express.js are widely used for server-side JavaScript, enabling full-stack development.

What Can JavaScript Do?

JavaScript is the programming language of the web.
It can calculate, manipulate and validate data.
It can update and change both HTML and CSS.

JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().

What is a JavaScript Compiler?
A compiler is a program that translates code written in one programming language into another language or a lower-level representation. In the context of JavaScript, a compiler translates human-readable JavaScript code into machine code or bytecode that can be executed by the computer’s CPU.
Unlike traditional compiled languages like C++ or Java, JavaScript is typically executed by an interpreter in the browser. However, modern JavaScript engines (like V8, SpiderMonkey, and JavaScriptCore) use a combination of interpretation and compilation to optimize performance. This approach is known as Just-In-Time (JIT) compilation.

JavaScript Data Types
A JavaScript variable can hold 8 types of data.

7 Primitive Data Types and 1 Object Data Type.

JavaScript data types are broadly classified into two categories:
JavaScript Data Types │ ├── Primitive Data Types │ ├── String │ ├── Number │ ├── Boolean │ ├── Undefined │ ├── Null │ ├── BigInt │ └── Symbol │ └── Non-Primitive (Reference) Data Types ├── Object ├── Array └── Function

Key Point:

Primitive data types store a single value.
Non-primitive data types store collections of data and are accessed through references.

JavaScript Variables
Variables = Data Containers
JavaScript variables are containers for data.

JavaScript variables can be declared in 4 ways:
Modern JavaScript

Using let
Using const

Older JavaScript

Using var (Not Recommended)
Automatically (Not Recommended)

Variables in JavaScript are used to store data values. They can be declared in different ways depending on how the value should behave.

Variables can be declared using var, let, or const.
JavaScript is dynamically typed, so types are decided at runtime.
You don’t need to specify a data type when creating a variable.

Declaring Variables in JavaScript
Before ES6 (2015): Variables were declared only with var, which is function-scoped and global-scoped, causing issues like hoisting and global pollution.
ES6 Introduction:let and const were introduced to provide safer alternatives for declaring variables.
Scope: let and const are block-scoped (limited to { } block) or global-scoped, reducing errors compared to var.

1. var keyword
var is a keyword in JavaScript used to declare variables and it is Function-scoped and hoisted, allowing redeclaration but can lead to unexpected bugs.

var a = "Hello Geeks"; var b = 10; console.log(a); console.log(b);

2. let keyword
let is a keyword in JavaScript used to declare variables and it is Block-scoped and not hoisted to the top, suitable for mutable variables
let a = 12 let b = "gfg"; console.log(a); console.log(b);

3. const keyword
const is a keyword in JavaScript used to declare variables and it is Block-scoped, immutable bindings that can't be reassigned, though objects can still be mutated.
const a = 5 let b = "gfg"; console.log(a); console.log(b);

Rules for Naming Variables
When naming variables in JavaScript, follow these rules

Variable names must begin with a letter, underscore (_), or dollar sign ($).
Subsequent characters can be letters, numbers, underscores, or dollar signs.
Variable names are case-sensitive (e.g., age and Age are different variables).
Reserved keywords (like function, class, return, etc.) cannot be used as variable names. let userName = "Suman"; // Valid let $price = 100; // Valid let _temp = 0; // Valid let 123name = "Ajay"; // Invalid let function = "gfg"; // Invalid

Radio Button Vs Checkbox in HTML

Saravanan Lakshmanan — Thu, 28 May 2026 16:10:03 +0000

Radio Button Vs Checkbox in HTML
Radio buttons allow users to select only one option from a group, while checkboxes permit multiple selections. Use radio buttons when exclusive choices are needed, and checkboxes for multiple independent choices.

These are the following topics that we are going to discuss:

Table of Content

Radio button
Checkbox
Difference between radio button and checkbox

Radio button
It is generally used in HTML forms. HTML forms are required when you need to collect some data from site visitors. A radio button is used when you want to select only one option out of several available options.
Example: This example shows the use of Radio buttons.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>GeeksfoGeeks</title>
</head>

<body>
    <form>
        Do you agree this statement?
        <br>
        <input type="radio" 
               name="agree" 
               value="yes">Yes
        <br>
        <input type="radio" 
               name="agree" 
               value="no">No
        <br>
        <input type="Submit">
    </form>
</body>

</html>

Checkbox
Checkboxes are also mostly used in HTML forms. A checkbox allows you to choose one or many options to be selected from a list of options.

Example: This example shows the use of checkbox.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Checkboxes</title>
</head>

<body>
    <form>
        Choose languages you know:
        <br>
        <input type="checkbox" 
               name="C" 
               value="yes">C
        <br>
        <input type="checkbox" 
               name="C++" 
               value="yes">C++
        <br>
        <input type="checkbox" 
               name="Java" 
               value="yes">Java
        <br>
        <input type="checkbox" 
               name="Python" 
               value="yes">Python
        <br>
        <input type="Submit">
    </form>
</body>

</html>

Difference Between Radio Button and Checkbox in HTML

Radio Button

Used when only one option should be selected from multiple available choices.
Created using the HTML <input> tag with type="radio".
Works as a single selection control.
Displayed as a small circle on the screen.
Has 2 states: Selected and Unselected.
Mainly used when you want to restrict the user to one choice only.

Example:

<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female

Checkbox

Used when one or multiple options can be selected.
Created using the HTML <input> tag with type="checkbox".
Works as a multiple selection control.
Displayed as a small square box on the screen.
Has 3 states: Checked, Unchecked, and Indeterminate.
Mainly used when you want to allow users to select multiple choices.

Example:

<input type="checkbox"> HTML
<input type="checkbox"> CSS
<input type="checkbox"> JavaScript

Conclusion

Use Radio Buttons for single selection.
Use Checkboxes for multiple selections.

References:
https://www.geeksforgeeks.org/html/radio-button-vs-checkbox-in-html/
https://byjus.com/gate/difference-between-radio-button-and-checkbox/
https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/

CSS Media Queries, CSS Outline, CSS Units

Saravanan Lakshmanan — Wed, 27 May 2026 10:49:35 +0000

CSS Media Queries
CSS Media Queries enable web pages to adjust their layout and styles based on different screen sizes, devices, or orientations. They are essential for building responsive and adaptable web designs.

Apply CSS rules conditionally based on screen width or height.
Help create responsive layouts for mobile, tablet, and desktop devices.
Support conditions like orientation, resolution, and device type.
Improve user experience across different devices.

<html>
<head>
    <style>
        .gfg {
            color: black;
        }
        @media screen and (max-width: 500px) {
            .gfg {
                color: green;
            }
        }
    </style>
</head>
<body>
    <div class="gfg">Sample Example of Media Query</div>
</body>
</html>

Media queries apply CSS rules based on device characteristics like screen width.
In your code, screens ≤500px wide change .gfg text color to green. Syntax: @media mediatype and (condition) { /* CSS styles */}

Media Types in CSS
Media types specify which devices the styles should apply to. Commonly used types include:

all → Suitable for all media devices.
print → Used for printers.
screen → Targeted at computer screens, tablets, smartphones, etc.
speech → Designed for screen readers that read the content aloud.

Media Queries for Multiple Screen Sizes

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .gfg {
            color: black;
        }
        @media screen and (max-width: 800px) {
            .gfg {
                color: blue;
            }
        }
        @media screen and (max-width: 500px) {
            .gfg {
                color: green;
            }
        }
    </style>
</head>
<body>
    <div class="gfg">Sample Example of Media Query</div>
</body>
</html>

Styles adjust dynamically based on screen width using media queries.
For screens 800px or smaller, the text color changes to blue.
For screens 500px or smaller, the text color changes to green.

Media Queries for Multiple Screen Sizes with Additional Styles

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .gfg {
            color: black;
            font-size: 20px;
            padding: 10px;
        }
        @media screen and (max-width: 800px) {
            .gfg {
                color: blue;
                font-size: 18px;
            }
        }
        @media screen and (max-width: 500px) {
            .gfg {
                color: green;
                font-size: 16px;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="gfg">Sample Example of Media Query</div>
</body>
</html>

Styles dynamically adjust based on screen width using media queries.
For screens 800px or smaller, the text color becomes blue, and the font size decreases to 18px.
For screens 500px or smaller, the text color changes to green, the font size reduces to 16px, and the text is center-aligned.

CSS Media Query Features
Media queries allow developers to check various device characteristics. Here are some important features:

color → Specifies the number of bits per color component for the device.
grid → Checks whether the device is grid or bitmap.
height → Represents the height of the viewport.
aspect-ratio → Defines the width-to-height ratio of the viewport.
color-index → Indicates how many colors the device can display.
max-resolution → The highest resolution the device can achieve, measured in dpi or dpcm.
monochrome → Shows the number of bits per color on a monochrome device.
scan → Refers to the method of scanning used by the output device.
update → Describes how fast the device can update its display.
width → Represents the width of the viewport.

CSS Outline
CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.
Syntax
selector{ outline: outline-width outline-type outline-color; /*outline: 2px solid grey;*/ }

Example: This example uses the outline property to create a dashed blue outline.

<!DOCTYPE html>
<html>

<head>
    <style>
        .dotted {
            outline: 2px dashed blue;
            color: green;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Outline Property</h3>
    <p class="dotted">
        A Computer Science portal for geeks.
    </p>
</body>

</html>

CSS outline properties can be categorized into 4 types, namely, Outline-style, Outline-color, Outline-width & Outline-offset. We will discuss all the types of outline properties sequentially through the examples.

CSS Outline Properties
There are lots of properties comes under the CSS outline collection all of them are well described with the example.

Table of Content

Outline-style
Outline-color
Outline-width
Outline-offset

Difference between em and rem units in CSS
The em is based on the parent font size so that it can change in nested elements, while rem is based on the root font size, keeping the size same throughout the whole page.

1. em Unit
The em unit in CSS is relative to the font size of its parent element. It scales based on the current element’s font size, affecting the size of nested elements according to their parent's size.

When em is used for font-size, it’s based on the parent’s font size. For other properties, it’s based on the element’s font size, except in the first declaration where the parent is referenced.

<!DOCTYPE html>
<html>

<head> 
    <style>
        .parent {
            font-size: 20px;
        }

        .child-em {
            font-size: 2em;
            margin: 1.5em;
        }
    </style>
</head>

<body>
    <div class="parent">
        This is parent
        <div class="child-em">
            This is Child in em unit system
        </div>
    </div>
</body>

</html>

2. rem Unit
The rem unit in CSS is relative to the font size of the root element (). It provides consistent scaling across the entire document, ensuring that elements are sized relative to a single base font size.

<!DOCTYPE html>
<html>

<head>
    <style>
        .parent {
            font-size: 20px;
        }

        .child-rem {
            font-size: 2rem;
            margin: 1.5rem;
        }
    </style>
</head>

<body>
    <div class="parent">
        This is parent
        <div class="child-rem">
            This is Child in rem unit system
        </div>
    </div>
</body>

</html>

References:
https://www.w3schools.com/css/css3_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using
https://www.geeksforgeeks.org/css/css-media-queries/
https://www.geeksforgeeks.org/css/css-outline/

CSS Selectors

Saravanan Lakshmanan — Tue, 26 May 2026 13:46:10 +0000

CSS Selectors

CSS Selectors are patterns used in CSS to select and target HTML elements so that styles can be applied to them. They define which elements on a web page should receive specific styling rules.

Used to select HTML elements based on tag name, class, id, or attributes.
Help apply styles like color, font, spacing, and layout.
Make web pages structured, consistent, and visually appealing.

CSS selectors are commonly grouped into five main categories:

1. Basic Selectors
Basic selectors in CSS are simple tools used for selecting by HTML element name (e.g., h1), class (.class Name), ID (#idName), or universally (* for all elements).

1. Universal Selector (*): Selects all elements on the page and applies the same style universally.

Example: Setting the font color for every element.

<html>
<head>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Header Text</h1>
    <p>Paragraph Text</p>
</body>
</html>

2. Element Selector: Targets all elements of a specific type, such as paragraphs or headers.

Example: Setting a common font size for all paragraphs

<html>
<head>
    <style>
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>This paragraph styled with font size 16px.</p>
</body>
</html>

3. Class Selector (.): Applies styles to elements with a specific class attribute.

Example: Making all buttons have a blue background.

<html>
<head>
    <style>
        .button {
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <button class="button">Click Me!</button>
</body>
</html>

4. ID Selector (#): Styles a single element identified by its unique id.

Example: changing the background color of a header.

<html>
<head>
    <style>
        #header {
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="header">This is the header section.</div>
</body>
</html>

2. Combinator Selectors
Used to define relationships between selectors, allowing you to style elements based on their hierarchy or positioning in the document. Common combinators include descendant ( ), child (>), adjacent sibling (+), and general sibling (~).

1. Descendant Selectors: Targets an element inside another, such as paragraphs inside div .

Example: Styling paragraphs inside a div.

<html>
<head>
    <style>
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>This paragraph inside a div will be red.</p>
    </div>
</body>
</html>

2. Child Selector (>): They only affects the direct child elements of a parent.

Example: Styling direct children paragraphs of a div.

<html>
<head>
    <style>
        div>p {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p>This is a direct child and has a left margin.</p>
        <div>
            <p>This is not a direct child.</p>
        </div>
    </div>
</body>
</html>

3. Adjacent Sibling Selector (+): Styles an element immediately following another .

Example: Making the first paragraph bold after an h1.

<html>
<head>
    <style>
        h1+p {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>This is a header.</h1>
    <p>This is immediately following the header and is bold.</p>
    <p>This will not be bold.</p>
</body>
</html>

4. General Sibling Selector (~): Styles all siblings that follow a specific element.

Example: Italicizing all paragraphs following an h1.

<html>
<head>
    <style>
        h1~p {
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>This is a header.</h1>
    <p>This is a sibling of the header and will be italicized.</p>
    <p>This will also be italicized because it's a sibling of the header.</p>
</body>
</html>

3. Attribute Selectors
Attribute selectors in CSS target elements based on the presence or value of their attributes.

1. Presence Selector: It selects elements that contain a specific attribute.

Example: styling all inputs with a type attribute.

<html>
<head>
    <style>
        input[type] {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Text input">
    <input type="number" placeholder="Number input">
</body>
</html>

2. Attribute Value Selector: It targets elements with a particular attribute value.

Example: Styling text inputs.

<html>
<head>
    <style>
        input[type="text"] {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Text input">
    <input type="password" placeholder="Password input">
</body>
</html>

3. Substring Matching(^=): It matches elements where the attribute contains a substring.

Example: Styling links with https in their href.

<html>
<head>
    <style>
        a[href^="https"] {
            color: green;
        }
    </style>
</head>
<body>
    <a href="https://example.com/">Secure link</a>
    <a href="http://example.com/">Non-secure link</a>
</body>
</html>

4. Wildcard Selector (*=): Matches elements where the attribute value contains a specific string.

Example: Underlining links with example in the URL.

<html>
<head>
    <style>
        a[href*="example"] {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="https://example.com/">This contains 'example' and is underlined.</a>
    <a href="https://otherlink.com">This is not underlined.</a>
</body>
</html>

5. Ends With Selector ($=): Matches elements whose attribute value ends with a specific string.

Example: Styling links that end with .pdf in their URL.

<style>
a[href$=".pdf"] {
    color: red;
}
</style>

Word Match Selector (~=): Matches elements whose attribute contains a specific whole word (space-separated).

Example: Styling elements that have the class highlight among multiple class names.

<style>
p[class~="highlight"] {
    background: yellow;
}
</style>

Hyphen Match Selector (|=): Matches elements whose attribute value starts with a word followed by a hyphen.

Example: Styling elements with language attributes like en or en-US.

<style>
p[lang|="en"] {
    color: blue;
}
</style>

4. Pseudo-Classes
Pseudo-classes in CSS define the special states of elements for styling.

:hover: Styles elements when the user hovers over them.

Example: Changing the color of a link when hovered.

<html>
<head>
    <style>
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <a href="https://example.com/">Hover over this to see the effect.</a>
</body>
</html>

:focus: Styles the elements when the user focus on any particular element.

<html>
<head>
    <style>
        input:focus {
            outline: 3px solid red;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

:first-child: Styles the element which is the first child of it's parent.

<html><head></head>
<style>
    p:first-child {
        color: brown;
    }
</style>
<body>
    <div>
        <p>Hello1</p>
        <p>Hello2</p>
    </div>
</body></html>

:last-child: Style's the element which is the last child of it's parent.

<html><head></head>
<style>
    p:last-child {
        color:green;
    }
</style>
<body>
    <div>
        <p>Hello1</p>
        <p>Hello2</p>
    </div>
</body></html>

:not: Helps to remove a particular element from the styling index or styling context.

<html><head></head>
<style>
    p:not(.one) {
        color: blue;
    }
</style>
<body>
    <div>
        <p class="one">Hello1</p>
        <p class="two">Hello2</p>
    </div>
</body></html>

5. Pseudo-Elements
Pseudo-elements allow you to target and style specific parts of an element, such as inserting content before or after it.

They can be used to style parts of text, like the first letter or line of a paragraph.
Pseudo-elements are commonly used to enhance and beautify the internal content of elements.

::before: To insert some content before an element.

<html><head></head>
<style>
    h1::before {
        content: "★ "
    }
</style>
<body>
    <h1 tabindex="0">Welcome to GFG</h1>
</body></html>

::after: To insert some content after an element.

<html><head></head>
<style>
    h1::after {
        content: "☀ ";
        color: orangered;
    }
</style>
<body>
    <h1 tabindex="0">Welcome to GFG</h1>
</body></html>

::first-line: Styles the first line of text within a block element. Line breaks mark the beginning of a new line.

<html><head></head>
<style>
    p::first-line {
        color: red;
    }
</style>
<body>
    <p>Welcome to GFG<br>
        Hello GFG</p>
</body>
</html>

::first-letter: It Styles the first-letter of a word or a sentence.

<html><head></head>
<style>
    p::first-letter {
        color: red;
        font-size: 23px;
    }
</style>
<body>
    <p>Welcome to GFG</p>
</body></html>

::placeholder: Styles the placeholder of a specific input field.

<html><head></head>
<style>
    input::placeholder {
        font-size: 20x;
        font-family: sans-serif;
        font-weight: 900;
    }
</style>
<body>
    <input type="text" placeholder="Enter your name">
</body></html>

References:
https://www.w3schools.com/css/css_howto.asp
https://www.geeksforgeeks.org/css/css-selectors/
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Type_selectors
https://www.programiz.com/css/units

Class and Pseudo Class

Saravanan Lakshmanan — Mon, 25 May 2026 10:38:33 +0000

HTML Class Attribute
The class attribute in HTML assigns one or more class names to elements so they can be styled with CSS or manipulated using JavaScript. It helps group elements for consistent design and behavior.

Used to apply CSS styles to multiple elements at once.
Allows JavaScript to select and manipulate elements.
Supports multiple class names in a single element.

Syntax
<tag class="classname"></tag>

Examples of HTML Class Attribute
Here is a basic example of an HTML Class Attribute:

1. Using the Same Class in Multiple HTML Tags
The HTML class attribute can be applied to various tags, allowing multiple elements to share a common classification. This enables consistent styling or functionality across different types of elements, enhancing design cohesion and simplifying maintenance.
Example: This example shows the use of the classes in HTML.

<!DOCTYPE html>
<html>

<head>
    <style>
        .country {
            background-color: black;
            color: white;
            padding: 8px;
        }
    </style>
</head>

<body>
    <h2 class="country">CHINA</h2>

    <p>
        China has the largest population
        in the world.
    </p>

    <h2 class="country">INDIA</h2>

    <p>
        India has the second largest
        population in the world.
    </p>

    <h2 class="country">UNITED STATES</h2>

    <p>
        United States has the third largest
        population in the world.
    </p>
</body>

</html>

In the above example each heading (<h2>) is assigned the class "country" using the class attribute.
The CSS selector .country targets multiple elements with the class "country" to apply styling.
Styling defined for the "country" class is applied uniformly to all headings tagged with it.
Using class attributes ensures consistent styling across headings, simplifying design management.

2. Using Multiple Classes on a Single Element
HTML allows an element to have multiple classes by separating class names with spaces. This enables a more modular and flexible approach to styling, where an element can share common styles but also have unique styles.

Example: In this example, we will use more than one class.

<!DOCTYPE html>
<html>

<head>
    <style>
        .country {
            color: white;
            padding: 10px;
        }

        .china {
            background-color: black;
        }

        .india {
            background-color: blue;
        }

        .usa {
            background-color: red;
        }

        center {
            padding: 20px;
        }
    </style>
</head>


<body>
    <center>
        <h2 class="country china">CHINA</h2>
        <h2 class="country india">INDIA</h2>
        <h2 class="country usa">UNITED STATES</h2>
    </center>
</body>

</html>

In the above example <h2> elements are assigned the "country" class for shared styling attributes.
Additional classes like "china", "india", and "usa" provide unique background colors.
Classes set background colors to black, blue, and red, with white text and padding for visual contrast.
The <center> tag ensures horizontal alignment of content, improving the presentation and readability of the page.

CSS Pseudo-classes
A pseudo-class is a keyword added to a CSS selector, prefixed by a colon (:), to define a specific state or condition of an element. It is used to style elements like a hovered button, the first child of a container, or checked input fields.
Syntax

selector:pseudo-class {
    /* styles */
}

Interactive/User Action Pseudo-Classes
1. :hover
This applies when the user hovers over an element.

<html>
<head>
    <style>
        button:hover {
            background-color: lightblue;
            color: white;
        }
    </style>
</head>
<body>
    <button>Hover over me!</button>
</body>
</html>

This will change the background color of the button when hovered over.

2. :focus
Applies when an element receives focus (e.g., a text input clicked)

<html>
<head>
    <style>
        input:focus {
            border: 2px solid blue;
            outline: none;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Click to focus">
</body>
</html>

This will change the border of the input field to blue when it is focused.

3. :active
Applies when an element is being clicked.

<html>
<head>
    <style>
        button:active {
            background-color: darkblue;
            color: white;
        }
    </style>
</head>
<body>
    <button>Click me!</button>
</body>
</html>

This will change the background color of the button when it is being clicked (in the active state).

4. :visited
Applies to links the user has visited.

<html>
<head>
    <style>
        a:visited {
            color: purple;
        }
    </style>
</head>
<body>
    <a href="https://www.example.com//">Visit this link</a>
</body>
</html>

This will change the color of visited links to purple.

5. :link
Applies to links that the user has not visited yet.

<html>
<head>
    <style>
        a:link {
            color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.example.com//">Visit this link</a>
</body>
</html>

This will make unvisited links appear in green.

References:
https://www.geeksforgeeks.org/css/css-pseudo-classes/
https://www.w3schools.com/css/css_pseudo_classes.asp
https://www.geeksforgeeks.org/html/html-class-attribute/
https://www.w3schools.com/html/html_classes.asp
https://pwskills.com/blog/web-development/html-class
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes

HTML Table Borders

Saravanan Lakshmanan — Fri, 22 May 2026 15:40:26 +0000

HTML Table Borders
HTML tables can have borders of different styles and shapes.

How To Add a Border
To add a border, use the CSS border property on table, th, and td elements:
Example:

table, th, td {
  border: 1px solid black;
}

Collapsed Table Borders
To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.

This will make the borders collapse into a single border:
Example:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Style Table Borders
If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:
Example:

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

Round Table Borders
With the border-radius property, the borders get rounded corners:

Example:

table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}

Skip the border around the table by leaving out table from the css selector:

Example:

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

Dotted Table Borders
With the border-style property, you can set the appearance of the border.

The following values are allowed:

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden Example:

 th, td {
  border-style: dotted;
}

** Border Color**
With the border-color property, you can set the color of the border.

Example:

 th, td {
  border-color: #96D4D4;
}

References:
https://www.w3schools.com/html/html_table_borders.asp
https://www.geeksforgeeks.org/html/html-table-border-attribute/

Semantic and Non-Semantic elements

Saravanan Lakshmanan — Thu, 21 May 2026 10:17:34 +0000

Semantic HTML elements
These semantic elements simply mean, elements with meaning. The reason being, there definition in the code tells the browser and the developer what they are supposed to do. Framing in simpler words, these elements describe the type of content they are supposed to contain.

Following is the list of some semantic elements:

article
aside
details
figcaption
figure
footer
form
header
main
mark
nav
table
section

Example: This example shows the use of semantic elements.

<!DOCTYPE html>
<html>

<head>
    <title>my web page</title>
    <style type="text/css">
        h1 {
            color: green;
            font-weight: bold;
        }

        table,
        tr,
        td {
            border: 1px solid black;
        }

        th {
            font-weight: bold;
            color: red;
        }
    </style>
</head>

<body>
    <article>
        <h1>GeeksforGeeks</h1>
        <p>A Computer Science Portal for Geeks</p>
    </article>
    <table>
        <tr>
            <th>head1</th>
            <th>head2</th>
        </tr>
        <tr>
            <td>A</td>
            <td>0</td>
        </tr>
        <tr>
            <td>B</td>
            <td>1</td>
        </tr>
    </table>
</body>

</html>

Non-Semantic elements
Unlike, semantic elements they don't have any meaning. They don't tell anything about the content they contain. They can be used with different attributes to mark up semantics common to a group.

Following is the list of some non-semantic elements:

div
span

Example: This example shows the use of non-semantic elements.

<!DOCTYPE html>
<html>

<head>
    <title>my web page</title>
    <style type="text/css">
        span {
            color: green;
            font-size: 40px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div>
        <span>GeeksForGeeks</span> <br>
        A computer science portal for geeks
    </div>
</body>

</html>

Difference between semantic and non-semantic elements Semantic elements Non-Semantic elements They have meaning They don't have meaning They describe how the content within them is supposed to behave They can contain anything They have specific attributes for their structure The 'class' attribute can be used to work with their structure

Reference: https://www.geeksforgeeks.org/html/difference-between-semantic-and-non-semantic-elements/

GitHub vs GitLab

Saravanan Lakshmanan — Wed, 20 May 2026 11:14:31 +0000

GitHub vs GitLab — Which One Should You Use?

Version control platforms are essential for modern development. Two of the most popular choices are GitHub and GitLab. Both are built around Git, but they focus on slightly different goals and workflows.

This article explains the differences in a simple, practical way with advantages and disadvantages of each.

What is GitHub?

GitHub is the world’s most popular code hosting platform, owned by Microsoft.
It is widely used for open-source projects, personal portfolios, and team collaboration.
GitHub focuses on simplicity, community, and developer networking.

What is GitLab?

GitLab is a complete DevOps platform that provides source code hosting along with built-in CI/CD, security tools, and deployment features.
GitLab focuses on the entire software development lifecycle.

| Feature | GitHub | GitLab | | ------------ | --------------------------------- | -------------------------- | | Main Focus | Code hosting & collaboration | Full DevOps lifecycle | | Popularity | Very high | Moderate | | Best for | Students, open-source, portfolios | Teams, DevOps, enterprises | | CI/CD | Good (GitHub Actions) | Excellent (built-in) | | Self-hosting | Limited | Strong support |

GitHub Advantages

1.Massive Community

GitHub hosts millions of repositories and is the default platform for open-source projects.
Most developers, recruiters, and companies actively use GitHub.

This makes it ideal for:

Showcasing projects
Networking
Contributing to open source
Job hunting

2.Beginner-Friendly Interface

GitHub has a clean and simple UI that is easy to understand for new developers.

Learning curve is minimal compared to GitLab.

3.Strong Portfolio Value

Recruiters often ask for GitHub profiles.
A strong GitHub profile can directly improve job opportunities.

4.Powerful Integrations

GitHub integrates easily with many tools:

VS Code
Slack
Docker
Cloud platforms

5.GitHub Actions (CI/CD)

GitHub provides built-in automation for:

Testing
Building
Deploying applications

It is sufficient for most projects.

GitHub Disadvantages

1. Limited Built-in DevOps Tools

Advanced DevOps features often require external tools or integrations.

2. Advanced Features Can Be Expensive

Enterprise features and higher CI/CD usage can become costly.

3. Less Built-in Project Management

Compared to GitLab, GitHub has fewer built-in planning tools.

GitLab Advantages

1.Complete DevOps Platform

GitLab provides an all-in-one solution:

Source control
CI/CD pipelines
Issue tracking
Security scanning
Deployment tools

No need for many third-party integrations.

2.Powerful Built-in CI/CD

GitLab pipelines are available out of the box and are more advanced than GitHub’s default setup.

3.Self-Hosting Option

Organizations can host GitLab on their own servers for:

Privacy
Security
Compliance

This is a major advantage for enterprises.

4.Better Project Management Tools

GitLab includes:

Issue boards
Roadmaps
Milestones
Time tracking

This makes it suitable for large teams.

GitLab Disadvantages

1.Smaller Community

GitLab has fewer public repositories and less open-source visibility than GitHub.

2.More Complex Interface

The platform has many features, which can feel overwhelming for beginners.

3.Less Recognition for Portfolios

Recruiters usually expect GitHub links rather than GitLab profiles.

Collaboration: A Common Myth

Both GitHub and GitLab allow:

Unlimited repositories
Unlimited collaborators
Large team workflows

There is no restriction like “only 2–3 people per project.”
Teams with dozens or even hundreds of developers use both platforms.

When to Choose GitHub

Choose GitHub if you are:

A student or beginner
Building a portfolio
Contributing to open-source projects
Preparing for job interviews

GitHub is the best starting point for most developers.

When to Choose GitLab

Choose GitLab if you are:

Working in a company environment
Managing large development teams
Using CI/CD heavily
Practicing DevOps workflows

GitLab is ideal for full project lifecycle management.

Final Verdict

Both platforms are excellent and built on the same Git foundation.

GitHub is best for learning, sharing, and career growth.
GitLab is best for DevOps, automation, and enterprise workflows.

Many developers end up using both during their careers.

HTML & CSS Beginner Q/A

Saravanan Lakshmanan — Tue, 19 May 2026 10:53:27 +0000

1.What is the purpose of box-sizing: border-box?

By default, CSS uses content-box. That means width/height applies only to the content, and padding + border are added on top, making the element bigger than expected.

box-sizing: border-box changes this behavior so that:

Width = content + padding + border

Example:
width: 200px; padding: 20px; border: 5px;

Without border-box → total width becomes 250px
With border-box → total width stays 200px

Why we use it in projects:

Layout becomes predictable
Easier responsive design
No unexpected overflow issues

This is why many projects set this globally:
* { box-sizing: border-box; }

2.How does grid-template-columns: 2fr 1fr work?

fr = fraction of available space.

grid-template-columns: 2fr 1fr means:

Create two columns

First column takes 2 parts
Second column takes 1 part

So the first column is twice as wide as the second.

Example layout:
| 2/3 width | 1/3 width |

It divides remaining space, not fixed pixels.

3.Difference between semantic tags (<main>, <footer>) vs <div>
non-semantic tags?

They describe the meaning of the content.

Examples:

<main> → main content <header> → top section <footer> → bottom section <nav> → navigation

Benefits:

Better SEO
Better accessibility (screen readers)
Cleaner, meaningful code

<div>

Has no meaning
Used only for styling or grouping

Think of it like:

Semantic tags = labeled boxes
Div = plain box

4.Why is vh used instead of px?

vh = viewport height
1vh = 1% of screen height

Example:
height: 100vh;

Means: element fills entire screen height

Why use vh?

Responsive design
Works on all screen sizes
Avoids scroll gaps

px is fixed and does not adapt to screen size.

Use case:
.hero { height: 100vh; }

5.Difference between Padding and Margin

Margin
Space outside the element.

It creates distance between elements.

Simple memory trick:

Padding = inner space
Margin = outer space

6.Difference between Grid and Flexbox

Flexbox (1-Dimensional)

Used for layout in one direction

Row OR Column

Best for:

Navbar
Buttons
Centering items
Small layouts

Grid (2-Dimensional)

Used for layout in rows AND columns

Best for:

Page layout
Dashboards
Complex sections

Quick summary:
| Feature | Flexbox | Grid | | --------- | ---------- | ------------ | | Direction | 1D | 2D | | Use case | Components | Page layouts |

7.What are self-closing tags?

Tags that don’t need a closing tag because they don’t wrap content.

Examples:
<img> <input> <br> <hr> <meta>

They insert something instead of containing text.

8.Purpose of the meta viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tells the browser:

Match the page width to the device screen
Do not zoom out like desktop view
Make the website mobile-friendly

Without this tag:

Website appears zoomed out on phones
Layout breaks on mobile

It is essential for responsive design.

HTML Input tag & Gap

Saravanan Lakshmanan — Mon, 18 May 2026 18:10:44 +0000

HTML input Tag

The HTML tag is used to create interactive form controls that allow users to enter data in a webpage. It supports multiple input types such as text, password, email, number, and more for collecting user information.

HTML Input Types

<input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text"> <input type="time"> <input type="url"> <input type="week">

In HTML5, elements are divided into types.
<input> belongs to void elements.

Void elements

Cannot have closing tag
Cannot have content inside
They end in the opening tag itself

But in day-to-day learning, people often say self-closing tag.

CSS gap Property

The CSS gap property defines the spacing (or "gap") between rows and columns in layouts such as Flexbox, Grid, or multi-column layouts. It simplifies the process of creating consistent spacing by combining row-gap and column-gap into one property. You can specify the gap using length units (e.g., px, em) or percentages.

Syntax:
gap: <row-gap> <column-gap>
DIFFERENCE BETWEEN PADDING AND GAP:

Padding

Padding = space INSIDE an element (inside the border)
It creates space between the content and the border of that element.
Think: space inside the box

Syntax:
.box{ padding:20px; }

The text moves away from the border.

Padding belongs to one element only.

Gap

Gap = space BETWEEN child elements

It works only inside:

flex container
grid container

Think: space between items

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

Example:
<div class="container"> <div>A</div> <div>B</div> <div>C</div> </div>

Now space appears between A, B, C.

Gap belongs to the parent container, not the child.

Easy Visualization
Padding
[ content ] ^ inside space ^

Gap
[A] [B] [C] ^ between space ^

CSS types & HTML elements

Saravanan Lakshmanan — Sat, 16 May 2026 07:37:32 +0000

Types of CSS (Cascading Style Sheet)
CSS is used to style and layout web pages, controlling the appearance of HTML elements. It allows developers to create visually appealing designs and ensure a consistent look across a website.

Types of CSS
CSS can be implemented in three different ways:

Inline CSS
Internal or Embedded CSS
External CSS

1. Inline CSS
Inline CSS involves applying styles directly to individual HTML elements using the style attribute. This method allows for specific styling of elements within the HTML document, overriding any external or internal styles.
2. Internal or Embedded CSS
Internal or Embedded CSS is defined within the HTML document’s style element. It applies styles to specified HTML elements. The CSS rule set should be within the HTML file in the head section. In other words, the CSS is embedded inside the style tag within the head section of the HTML file.
3. External CSS
External CSS contains separate CSS files that contain only style properties with the help of tag attributes (For example class, id, heading, ... etc). CSS property is written in a separate file with a .css extension and should be linked to the HTML document using a link tag. It means that, for each element, style can be set only once and will be applied across web pages

HTML Elements
HTML elements are the basic building blocks of a webpage, defining its structure and content using start tags, content, and end tags.

HTML elements start with an opening tag and end with a closing tag , and can contain text, attributes, or other nested elements.
Some elements are self-closing (e.g., break tag, image tag), and browsers use elements to render the page visually.
Properly nesting elements ensures valid, accessible, and well-structured HTML.

Case Sensitivity
HTML tags are not case-sensitive, but using lowercase is recommended for consistency and readability.

HTML tags are not case-sensitive. For example, B<> and b<> both represent bold text.
However, it’s a best practice to use lowercase tags for consistency and readability.

Block-Level Elements and Inline Elements
In HTML, elements are broadly categorized into two main types based on how they display in the document layout: block-level elements and inline elements.

1. Block-Level Elements
Block-level elements start on a new line, occupy the full available width, stack vertically, and can contain both block-level and inline elements.

Examples

div tag: A general-purpose container for other elements.
p tag: Defines a paragraph.
h1, h2, h3, h4, h5, h6: Heading elements of different levels.
ol, ul: Ordered and unordered lists.
table: Defines a table.
form: Used for HTML forms to collect user inputs.
section, article, nav, aside, header, footer: Semantic elements that define areas of a webpage.

2. Inline Elements
Inline elements do not start on a new line, take only the width of their content, and are used within block-level elements to add or style content.

span tag: A general-purpose inline container for phrasing content.
a tag: Creates hyperlinks.
img tag: Embeds an image.
strong tag, b tag: Used for strong emphasis and bold text, respectively.
em tag, i tag: Used for emphasis and italic text, respectively.
br tag: Inserts a line break within text.
input tag: Creates interactive controls for forms.

Tags vs Elements vs Attributes in HTML
In HTML, tags represent the structural components of a document, such as h1 tag for headings. Elements are formed by tags and encompass both the opening and closing tags along with the content. Attributes provide additional information or properties to elements, enhancing their functionality or appearance.

HTML Tags:
HTML tags are the starting and ending parts of an HTML element. They begin with the less-than symbol and end with the greater-than symbol. Whatever is written inside these symbols are called tags.

HTML Elements:
An HTML element consists of both the opening and closing tags along with the content inside those tags. It usually forms the structure used to define the purpose of the tag.

Example: In this example, b is the starting tag and /b is the ending tag, with content placed inside it.

HTML Attributes:
HTML attributes are used to define the characteristics of an HTML element. They are always placed in the opening tag of an element and usually provide additional information or styling to the element.

Example: In this example, p is the starting tag and /p is the ending tag with extra CSS attributes included.

References:
https://www.geeksforgeeks.org/css/types-of-css-cascading-style-sheet/
https://www.geeksforgeeks.org/html/html-elements/
https://www.geeksforgeeks.org/html/tags-vs-elements-vs-attributes-in-html/