DEV Community: Vigneshwaran V

Welcome to JS

Vigneshwaran V — Thu, 04 Jun 2026 17:46:48 +0000

History of JavaScript

Who Developed JavaScript?

JavaScript was created by Brendan Eich in 1995.
At that time, he was working at Netscape Communications Corporation, the company that developed the popular web browser Netscape Navigator.

Why Was JavaScript Created?

In the early 1990s, websites were mostly static. Pages could display text and images, but they could not react to user actions without sending requests to the server.

Netscape wanted a scripting language that would:

Run directly in the browser
Be easy for web designers and beginners
Add interactivity to web pages
So Brendan Eich was assigned the task of creating such a language.

How Long Did It Take?

A famous fact about JavaScript is that Brendan Eich developed the first version in about 10 days in May 1995.

Although it was created quickly, the language continued to evolve and improve over the years.

The Original Names

Mocha (initial name).
LiveScript.
JavaScript (final name).
Netscape renamed it to JavaScript because Java, developed by James Gosling at Oracle Java Technology (originally Sun Microsystems), was extremely popular at the time.
This was largely a marketing decision.

Is JavaScript Related to Java?

No.
Although their names are similar, they are different languages.

Standardization of JavaScript

As JavaScript became popular, different browsers started implementing their own versions, creating compatibility issues.
To solve this, Netscape submitted JavaScript to the standards organization Ecma International.

In 1997, the standardized version became:
ECMAScript (ES)

ECMAScript is the official specification, while JavaScript is the most popular implementation of that specification.

Major Versions of ECMAScript

ECMAScript 1 (1997)

The first official standard.

ECMAScript 3 (1999)

Added many important features and became widely adopted.

ECMAScript 5 (2009)

Introduced:

Strict mode
JSON support
New array methods

ECMAScript 6 / ES2015 (2015)

One of the biggest updates ever.
Added:

let
const
Arrow functions
Classes
Modules
Template literals
Promises

Timeline Summary

1995 → Brendan Eich creates JavaScript at Netscape.
1995 → Named Mocha → LiveScript → JavaScript.
1997 → ECMAScript standard released.
1999 → ECMAScript 3 becomes widely used.
2005 → AJAX revolution.
2008 → Google Chrome launches V8 engine.
2009 → Node.js created.
2015 → ES6 introduces modern JavaScript features.
Today → JavaScript powers much of the modern web.

JavaScript

JavaScript (JS) is a lightweight, interpreted programming language primarily used to add interactivity and dynamic behavior to websites. Alongside HTML (structure) and CSS (styling), it forms one of the three core technologies of the World Wide Web. Originally created by Brendan Eich at Netscape in 1995 to work strictly inside web browsers, JavaScript has evolved into a versatile, full-stack language that can run on servers, mobile devices, and more.

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.

Core Technical Characteristics

Interpreted / JIT Compiled: Code runs line-by-line in the browser. Modern engines use Just-In-Time (JIT) compilation to convert it to machine code instantly for speed.
Dynamically Typed: Variable types are figured out at runtime. You do not need to explicitly declare data types like int or string.
Single-Threaded Concurrency: It executes one task at a time but avoids freezing interfaces by handling tasks like data loading asynchronously via an event loop.
Multi-Paradigm: It supports Object-Oriented, Imperative, and Functional programming styles.

Where JavaScript is Used

Client-Side (Browsers): Validating form inputs, creating animations, refreshing feeds without reloading, and updating the page layout through the Document Object Model (DOM).
Server-Side (Backend): Building scalable backend APIs and database operations using runtimes like Node.js.
Mobile & Desktop Apps: Developing cross-platform mobile apps with React Native and desktop apps via Electron.
Game Development: Creating standard browser-based 2D and 3D games using libraries like Phaser.

Features of JavaScript

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.

JavaScript Versions

Let’s take a look at the different versions of ECMAScript, their release years, and the key features they introduced

Reference

https://www.geeksforgeeks.org/javascript/introduction-to-javascript/

Conditional Statements in JS

Vigneshwaran V — Thu, 04 Jun 2026 06:33:29 +0000

Conditional statements in JavaScript control the flow of program execution by running different code blocks based on whether a specified condition evaluates to true or false.

1. The if Statement

The basic if statement executes a block of code only if the condition inside the parentheses evaluates to a truthy value.

let speed = 75;

if (speed > 60) {
  console.log("You are speeding!"); 
}

2. The if...else Statement

The if...else structure provides an alternative block of code that runs if the initial condition evaluates to a falsy value.

let age = 16;

if (age >= 18) {
  console.log("Allowed to vote.");
} else {
  console.log("Too young to vote."); // Executes if age is less than 18
}

Real life example

here the conditional statements are applicable in real life also we also accepts the conditions based on the situations.

Think like this

we get ready to go for our daily classes, the classes start at 9.00 AM.

(if we wakeup at 6.00 AM) then we have lot of time to do our workouts, study, and time to get ready for classes, and have time to eat breakfast.
or (Else if we wakeup at 7.00 AM) then we have time to study, and time to get ready for classes, and have time to eat breakfast.
(Else) the wakeup time later than 7.00 AM, example if we wakeup at 8.00 AM means we don't have enough time to do all our works so we have time to get ready for classes and eat the breakfast. here we need to skip our workouts, and studies because of the situation
we need to go with this condition.

Now we see one real life example with code.

I decided to buy a new phone today.
I have 45000/- in my hand and I visit the mobile shop near me.
I ask the price of the mobile based on the models.
I like iphone so I Ask the price of the base variant. they told the starting price as 70000/- but i have only 45000/- then I need to go for another model because of this condition.
And I also like the pixel phone, so I Ask about it specifications and price then they said the starting price as 55000/- but i have only 45000/- right. because of this condition I need to choose another one.
Then finally I Ask About SAMSUNG mobile phones, like specs and price of some models they said the starting price as 43999/- so I can able to buy that, they suggest me SAMSUNG GALAXY A56 5g as the price point of 43999/- now the condition is satisfied because i have 45000/- in my hand then I go with SAMSUNG.

Example Code

let mybutget=45000;

let iphone_price = 70000;
let pixel_price = 55000;
let samsung_price = 43999;

if(mybutget>=iphone_price){
    console.log("I can buy Iphone");
}
else if(mybutget>=pixel_price){
    console.log("I can buy Pixel phone");
}
else if(mybutget>=samsung_price){
    console.log("I can buy SAMSUNG phone")
}
else{
    console.log("I can't able to buy phone")
}

Output

I can buy SAMSUNG phone

=== Code Execution Successful ===

like this the conditional statement works, first it check the first condition it is true means the condition satisfied and it execute that if() block. are else it checks the another condition as second condition if it true then it execute that if else() block. or it checks another conditions if it have another if else() then it evaluate either the condition satisfied or not, satisfied means that if else() block executes, or it execute the else block it is the final block which execute if not other block conditions satified.

Reference

https://www.geeksforgeeks.org/javascript/conditional-statements-in-javascript/

Operators in js

Vigneshwaran V — Wed, 03 Jun 2026 06:43:04 +0000

what is operators?

An operator in JavaScript is a special symbol or keyword used to perform operations on values and variables. The values that the operator acts upon are called operands.

For example, in the expression let sum = 10 + 5;, the + symbol is the operator, while 10 and 5 are the operands.

Classification by Number of Operands

JavaScript operators are structurally divided into three main categories based on how many values they manipulate:

Unary Operators: Work on a single operand (e.g., ++x or typeof x). Ex:

// Case 1: Postfix
let x = 12;
let y = x++;
console.log(x);
console.log(y);

// Case 2: Preifix
x = 10;
y = ++x;
console.log(x);
console.log(y);

Binary Operators: Work on two operands (e.g., x + y or x == y). Ex:

10 + 20
// 30

20 - 5
// 15

30 / 6
// 5

Ternary Operator: Works on three operands. JavaScript has exactly one, the conditional operator (condition ? value1 : value2).
Ex:

const age = 18;
const status = age >= 18 ? "Adult" : "Minor";
console.log(status);

Operators types:

1. Arithmetic Operators

Used for mathematical calculations.

console.log(10 + 5); // 15
console.log(10 % 3); // 1

2. Assignment Operators

Used to assign values to variables.

let x = 10;
x += 5;        //x=x+5
console.log(x); // 15

3. Comparison Operators

Used to compare values. They return true or false.

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

4.logical operators

Logical operators in JavaScript are symbols used to combine or modify expressions to determine the logic between values and control program flow.

While they are typically used with Boolean (true/false) values in conditional statements like if blocks, they can actually be applied to values of any data type.

1. Logical AND (&&)

Returns true only when all conditions are true.
The && operator stops at the first falsy value it encounters and returns it. If all values are truthy, it returns the last value.
Syntax

condition1 && condition2

Example:

let age = 20;

console.log(age > 18 && age < 30);

Output:

true

2. Logical OR (||)

Returns true if at least one condition is true.
The || operator stops at the first truthy value it encounters and returns it. If all values are falsy, it returns the last value.

Syntax:

condition1 || condition2

Example

let age = 15;

console.log(age < 18 || age > 60);

Output

true

3. Logical NOT (!)

Reverses the result.

true becomes false.
false becomes true.
Unlike && and ||, the ! operator always returns a strict boolean (true or false). It converts the operand to its boolean equivalent and then flips it.

Example

let isLoggedIn = true;

console.log(!isLoggedIn);

Output:

false

5. Increment and Decrement Operators

++ operator is used to increase the value by 1.
-- operator is used to decrease the value by 1.

let n = 5;

n++;
console.log(n); // 6

n--;
console.log(n); // 5

Pre and Post Increment

In JavaScript, the main difference between pre-increment and post-increment is the order in which the value is changed and returned. Both operations add 1 to the target variable, but they behave differently when used inside expressions, assignments, or functions.

Pre-Increment ++x Increments first, then returns.New value (after adding 1).
Post-Increment x++ Returns first, then increments.Old value (before adding 1).
same rule is applicable for decrement operator.

Example

let a = 5;

console.log(++a); // 6 (increment first)

let b = 5;
console.log(b++); // 5 (use first, then increment)
console.log(b);   // 6

Remember

&& → All conditions must be true.
|| → At least one condition must be true.
! → Opposite of the condition.

References

https://www.freecodecamp.org/news/unary-binary-ternary-operators-javascript/

https://www.geeksforgeeks.org/javascript/javascript-operators/

Type conversion in js

Vigneshwaran V — Tue, 02 Jun 2026 13:42:06 +0000

Type Conversion means converting a value from one data type to another in JavaScript.
There are two types:

Implicit Type Conversion (Type Coercion) – JavaScript does it automatically.
Explicit Type Conversion – You do it manually.

What is DataTypes:

In JavaScript, a data type describes the classification of a value that determines what kind of operations can be performed on it. JavaScript is a dynamically typed language, meaning variables are not bound to any specific data type and can change types automatically at runtime.
The latest ECMAScript standard defines 8 fundamental data types, which are divided into two main categories: Primitive and Non-Primitive (Reference) types.

1. Primitive Data Types

Number
String
Boolean
Undefined
Null
BigInt
Symbol

2. Non-Primitive Data Types

Object
Array
Function
Date
Map
Set

Checking Data Types

Use typeof:

In JavaScript, the typeof operator evaluates an operand and returns its data type as a string. It is a unary operator heavily relied on for runtime type checking and handling dynamic values securely.

typeof 42;          // "number"
typeof "hello";     // "string"
typeof true;        // "boolean"
typeof undefined;   // "undefined"
typeof 123n;        // "bigint"
typeof Symbol();    // "symbol"
typeof {};          // "object"
typeof [];          // "object"
typeof function(){} // "function"

Note: typeof null returns "object" due to a historical JavaScript bug.

typeof null; // "object"

When JavaScript stores values internally, it keeps a small code (called a type tag) to identify what type of value it is.

When JavaScript was created in 1995, the developers made a mistake in how null was represented internally. The binary value used for null looked similar to the one used for objects.

So when typeof checks the type tag, it sees:

typeof null

and incorrectly thinks:

"object"

instead of:

"null"

Yes. This gets into how the first JavaScript engine represented values internally.

A simplified explanation is:

Values were stored as a 32-bit binary number.
The lowest few bits were used as a type tag.
Objects were identified with the tag 000.

Unfortunately, null was represented internally as:

00000000000000000000000000000000

Notice that the last few bits are also:

The engine interpreted that tag as:

000 → Object

Imagine JavaScript uses the last 3 bits as type tags:

Now consider:

null = 00000000000000000000000000000000

The last 3 bits are:

which matches the Object tag.
So the engine says:

null → tag 000 → object

Implicit Type Conversion (Coercion)

Implicit Type Conversion (also called Type Coercion) is when JavaScript automatically converts one data type into another without you writing the conversion code.

Example 1: Number + String

let result = 10 + "5";

console.log(result); // "105"

JavaScript converts 10 (number) into "10" (string) and then concatenates.

"10" + "5" = "105"

Example 2: String - Number

let result = "10" - 5;

console.log(result); // 5

JavaScript converts "10" into 10 and performs subtraction.

10 - 5 = 5

Example 3: String * Number

let result = "10" * 5;

console.log(result); // 50

JavaScript converts "10" to 10

10 * 5 = 50

Example 4: Boolean to Number

console.log(true + 1);  // 2
console.log(false + 1); // 1

Conversion:

true  → 1
false → 0

Example 5: Null Conversion

console.log(null + 5);

Output:

Because:

null → 0
0 + 5 = 5

Example 6: Undefined Conversion

console.log(undefined + 5);

Output:

NaN

Because undefined cannot be converted to a valid number.

Difference Between Implicit and Explicit Conversion

Implicit (Automatic)

let result = "10" - 5; // JavaScript converts automatically

Explicit (Manual)

let result = Number("10") - 5;

Here, you explicitly tell JavaScript to convert the string to a number.

Implicit conversion = JavaScript does it automatically.
Explicit conversion = You do it yourself using functions like Number(), String(), or Boolean().

Explicit Type Conversion in JavaScript

Explicit Type Conversion (also called Type Casting) is when you manually convert a value from one data type to another.

JavaScript does not do the conversion automatically—you explicitly tell it to convert.

1. Converting to Number

Use Number():

let str = "123";

let num = Number(str);

console.log(num);        // 123
console.log(typeof num); // "number"

Other Examples

Number("10");      // 10
Number("10.5");    // 10.5
Number(true);      // 1
Number(false);     // 0
Number(null);      // 0
Number(undefined); // NaN

2. Converting to String

Use String():

let num = 100;

let str = String(num);

console.log(str);        // "100"
console.log(typeof str); // "string"

Other Examples

String(123);    // "123"
String(true);   // "true"
String(null);   // "null"

3. Converting to Boolean

Use Boolean():

Boolean(1);      // true
Boolean(0);      // false
Boolean("");     // false
Boolean("Hi");   // true
Boolean(null);   // false
Boolean(undefined); // false

Example:

let value = "Hello";

let result = Boolean(value);

console.log(result); // true

parseInt() and parseFloat()

In JavaScript, parseInt() converts a string into a whole integer, while parseFloat() converts a string into a floating-point decimal number. Both functions extract the numeric part from the beginning of a string and discard any trailing text.
These are commonly used when converting strings containing numbers.

parseInt("123");     // 123
parseInt("123px");   // 123

parseFloat("12.5");  // 12.5

Example:

let price = "99.99";

console.log(parseFloat(price)); // 99.99

Both Number() and parseInt() can convert strings to numbers, but they behave differently.

Number()

Number() tries to convert the entire string into a valid number.

Number("123");    // 123
Number("12.5");   // 12.5
Number("123px");  // NaN

In "123px", the entire string is not a valid number, so it returns NaN.

parseInt()

parseInt() reads the string from left to right and extracts the integer until it encounters a non-numeric character.

parseInt("123");    // 123
parseInt("12.5");   // 12
parseInt("123px");  // 123

Here:

"123px"
   ↑
parseInt stops at 'p'

So it returns 123.

Example Comparison

console.log(Number("100px"));   // NaN
console.log(parseInt("100px")); // 100

Decimal Numbers

console.log(Number("12.99"));    // 12.99
console.log(parseInt("12.99"));  // 12

parseInt() only returns the integer part.

CSS Position and Z-index

Vigneshwaran V — Fri, 29 May 2026 17:50:55 +0000

Today i have studied about html position. is an important property to place the element where we want in our document. it is used to move the element from one position to another and place one element above the another element.

It works with the helper properties top, right, bottom, left, and z-index to determine final placement.

There are five main values for the position property

static
relative
absolute
fixed
sticky

static

static (Default): Elements follow the normal document flow. Setting top, right, bottom, or left has no effect.

<div class="box">Hello</div>

.box{
    position: static;
    top: 50px;   /* Will NOT work */
    left: 50px;  /* Will NOT work */
}

The box stays in its normal position.

the default position for each element in html is static, it is the normal flow of document.

relative

relative: The element is positioned relative to its normal position. Offsetting it does not affect the space occupied by its original location in the document flow.

the element stays in its normal place, but you are allowed to move it using: top, right, bottom, left.
It moves relative to itself.
But it still keeps its original space in the layout

see the output here it moves relative to itself to left and bottom.

absolute

absolute: The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor (one with a value other than static).

The element does NOT reserve space in the layout.
It is placed freely on the page based on a reference parent.
It looks for the nearest ancestor that is NOT static.
If none is found → it positions relative to the page/viewport (html/body area).

the output shows the difference first the box-1 didn't relative to any non static ancestor so it placed relative to viewport or body area or browser window.
The second output shows that the box-1 is relative to the Main box because it is the nearest non-static ancestor for box-1.

fixed

fixed: The element is removed from the document flow and positioned relative to the browser viewport. It stays in the same place even when the page is scrolled.

Removed from normal flow.
No space reserved.
Positioned relative to browser window.
Does NOT move while scrolling.

The above results shows that box-1 is moved from top and right and it is fixed in that same position even if the page gets minimized.
thats why it is called as fixed position property.

Commonly used for

Navbar.
Floating button.
Chat icon.

Sticky

sticky: The element toggles between relative and fixed based on the user's scroll position. It "sticks" to a specified threshold (Ex: top: 0) within its container.

At first, the element behaves like relative.
When scrolling reaches a specified position, it behaves like fixed.

the above results shows that nav-bar used position:sticky; property and it mentioned that top:0; then the nav-bar scrolls normally until it reaches top:0px; position and once it reaches top:0; then it becomes sticky and it doesn't move for that entire page even we do scroll.

Z-index

The CSS z-index property sets the stacking order of elements on the "Z-axis". It determines which elements appear in front of or behind others when they visually overlap.

Higher z-index → comes to front. Lower z-index → goes behind.

Html Form

Vigneshwaran V — Fri, 29 May 2026 13:07:51 +0000

Today i have learned about the html forms. to get the datas from the users we create a html forms.

A form is created using the form tag, which acts as a container for various interactive elements. common elements of forms:

<label>, <input>, <textarea>, <select>, <button>

The label tag in HTML provides a caption or description for form elements like input, textarea, or select. It improves usability by making the clickable area for a form control larger and is essential for accessibility, as it allows screen readers to describe what a field is for to visually impaired users.

Example

<label for="username">Username:</label>
<input type="text" id="username" name="username">

The input tag in HTML is a fundamental element used to create interactive controls in web forms to collect data from users. It is an "empty" or self-closing element, meaning it does not require a closing tag.

Essential Attributes

name: Acts as an identifier for the data when it is submitted to a server. Only inputs with a name attribute will have their values passed.
value: Sets the initial or default value of the field.
placeholder: Displays a short hint (about the field) inside the field before the user types.
required: A boolean attribute that prevents form submission if the field is empty.
id: Used to uniquely identify the element, often for styling with CSS or linking to a label tag for accessibility.

Example

<form action="/submit-data" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="user_name" placeholder="Enter username" required>

  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="user_password" required>

  <input type="submit" value="Log In">
</form>

The textarea tag in HTML creates a multi-line text input field, typically used in forms for comments, reviews, or messages. Unlike the standard input, which only allows a single line, the textarea element can hold an unlimited number of characters and respects line breaks.

Basic Syntax

The initial content is placed between the opening and closing tags.

<textarea name="message" rows="4" cols="50">
Enter your comments here...
</textarea>

select and option Creates drop-down menus for selecting from a list of predefined choices.
select: Acts as a container for the dropdown menu.
option: Defines the individual items available for selection within that menu.

Example

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

The button tag in HTML is used to create a clickable button on a webpage. Unlike the input element, the button tag can contain complex content between its opening and closing tags, such as text, images, and other HTML tags like i or strong.

Basic Syntax

<button type="button">Click Me!</button>

by using all these tags and attributes today i create a student registration form, which include all these tags and properties to get the datas from user i build it by using html and css.

Reference:

https://www.w3schools.com/html/html_forms.asp

Media Queries in CSS

Vigneshwaran V — Thu, 28 May 2026 18:56:59 +0000

CSS Media Queries allow you to apply different styles to a webpage depending on the device's screen size, orientation, resolution, or specific user preferences.

They are the foundational pillar of modern responsive web design.
A standard media query consists of the @media at-rule, an optional media type, and a condition enclosed in parentheses.

@media media-type and (condition) {
  /* CSS rules apply only if the condition is true */
  body {
    background-color: lightblue;
  }
}

Most developers use media queries to modify layouts based on the device width.

Max-Width

Max-Width: Applies styles when the viewport is smaller than or equal to a specified size.

@media screen and (max-width: 768px) {
  /* Styles target mobile devices and tablets */
  .sidebar { display: none; }
}

Min-Width

Min-Width: Applies styles when the viewport is larger than or equal to a specified size.

@media screen and (min-width: 1024px) {
  /* Styles target desktops and laptops */
  .container { max-width: 960px; }
}

Modern Range Syntax

Modern browsers support a cleaner mathematical syntax that replaces confusing min-width and max-width declarations with standard comparison operators.

@media (width <= 768px) { ... }

@media (480px <= width <= 1024px) { ... }

Multiple media queries example

body{
    background-color: white;
}

/* Mobile */

@media (max-width: 600px){
    body{
        background-color: lightblue;
    }
}

/* Tablet */

@media (min-width: 601px) and (max-width: 992px){
    body{
        background-color: lightgreen;
    }
}

/* Desktop */

@media (min-width: 993px){
    body{
        background-color: lightcoral;
    }
}

and ===> Combines conditions
max-width ===> Up to specified width
min-width ===> From specified width
orientation: portrait ===> Vertical mode
orientation: landscape ===> Horizontal mode

Orientation Example

@media (orientation: landscape){
    body{
        background-color: yellow;
    }
}

Best Practice

Most Developers use:

/* Default styles for mobile */

@media (min-width: 768px){
    /* Tablet/Desktop styles */
}

This approach is called Mobile First Design.

Short Definition for Interview

Media queries in CSS are used to create responsive web designs by applying different styles based on screen size, device type, or orientation.

Resolution

In media queries, resolution means:

The clarity or pixel density of a screen
It tells how many pixels are displayed in a given area of the screen.

Simple Understanding

A normal screen and a high-quality screen may have the same size, but the high-quality screen contains more pixels.
Example:

Normal display → fewer pixels.
Retina/4K display → more pixels → sharper image.

Resolution in CSS Media Queries

We use resolution media queries to apply styles for:

High DPI screens
Retina displays
2K/4K screens
Better image quality

Syntax

@media (min-resolution: 2dppx){
    /* CSS */
}

Units Used

dpi ===> Dots per inch
dppx ===> Dots per pixel
x ===> Device pixel ratio

Example — High Resolution Screen

body{
    background-image: url("normal-image.png");
}

/* For high-resolution screens */

@media (min-resolution: 2dppx){

    body{
        background-image: url("hd-image.png");
    }

}

here you see the difference that normal screen uses (normal-image.png) normal image but the high resolution screen uses (hd-image.png) hd image. like this we write a media query based on the device resolution.

How it works

Media queries work by checking device conditions like screen width, height, orientation, or resolution, and then applying specific CSS styles only when those conditions are satisfied.

Reference

https://www.w3schools.com/css/css3_mediaqueries.asp

CSS Selectors

Vigneshwaran V — Thu, 28 May 2026 16:30:35 +0000

Today i have learn about the selectors in css. and i learn why we use the selectors and how it works and what are the benefits of using this selectors.

Selectors

CSS selectors are code patterns used to target and style specific HTML elements on a webpage.
CSS selectors types:

simple selectors (element select based on name, id, class).
Combinator Selectors(select elements based on a specific relationship between them).
Pseudo-class selectors(select elements based on a certain state).
Pseudo-elements selectors(select and style a part of an element).
Attribute selectors(select elements based on an attribute or attribute value).
Universal selectors: * targets every single element on the webpage.
Group selectors: h1, p, span applies the exact same styles to multiple comma-separated rules concurrently.

CSS element selectors

The element selector selects HTML elements based on the element name.

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!.
To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
HTML elements can also refer to more than one class.

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.

Child Selectors

The CSS child selector (officially called the child combinator) uses the > symbol to target elements that are direct children of a specified parent element. It only looks one level down the HTML document hierarchy.

/* Child */
header > h1 {
  /* Selects all Heading 1 elements that are children of Header elements. */
}

General sibiling

The CSS general sibling selector (represented by the tilde symbol ~) matches all iterations of a second element that follow a specified first element and share the same parent.

/* General sibling */
h1 ~ p {
  /* Selects a Paragraph as long as it follows a Heading 1. */
}

Adjacent Sibling

The CSS adjacent sibling selector (+) selects an element that is placed immediately after another specific element, provided they both share the same parent element.

/* Adjacent sibling */
h1 + p {
  /* Selects a Paragraph if it immediately follows a Heading 1 */
}

Attribute selectors

ID and class selectors technically fall into this attribute selectors category. We call them “attributes” because they are present in the HTML and give more context about the element. All of the following are attributes in HTML:

<!-- ID, Class, Data Attribute -->
<article id="#id" class=".class" data-attribute="attribute">
</article>

<!-- href, Title, Target -->
<a href="https://css-tricks.com" title="Visit CSS-Tricks" target="_blank"></a>

<!-- src, Width, Height, Loading -->
<img src="star.svg" width="250" height="250" loading="laxy" >

<!-- Type, ID, Name, Checked -->
<input type="checkbox" id="consent" name="consent" checked />

<!-- Class, Role, Aria Label -->
<div class="buttons" role="tablist" aria-label="Tab Buttons">

a[href="https://css-tricks.com"] {
  color: orangered;
}

Pseudo-selectors

Pseudo-selectors are for selecting pseudo-elements, just as element selectors are for selecting elements. And a pseudo-element is just like an element, but it doesn’t actually show up in the HTML. If pseudo-elements are new to you, we have a quick explainer you can reference.

Every element has a ::before and ::after pseudo-element attached to it even though we can’t see it in the HTML.

.container::before {
  /* Styles */
}

.container::before {
  content: "";
}

Reference

https://css-tricks.com/css-selectors/

Stack OverFlow and Tamil Linux Community

Vigneshwaran V — Wed, 27 May 2026 19:22:21 +0000

Today i know about lot of things like tech meets and how we try get a intern oppurtunity and how the tech community grow today and they connect with each others, and what are all the platforms which help techy people to connect each others and which platform solve their doubts.

Stackoverflow

Stack Overflow is a popular question-and-answer website where programmers ask technical questions and get answers from other developers.
It's a part of the broader Stack Exchange Network.

Programming Languages.
Frameworks and Libraries.
Databases.
APIs.
Debugging Errors.
DevOps and Cloud tools.

Fast solution to coding problems: If a developer gets an error or is stuck, there's a good chance someone already asked the same question and received a working solution.
Huge knowledge base: Over the years, it has accumulated millions of questions and answers covering beginner to advanced topics.
Practical examples: Answers often include code snippets, explanations, and best practices developers can directly apply.
Community voting system: Users upvote helpful answers, so the best solutions usually appear at the top.
Learning resource: Developers use it not only to fix bugs but also to understand concepts, compare approaches, and improve coding skills.
Works well with search engines: Many developers simply search their error message in Google, and Stack Overflow results appear immediately.

not every programmers are pro they also like us once upon a time but now they are great means they do coding consistently and they learn lot of things from error by using a platform like Stackoverflow. one of best platform for people who have problem solving mindset and it helps software community to learn by searching a error to find solution. errors and practice make a programmers success.

Tamil Linux Community

The Tamil Linux Community is a vibrant, localized network of open-source enthusiasts, developers, and system administrators based in Tamil Nadu. They actively promote free and open-source software, host regular study groups, provide technical support in Tamil, and contribute to Linux localization.

ILUGC – Indian Linux Users Group Chennai One of the oldest and most active Linux communities in India.

What they do:

Monthly Linux meetups (usually in Chennai).
Talks on Linux, programming, DevOps, networking.
Open source discussions (GNU/Linux, BSD, Python).
Beginner-friendly and free.

where:

Mostly IIT Madras campus or Chennai meetup locations.

2.2. Tamil Linux Community (TLC)
A Tamil-language focused open-source community.

What they do:

Promote Linux and open-source in Tamil.
Online discussions + events.
Conferences like (Tamil Open Source Conference).
Developer networking.

Good for:

Tamil-speaking beginners.
Open source learners.
Community-driven projects.

Linux Club VIT Chennai A student-led Linux and FOSS club.

What they do:

Workshops on Linux & DevOps.
Hackathons and coding events.
Open-source contributions.
Beginner training sessions.

Why join these communities?

Because you get:

Real developers to talk with (not just theory).
Help with Linux problems instantly
Hands-on workshops.
Open-source project experience.
Networking for internships/jobs.

If you are a beginner start with these community - they are the most welcoming.

Gitlab basic Commands

Vigneshwaran V — Sat, 23 May 2026 04:17:56 +0000

Today i learned about gitlab and i installed it. and also learn how to upload the projects in it by using the commands in terminal like git init,
git add ., git commit -m, git push.

First Time Setup

git config --global user.name "Your Name"
git config --global user.email "your@email.com"

Create New Repository

git init

Add and Commit Files

git add .
git commit -m "Added project files"

This command tells Git: Prepare these files to be saved, It moves changed files into the staging area,

Example

Suppose you changed: index.html, style.css.
Now Git sees them as modified, but not ready to save yet.
If you run:

git status

You may see:

modified: index.html
modified: style.css

so now you run => git add .

Here: git add → add files to staging.
. → means all files in current folder.

Push Code

git push -u origin main

git push

Check Current Status

git status

See Commit History

git log

git add --- Add a specific file to staging area
git commit -m "message" --- Save changes with a message
git log --- View commit history
git push --- Upload commits to GitHub/GitLab

A branch in Git is like a separate workspace or copy of your project where you can work independently without affecting the main project.

Why Branches Are Used

Develop new features safely.
Fix bugs.
Test ideas.
Work with teams without breaking the main code.

Git, Gitlab and Github.

Vigneshwaran V — Fri, 22 May 2026 19:14:28 +0000

What is Git

Git is a free and open-source distributed version control system designed to track changes in computer files, primarily used for coordinating work among programmers developing source code.
It is primarily used for software development, but it can be used to track changes in any set of files.

Features of Git

Version Control: It acts like a "time machine" for your project, recording snapshots of your files so you can revert to any previous state if something goes wrong.
Repositories: A Git repository (or repo) is like a project's central hub where everything related to your work is stored and managed. There are two main types:

Local Repository: This is a copy of the repository which is stored in your computer. You can work on your project and make changes here.
Remote Repository: This is stored on a server, like GitHub, where you and others can share and work on a project.

Commits: Every time you make changes and save them in Git, these are called commits. The repository keeps track of all the commits you have made.
Branches: A repository allows you to create Branches and work on new features and fixes. For example, you can have a "main" branch for stable code and a "feature" branch for new features you're developing.
Merging: Once you are done with the branches you have made, you can merge those branches into main branch. This adds the changes you have made in the rest of the project.

What is Gitlab

GitLab is an end-to-end software development and DevSecOps platform. It allows teams to manage the entire software lifecycle in a single application—handling everything from planning and source code management to automated testing, security checks, and deployment.
Provides Git-based repository hosting similar to GitHub.
Includes built-in CI/CD pipelines for automated testing and deployment.
Supports code review, issue tracking, and project management in one place.

What is Github

GitHub is a cloud-based platform where developers store, share, and collaborate on software projects. It uses Git (a version control tool) to track code changes over time, allowing multiple people to work on the exact same files simultaneously without overwriting each other's work.
GitHub allows developers to collaborate on projects, track changes, and maintain a history of all code versions. It is particularly popular in the open-source community and is widely used by individual developers, teams, and large organizations to develop software.

Difference between Gitlab and Github

The primary difference between GitHub and GitLab is their operational philosophy: GitHub focuses on community and social coding, while GitLab is an all-in-one DevOps platform.

HTML and CSS Q&A

Vigneshwaran V — Thu, 21 May 2026 19:50:18 +0000

What is the purpose of box-sizing: border-box in your project?

The main use of box-sizing: border-box is to make the sizing of Web elements predictable and easy to manage.
Box-sizing: border-box forces the browser to include an element's padding and border within its specified width and height.
It stops elements from unexpectedly expanding their width when you add a padding or border to it.
It makes element predictable and preventing elements from breaking out of their containers.

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

The CSS property grid-template-columns: 2fr 1fr; creates a two-column grid where the first column is twice as wide as the second.
The fr unit stands for a fractional unit, which represents a share of the available space within the grid container.

What is the difference between semantic tags like and versus normal tags?

Semantic tags and normal tags are both group the elements. but semantic tags clearly describe their meaning to both browser and developer.
tags are dividers with no inherent meaning whereas semantic tags provide context about the content inside them.

Why is vh used instead of px?

vh (Viewport Height) is used instead of px (Pixels) to create dynamic, responsive design.
1Px sets an unchangeable fixed size for contents, but 1vh represent exactly 1% of browser window height. this allows elements to automatically scale and adapt to any Screen size from mobile phones to massive desktop monitors.

Difference between padding and margin?

The primary difference between padding and margin is where the space is created relative to an element's border. According to the CSS Box model, padding is the space we create inside the border (between content and border), while margin is the space we create outside the border(between the element and its neighbors).

Difference between Grid and Flexbox?

CSS Grid and Flex are both CSS layout modules, but they are designed for fundamentally different purpose.
Flexbox: is for 1-dimensional layouts (either a Row or a Column). it handles sizing based on the content inside the items.
Grid: is for 2-dimensional layouts (Rows and Columns simultaneously) you can define Rows and Columns and you can place a element exactly in a particular cell. regardless of the HTML order.

What are self-closing tags?

Self-closing tags or void elements are HTML elements that only require a single tag because they cannot hold text or nested elements. they end with a forward slash in old HTML versions, but in modern HTML the slash is optional.

What is the purpose of the meta viewport tag?

The viewport is the user's visible area of a web page.
The viewport varies with the device (will be lot smaller on a mobile phone than on a computer screen).
We should include the following meta element in the head section of all our web pages.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and scaling.
The width = device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale = 1.0 part sets the initial zoom level when the page is first loaded by the browser.