DEV Community: Hariharan S J

React Essentials: NPM, NPX, JSX Rules, Fragments & More

Hariharan S J — Fri, 17 Apr 2026 10:32:53 +0000

1. What is mean by npm?

NPM- Node Package Manager

NPM is a package manager used to install and manage dependencies in a React project.

In React (and JavaScript in general), npm is a tool used to install, manage, and share packages (libraries or tools).

Simple Explanation

Think of npm like an app store for developers
Instead of downloading everything manually, you just run a command and install what you need.

What NPM does in React

When you build a React app, you don’t write everything from scratch. You use packages like:

React itself
Routing libraries
UI libraries

npm helps you:

Install them → npm install
Update them → npm update
Remove them → npm uninstall

Important File

package.json

This file keeps track of all installed packages
Managed by npm automatically

2. What is mean by NPX?

NPX stands for Node Package Execute

NPX is a tool used to execute Node packages instantly without installing them globally.

NPX is used to run packages without installing them permanently

Why we need NPX?

Before NPX

If you want to use a tool, you had to install it first:

npm install create-react-app

Then run it:

create-react-app my-app

With NPX

You can directly run:

npx create-react-app my-app

No need to install it globally!

What happens internally?

When you run:

npx create-react-app my-app

NPX will:

Check if the package is already installed
If not → download it temporarily
Run it
Remove it (or cache it)

Real-life analogy

NPM = Buying a software and installing it on your laptop

NPX = Using an app online without installing

Key Difference between npm and npx

What is dev in npm run dev?

dev is a custom script name in package.json used to run the project in development mode.

dev is just a script name

It is not a keyword in npm

Where does dev come from?

Inside your project, there is a file:

package.json

Example:

{
  "scripts": {
    "dev": "vite",
    "start": "react-scripts start",
    "build": "vite build"
  }
}

What happens when you run:

npm run dev

NPM will:

Go to package.json
Look inside "scripts"
Find "dev"
Execute the command assigned to it

In this case:

vite

So what does dev usually mean?

dev = development mode

Used for:

Running your app locally
Live reload (auto refresh)
Fast development

Example (React with Vite)

"scripts": {
  "dev": "vite"
}

Running:

npm run dev

Starts:

Local server (like http://localhost:5173)

Real-Life Analogy

scripts = Remote control buttons

dev = One button name

npm run dev = Pressing that button

3. What is Fragment in React?

A Fragment is used to group multiple elements without adding extra HTML tags to the DOM

A Fragment in React lets you group multiple elements without adding extra nodes to the DOM.

Why Fragment is needed?

In React, you cannot return multiple elements directly

This will give error:

return (
  <h1>Hello</h1>
  <p>World</p>
)

React needs one parent element

Solution 1 (normal way)

return (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
)

Problem:

Adds extra in DOM (not always needed)
Solution 2 (Fragment)
```
return (
  <React.Fragment>
    <h1>Hello</h1>
    <p>World</p>
  </React.Fragment>
)
```
No extra DOM element created

Short Syntax (most used)
```
return (
  <>
    <h1>Hello</h1>
    <p>World</p>
  </>
)
```
This is called Fragment shorthand

Why Fragment is important?
- Keeps DOM clean
- Avoids unnecessary
- Improves performance slightly
- Useful in tables, lists, layouts
```
return (
  <h1>Hello</h1>
  <p>World</p>
)
```
Correct:
```
return (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
)
```
- Every tag must be properly closed
Wrong:
```
<img src="image.png">
```
Correct:
```
<img src="image.png" />
```
JSX is strict (like XML)
- Use className instead of class
Wrong:
```
<div class="box"></div>
```
Correct:
```
<div className="box"></div>
```
Because class is a JavaScript keyword
- Inline styles must be objects
Wrong:
```
<div style="color: red;"></div>
```
Correct:
```
<div style={{ color: "red" }}></div>
```
Double {}:
- Outer = JavaScript
- Inner = object
5.Final Takeaway

Understanding core concepts like NPM, NPX, JSX, Fragments, and React’s control flow builds a strong foundation for developing modern React applications efficiently.

From Basics to Brilliance: React, SPAs, MPAs & More

Hariharan S J — Thu, 16 Apr 2026 11:30:22 +0000

1. What is React?

React is a JavaScript library for building fast, interactive, and reusable user interfaces using components.

2.Key Difference Between React and JavaScript

Definition

Javascript

A programming language used to build logic for web pages (and more)

React

A library built using JavaScript to create UI components

Purpose

JavaScript
Handles logic, events, API calls, calculations
Works everywhere (frontend + backend with Node.js)
React
Specifically used for building user interfaces (UI)
Focuses on rendering and updating the view

DOM Handling

JavaScript

Direct DOM manipulation (can get complex)

React

Uses Virtual DOM (TBD) for efficient updates

JavaScript is a programming language used to build web functionality, while React is a JavaScript library used specifically for building user interfaces in a more efficient and structured way.

3. Why We Use React

React is mainly used to build fast, scalable, and maintainable user interfaces. Here’s the real reasoning behind it

To Build Complex UIs Easily

In Plain Javascript

UI becomes messy as the app grows
Too many DOM manipulations

React solves this with components

Break UI into small reusable parts
Easy to manage large applications

Reusability (Write Once, Use Many Times)

Example

Button component
Card component
Navbar

You create once and reuse everywhere

Saves time

Reduces duplicate code

4. What is a Single Page Application (SPA) in React

A Single Page Application (SPA) in React is a web application that loads a single HTML page and dynamically updates content without reloading the entire page, providing a fast and seamless user experience

How it works in React

In a React app:

Only one main HTML file is loaded (index.html)
React controls everything inside it
When you navigate:

React updates components
No full page reload happens
No full page reload happens

Example (Real Life)

Think about:

Instagram
Gmail

When you click:

Home → Profile → Messages

Page doesn’t reload
Only content changes

That’s an SPA behavior.

Advantages of SPA

Faster navigation
Better user experience
Less server load after first load
Feels like a mobile app

Disadvantages

Initial load can be slow
SEO can be tricky
Requires JavaScript

5.What is a Multi Page Application (MPA)?

A Multi Page Application (MPA) is a type of web application where every action loads a new HTML page from the server.

In simple words:

Every time you click something, the whole page reloads.

How it works

User clicks a link (e.g., Home → About)
Browser sends request to server
Server sends a new HTML page
Browser reloads the entire page

Example (Real Life)

Think about:

Amazon (when switching pages)
Old-style websites

Each click = full page refresh

You can actually see the page loading

Advantages of MPA

Better for SEO
Simple architecture
Each page is independent

Disadvantages

Slower navigation
Full page reload every time
Not as smooth as SPA

Easy Analogy

MPA = Opening a new book page every time
SPA = Scrolling inside the same page

6.Libraries vs Frameworks (Key Difference)

Definition

Library

A collection of pre-written functions that you call when needed

Framework

A complete structure that calls your code and controls the flow

Control

This is the core concept:

Library → You are in control
Framework → It is in control

Example

Using React

function App() {
  return <h1>Hello</h1>;
}

You decide:

when to create components
how to structure your app

You control the flow

Framework Example

Using Angular

Angular decides:

folder structure
architecture
how components interact

Framework controls everything

In Simple Words We Can Say That

A library is a set of tools that developers call when needed, while a framework provides a complete structure and controls the flow of the application using inversion of control.

Inversion Of Control (TBD)

So far you are thinking react is a javascript library and it is not a framework what if i tell you react can be used as a framework by using React Native

React Native(TBD)

How I Built a To Do App with JavaScript — Features, Challenges & What's Next

Hariharan S J — Tue, 07 Apr 2026 11:45:03 +0000

1.Introduction

Every developer has that one project they keep coming back to — the classic Todo App. It sounds simple on the surface, but building one from scratch teaches you a surprising amount about DOM manipulation, state management, browser storage, and UI design. In this blog, I'll walk you through how I built my own Todo App using pure HTML, CSS, and JavaScript — no frameworks, no libraries (except a little confetti surprise). I'll talk about the features I built, the decisions I made along the way, and the improvements I plan to add in the future.

2.Why a Todo App?

Before diving in, you might be wondering — why another Todo App? The honest answer is that it's one of the best exercises for a frontend developer. A Todo App forces you to think about:

How to add, update, and remove items dynamically in the DOM
How to persist data so it survives a page refresh
How to track state and reflect it visually in real time
How to style a UI that actually feels good to use

It's the perfect project to solidify your core JavaScript skills before jumping into frameworks like React or Vue.

3.Tech Stack

I intentionally kept this project framework-free to focus on the fundamentals:

HTML5 — Semantic structure and layout
CSS3 — Custom dark theme using CSS variables, flexbox, and smooth transitions
JavaScript — All the logic: DOM manipulation, event handling, and localStorage
@hiseb/confetti — A lightweight CDN library for the celebration animation

No build tools, no npm install, no webpack. Just three files and a browser.

4.Features I Built

Adding Tasks

The core feature — a text input and a + button. When the user types a task and clicks the button (or submits the form), the task gets pushed into a tasks array as an object { text, completed: false }, and the list re-renders.

const addTask = () => {
    const taskInput = document.getElementById('taskInput');
    const text = taskInput.value.trim();
    if (text) {
        tasks.push({ text: text, completed: false });
        updateTasksList();
        updateStats();
        saveTasks();
        taskInput.value = "";
    }
};

I used .trim() to avoid saving empty or whitespace-only tasks — a small but important detail.

Completing Tasks (Toggle)

Each task has a checkbox. When checked, it toggles the completed boolean on the task object and re-renders the list. Completed tasks display with a teal strikethrough to visually distinguish them from pending ones.

const toggleTastComplete = (index) => {
    tasks[index].completed = !tasks[index].completed;
    updateTasksList();
    updateStats();
    saveTasks();
};

The CSS handles the visual:

.completed p {
    text-decoration: line-through;
    color: var(--teal);
}

Editing Tasks

Clicking the edit icon on any task loads its text back into the input field and removes it from the list. This lets the user modify it and re-add it with the + button. It's a simple but effective pattern.

const editTask = (index) => {
    const taskInput = document.getElementById('taskInput');
    taskInput.value = tasks[index].text;
    tasks.splice(index, 1);
    updateTasksList();
    updateStats();
    saveTasks();
};

Deleting Tasks

A delete icon removes a task permanently from the array using splice(). The list and stats update immediately.

Progress Bar & Stats Counter

This was one of my favourite parts to build. There's a live progress bar that fills up as you complete tasks, and a circular stats counter showing completed / total.

const updateStats = () => {
    const completeTasks = tasks.filter(task => task.completed).length;
    const totalTasks = tasks.length;
    const progress = (completeTasks / totalTasks) * 100;
    document.getElementById('progress').style.width = `${progress}%`;
    document.getElementById('numbers').innerText = `${completeTasks} / ${totalTasks}`;
};

The progress bar uses a CSS transition for a smooth animation:

#progress {
    transition: all 0.3s ease;
}

Confetti Celebration

My favourite Easter egg — when every single task is checked off, the app fires a confetti animation using the @hiseb/confetti CDN library. It's a small touch that makes the app feel rewarding to use.

if (tasks.length && completeTasks === totalTasks) {
    blaskConfetti();
}

Persistent Storage with localStorage

Tasks are saved to the browser's localStorage so they survive a page refresh. Every time the user adds, edits, deletes, or completes a task, the updated array is serialized and saved.

const saveTasks = () => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
};

On page load, tasks are retrieved and the UI is rebuilt:

document.addEventListener('DOMContentLoaded', function () {
    const storedTasks = JSON.parse(localStorage.getItem('tasks'));
    if (storedTasks) {
        storedTasks.forEach((task) => tasks.push(task));
        updateTasksList();
        updateStats();
    }
});

UI Design Decisions

I went with a deep navy dark theme that feels clean and modern. The colour palette is defined with CSS variables, making it easy to adjust globally:

:root {
    --background: #000430;
    --secondaryBackground: #171c48;
    --text: #fff;
    --purple: #828dff;
    --teal: #24feee;
}

The purple is used for borders, buttons, and the stats circle. The teal is reserved for active/completed states and the progress bar — creating a clear visual hierarchy. The rounded corners and consistent padding make everything feel polished without overcomplicating the CSS.

5.Challenges I Faced

DOM Re-rendering

Every time a task is added, deleted, edited, or toggled, I clear the entire innerHTML of the task list and re-render everything from scratch. This is simple and effective for small lists, but not efficient for larger ones (more on this in future improvements).

Inline Event Handlers

Since task items are built with innerHTML, I used inline onclick attributes to attach event handlers. This works fine but isn't ideal — a better approach would be event delegation on the parent list element.

Scope Issue

There's a subtle bug in the original code — the stats calculation at the top of the file runs before any tasks exist, so it always computes 0 / 0. Moving all initial logic inside the DOMContentLoaded handler or inside updateStats() (which is already correctly placed) would fix this cleanly.

6.What I Learned

localStorage is incredibly easy to use and a great first step into data persistence before touching databases.
CSS variables make theming clean and maintainable — I'll use them in every project going forward.
State management in JS is about maintaining a single source of truth (the tasks array) and always rendering from it, rather than trying to read state from the DOM.
Small UX details — like transitions, strikethroughs, and confetti — make a huge difference in how a project feels to use.

7.Future Improvements

There's a lot I'd love to add to make this app more production-ready:

Due dates — Add an optional date picker to each task
Priority levels — Mark tasks as Low, Medium, or High priority with colour coding
Task categories / tags — Organise tasks into groups like Work, Personal, Shopping
Backend + user accounts — Move from localStorage to a real database so tasks sync across devices
Recurring tasks — Set tasks to repeat daily, weekly, or monthly

You Can Check My To Do List By Clicking The Below Link
To Do List

8.Final Thoughts

Building this Todo App was a great exercise in keeping things simple while still producing something genuinely useful.JavaScript gets a lot less credit than it deserves — you don't always need a framework to build something clean and functional

Building a Simple Calculator App using HTML, CSS & JavaScript

Hariharan S J — Mon, 06 Apr 2026 05:10:21 +0000

1.Introduction

In this blog, I will walk you through how I built a simple calculator web application using HTML, CSS, and JavaScript. This project is beginner-friendly and helped me understand core concepts like DOM manipulation, event handling, and basic JavaScript logic.

2.Technologies Used

To build this calculator app, I used the following technologies:

HTML – for structuring the calculator layout
CSS – for styling and designing the user interface
JavaScript – for implementing functionality and calculations

3.HTML Structure

The HTML file defines the layout of the calculator.

A container to hold the calculator
An input field (#finalinput) to display user input and results
Buttons for numbers, operators, and actions

Each button uses the onclick attribute to perform actions like adding numbers or operators to the display.

4.CSS Design

The CSS file is used to make the calculator visually appealing.

Key styling features include:

Flexbox to center the calculator on the screen
Dark theme UI for a modern look
Box shadows for a soft 3D effect
Rounded buttons for better user experience

Operators are highlighted using a different color to make them stand out.

5.JavaScript Logic

The logic of the calculator is handled using JavaScript inside the HTML file.

Handling Input

When a button is clicked, its value is added to the display:

display.value += '7';

Clear Function (AC)

This clears the entire display:

display.value = '';

Delete Function (DE)

This removes the last character from the display:

Calculation (=)

The result is calculated using:

display.value = eval(display.value);

What is eval() in JavaScript?

The eval() function in JavaScript is used to evaluate a string as a JavaScript expression.

In simple terms, it takes a string input and executes it like actual JavaScript code.

Example

eval("2 + 3"); // Output: 5

Here, the string "2 + 3" is converted into a real expression and evaluated.

How I Used eval() in My Calculator

In my calculator project, I used eval() to calculate the final result when the user clicks the = button.

display.value = eval(display.value);

Explanation:

display.value contains a string like "5+3*2"
eval() processes this string
It returns the calculated result → 11
The result is then shown on the display

Why eval() is Useful Here

It simplifies calculation logic
No need to manually parse expressions
Works for multiple operations (+, -, *, /)
Quick solution for beginner projects

6.Features of the Calculator

Supports basic arithmetic operations (+, -, *, /)
Clear (AC) button to reset input
Delete (DE) button to remove last digit
Decimal number support
Simple and clean user interface
Real-time display updates

7.Challenges Faced

Handling string-based input correctly
Implementing the delete functionality
Understanding how eval() works
Managing user input dynamically

8.Future Improvements

Keyboard input support
Scientific functions (sin, cos, log, etc.)
Calculation history feature
Dark/Light mode toggle
Better error handling for invalid inputs

9.What I Learned

DOM manipulation
Event handling in JavaScript
Working with strings and expressions
UI design using CSS
Building logic step-by-step

10.Conclusion

Building a calculator app may seem simple, but it involves important programming concepts. This project helped me strengthen my fundamentals in web development and gave me confidence to build more complex applications in the future.

Why JavaScript Doesn’t Wait: Sync vs Async Explained

Hariharan S J — Fri, 27 Mar 2026 11:43:13 +0000

1.Introduction

JavaScript is a single-threaded language, which means it can do only one task at a time. But if that’s true, how does it handle things like API calls, timers, or file loading without freezing the entire application?

That’s where Synchronous and Asynchronous programming comes in.

In this blog, we’ll break down:

What synchronous and asynchronous code means
Why JavaScript “doesn’t wait”
How it actually works behind the scenes

Before Going into the synchronous and asynchronous You are all having one question which is why Javascript is a single-threaded language?

JavaScript is single-threaded because:

It has one call stack, meaning it can execute only one task at a time.

But WHY was it designed like this?

1. Simplicity (Main Reason)

When JavaScript was created (by Brendan Eich):

It was meant to run inside the browser
Mainly to handle:

Button clicks
Form validation
Simple UI interactions

So, making it single-threaded:

Keeps things simple
Avoids complex issues like thread synchronization

JavaScript is single-threaded because it uses a single call stack to execute code one task at a time. This design simplifies execution and avoids concurrency issues like race conditions, while asynchronous behavior is handled using the event loop and browser APIs

A Simple Program for Single Thread Behaviour

console.log("Match Started");

function batting() {
    console.log("Batsman started batting");

    for (let i = 0; i < 1e9; i++) {} // playing long innings

    console.log("Batsman finished batting");
}

function bowling() {
    console.log("Bowler started bowling");
}

batting();
bowling();

console.log("Match Ended");

Output

Match Started
Batsman started batting
Batsman finished batting
Bowler started bowling
Match Ended

Explanation

First, batsman plays completely
Only after that, bowler starts bowling
Both don’t happen at the same time
One after another execution

Just like in cricket where batting must finish before bowling begins in this example, JavaScript executes one task at a time. Even if multiple functions are called, the next task waits until the current one finishes, proving that JavaScript is single-threaded

Here is Where Synchronus and Asynchronus Comes to play

2.What is Synchronous in JavaScript?

Before going into the technical part of synchronus we shall understand the synchronus non technically

Imagine you are eating chocolates 🍫

You eat one chocolate
Only after finishing it → you take the next chocolate

You don’t eat 2 chocolates at the same time

Likewise in Javascript

Computer also does the same:

It does one work
Waits till it finishes
Then does the next work

Now you get a idea of what synchronus actually do if we deep dive into the technical part you can clearly understand about this topic

JavaScript executes code line by line using a single call stack, where each operation must complete before the next one starts.

Single Thread + Call Stack

JavaScript is single-threaded, so it uses:

One Call Stack (Execution Stack)

Example

function starter() {
    console.log("Starter is served 🍲");
}

function mainCourse() {
    console.log("Main course is served 🍛");
}

function dessert() {
    console.log("Dessert is served 🍰");
}

starter();
mainCourse();
dessert();

Output

Starter is served 🍲
Main course is served 🍛
Dessert is served 🍰

Explanation:

First, you eat starter 🍲

Then main course 🍛

Finally dessert 🍰

You don’t eat everything at the same time

One after another → synchronous

Blocking Nature

Synchronous code is blocking

Example

console.log("Start");

function heavyTask() {
    for (let i = 0; i < 1e9; i++) {} // long work
    console.log("Heavy Task Done");
}

heavyTask();

console.log("End");

What happens?

JS starts execution
Enters heavyTask()
Stays there until loop finishes
Only then moves to next line

Everything else is blocked

Execution Context

Whenever a function runs:

JavaScript creates an Execution Context

Each context has:

Memory (variables)
Code execution phase

Flow:

Global Execution Context created first
Then function contexts are created and pushed to stack

Real-World Impact

Problems with synchronous code:

UI freezing
Slow performance
Poor user experience

Example:

Loading large data
Heavy calculations
File processing

*The Problems in Synchronus is Solved in Asynchronus So lets deep dive into Asynchronus Concept *

3.What is Asynchronous JavaScript

Asynchronous execution means:

JavaScript can delegate long-running tasks and continue executing other code, instead of blocking the main thread.

How JavaScript Actually Handles Async

JavaScript runtime consists of:

Call Stack
Web APIs (Browser / Node APIs)
Callback Queue (Task Queue)
Event Loop

console.log("Match Started 🏏");

setTimeout(() => {
    console.log("Drinks break over 🍹, match resumes");
}, 2000);

console.log("First over is going on...");

Output

Match Started 🏏
First over is going on...
Drinks break over 🍹, match resumes

Explanation

Match starts

First over continues immediately

Meanwhile:

Drinks break is scheduled ⏳ (setTimeout)

JavaScript does NOT wait

It continues the match

After 2 seconds:

Drinks break message comes

What This Shows

Even though drinks break was set:

Match didn’t stop
Other things continued

This is asynchronous behavior

Event Loop (Heart of Async)

The event loop continuously checks:

Is Call Stack empty?
If yes → take task from queue → execute

This is why JS feels non-blocking

Types of Async Tasks

Macro Tasks (Callback Queue)

setTimeout
setInterval
DOM events

Micro Tasks (Priority Queue)

Promises
queueMicrotask

Microtasks run before macrotasks

Okay this will lead up to the methods of asynchronus in Javascript

4.Methods Used in Asynchronous JavaScript

In JavaScript, async behavior is achieved using different techniques (methods):

What is a Promise in JavaScript

A Promise in JavaScript is an object that represents the eventual completion or failure of an asynchronous operation, allowing developers to handle results using methods like then, catch, and finally.

Basic Structure of a Promise

const promise = new Promise((resolve, reject) => {
    // async work
});

It has 2 important functions:

resolve() → success
reject() → failure

Promise States

A Promise has 3 states:

Pending → Initial state
Fulfilled → Success (resolve called)
Rejected → Failed (reject called)

const foodOrder = new Promise((resolve, reject) => {
    let foodReady = true;

    if (foodReady) {
        resolve("Your food is ready ");
    } else {
        reject("Sorry, food is not available ");
    }
});

foodOrder
    .then(message => console.log(message))
    .catch(error => console.log(error));

Output (if foodReady = true)

Your food is ready

Output (if foodReady = false)

Sorry, food is not available

Explanation

You order food

Kitchen checks:

If food is ready → serve it (resolve)
If not → say unavailable (reject)

Customer (your code):

.then() → handles success
.catch() → handles failure

A Promise in JavaScript is like ordering food—either the food gets delivered successfully (resolve) or the order fails (reject), and we handle both outcomes using then and catch.

Promise Chaining

You can chain multiple .then()

function getData() {
    return new Promise(resolve => {
        setTimeout(() => resolve(10), 1000);
    });
}

getData()
    .then(num => num * 2)
    .then(num => num + 5)
    .then(result => console.log(result)); // 25

Each .then() passes value to next

async / await(To Be Discussed)

fetch() API(To Be Discussed)

JavaScript DOM Basics: A Beginner’s Guide

Hariharan S J — Wed, 25 Mar 2026 10:00:09 +0000

1. Introduction

JavaScript DOM (Document Object Model) is a programming interface that allows developers to interact with HTML elements. It helps in making web pages dynamic by allowing changes in content, structure, and style using JavaScript. In this blog, we will learn the basics of DOM in a simple way.

2. What is DOM?

The DOM represents a web page as a tree structure where each element is treated as an object. Using JavaScript, we can access and modify these elements easily.

HTML page → tree structure → JavaScript control pannum

3. DOM Structure (Tree Concept)

The Document Object Model (DOM) represents an HTML page as a tree structure.
Each part of the HTML document is treated as a node (object) in this tree.

Main Parts of the DOM Tree

Document → The entire web page
HTML → Root element
Head → Contains metadata (title, links, etc.)
Body → Contains visible content
Elements → Tags like

,

, etc.

Example HTML

<html>
  <body>
    <h1>Hello</h1>
    <p>Welcome</p>
  </body>
</html>

💡 Explanation

The document is the top-level object
Inside it, we have the html element
The body contains all visible content
Elements like

and

are child nodes

This tree structure helps JavaScript easily access, modify, and update elements on a web page.

4. Selecting Elements (DOM Methods)

Most important basics

document.getElementById("id")
document.getElementsByClassName("class")
document.getElementsByTagName("p")
document.querySelector("p")

Short explanation

ID → single element
class/tag → multiple elements

5. Changing Content

document.getElementById("title").innerHTML = "Hello JavaScript";

Use:

innerHTML
textContent

5.Creating Elements in DOM

JavaScript allows us to create new HTML elements dynamically using the DOM. This is useful when we want to add content to a web page without reloading it.

1. Creating a New Element

We use document.createElement() to create a new element.

let newElement = document.createElement("p");

This creates a new

element, but it is not yet visible on the page.

2. Adding Content to the Element

We can add text using textContent or innerHTML.

newElement.textContent = "This is a new paragraph";

3. Adding the Element to the Page

To display the element, we must append it to an existing element.

document.body.appendChild(newElement);

Now the paragraph will appear on the webpage.

Full Example

let newElement = document.createElement("p");
newElement.textContent = "Hello, this is added using DOM!";
document.body.appendChild(newElement);

Key Points

createElement() → creates element
textContent → adds text
appendChild() → adds element to page

6.Changing Attributes

We can modify HTML attributes like id, class, or src.

let img = document.getElementById("myImage");
img.setAttribute("src", "image2.jpg");

Common methods

setAttribute()
getAttribute()
removeAttribute()

7. Event Listeners

A modern way to handle events in JavaScript.

let btn = document.getElementById("btn");

btn.addEventListener("click", function() {
  alert("Button clicked!");
});

8.Conclusion.

The Document Object Model (DOM) is a fundamental concept in JavaScript that allows developers to interact with and manipulate web pages dynamically. By understanding DOM basics such as selecting elements, creating and removing elements, handling events, and modifying content and styles, beginners can start building interactive and responsive websites. Mastering the DOM is an important first step toward becoming a skilled web developer.

Understanding JavaScript Core Concepts: Spread Operator, Constructor Functions, and Built-in Objects

Hariharan S J — Mon, 16 Mar 2026 12:36:13 +0000

Spread Operator in JavaScript

Before technical part of spread operator we shall understand the spread operator by non technically

Imagine you have a bag of candies 🍬.

Inside the bag there are 3 candies:

[🍬, 🍬, 🍬]

Now you want to pour all the candies out on the table.

When you open the bag and spread the candies on the table, that is like the Spread Operator (...) in JavaScript.

Simple Example

You have a box:

box1 = [1, 2, 3]

Now you open the box and spread everything into another box

let box1 = [1,2,3];
let box2 = [...box1];

Now box2 also has the same toys.

box2 = [1,2,3]

Simple Meaning

Spread Operator (...) = Open a box and spread everything inside it.

Now lets deep dive into the technical part of spread operator

What is Spread Operator?

The Spread Operator (...) is used to expand (spread) the elements of an iterable (like an array or string) or the properties of an object into individual elements.

It was introduced in ES6 (ECMAScript 2015) and is commonly used for copying, merging, and passing values.

Basic Idea of Spread Operator

The spread operator takes a collection and spreads its values one by one

let arr = [10, 20, 30];

console.log(...arr);

Output

10 20 30

Explanation:

arr is an array.
...arr spreads the values inside the array

Instead of:

[10,20,30]

It Becomes

10,20,30

Spread Operator with Arrays

Copying an Array

Normally if you copy arrays like this

let a = [1,2,3];
let b = a;

Both variables point to the same memory reference

So if you change b, a will also change

Using Spread

let a = [1,2,3];
let b = [...a];

b.push(4);

console.log(a); 
console.log(b);

Output

[1,2,3]
[1,2,3,4]

Explanation:

...a creates a new copy of the array

This is called Shallow Copy.

Merging Arrays

Spread operator is commonly used to combine multiple arrays

Example

let arr1 = [1,2];
let arr2 = [3,4];
let arr3 = [...arr1, ...arr2];

console.log(arr3);

Output

[1,2,3,4]

Here:

...arr1 spreads 1,2
...arr2 spreads 3,4

Final array becomes [1,2,3,4]

Adding Elements While Merging

You can also add new values.

let arr1 = [2,3];

let arr2 = [1, ...arr1, 4];

console.log(arr2);

Output

[1,2,3,4]

Spread operator does not have to be at the start.
It can be used anywhere in the array.

Spread Operator with Objects

Spread operator can also copy or merge objects

Example

let user = {name:"Hari"};
let details = {age:21};

let person = {...user, ...details};

console.log(person);

Output

Explanation:

...user spreads object properties
...details spreads other properties

Result is a merged object

Spread Operator with Nested Arrays

Spread Operator with Nested Arrays

Example

let a = [[1,2],[3,4]];
let b = [...a];

b[0][0] = 100;

console.log(a);

Output

[[100,2],[3,4]]

Explanation

The inner arrays still share memory

Spread operator copies only the first level

Constructor Function In Javascript

before going into the technical part of constructor function lets all first understand it non technically

Imagine you have a toy machine 🏭.

This machine can make many toy cars 🚗.

You just press a button and tell the machine:

Color
Name

Then the machine creates a new toy car.

The Toy Machine = Constructor Function

In JavaScript, a constructor function is like that toy-making machine.

It helps us create many similar objects.

Now lets understand the constructor function concept technically

What is mean by constructor function in javascript?

A Constructor Function in JavaScript is a special type of function used to create and initialize objects. It acts as a blueprint (template) for creating multiple objects with similar properties and methods.

Constructor functions were the main way of creating objects before ES6 classes were introduced.

In Another words it can say as

A constructor function is simply a regular function that is used with the new keyword to create objects.

Example

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Here:

Person → constructor function
name, age → parameters
this → refers to the new object being created

Creating Objects Using Constructor

To create an object we use the new keyword

let user1 = new Person("Hari", 21);
let user2 = new Person("Surya", 25);

console.log(user1);
console.log(user2);

Output

{ name: "Hari", age: 21 }
{ name: "Surya", age: 25 }

Here we created two objects using the same constructor function.

What Happens Internally When new is Used

When we write:

let user = new Person("Hari",21);

JavaScript performs 4 important steps internally.

Step 1 — Create a new empty object

{}

Step 2 — Set this to the new object

Inside the function:

this → {}

Step 3 — Add properties to the object

this.name = "Hari"
this.age = 21

Object becomes:

{ name:"Hari", age:21 }

Step 4 — Return the object

JavaScript automatically returns the new object.

Final Result

user = { name:"Hari", age:21 }

Why this is Used in Constructor Functions

this refers to the object that is being created.

Example

function Car(brand) {
  this.brand = brand;
}

let car1 = new Car("Toyota");
let car2 = new Car("BMW");

Objects Created

car1 → { brand: "Toyota" }
car2 → { brand: "BMW" }

Here this.brand stores the value in each new object.

Problem if new is Not Used

Example:

function Person(name) {
  this.name = name;
}

let user = Person("Hari");

console.log(user);

Output

undefined

Because:

this refers to the global object, not a new object.

Constructor Naming Convention

Constructor functions usually start with a capital letter.

Example:

Person
User
Car
Student
Employee

This is not mandatory but is a common JavaScript convention.

Using Prototype with Constructor Functions

To avoid copying methods for every object, we use prototype.

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello " + this.name);
};

let user1 = new Person("Hari");
let user2 = new Person("Surya");

user1.sayHello();
user2.sayHello();

Now:

sayHello exists only once in memory
All objects share it

This improves memory efficiency.

Constructor Function Returning Values

Normally constructors return the object automatically.

But if you return another object manually:

function Test() {
  this.name = "Hari";

  return { age: 21 };
}

let obj = new Test();

console.log(obj);

Output:

{ age: 21 }

The returned object replaces the default object.

Advantages of Constructor Functions

Create multiple objects easily
Reusable object structure
Works with prototypes
Foundation for JavaScript’s object-oriented programming

Build In Objects In Javascript

before going into this topic we shall discuss this topic non technically

Imagine you have a magic calculator box 🧮✨.

This magic box can help you do many math things like:

finding the biggest number
finding the smallest number
rounding numbers
giving random numbers
finding square roots

In JavaScript, this magic box is called the Math Object.

Think Like This

Math = Magic Math Box

Whenever you need help with math, you ask the box.

Example-Biggest Number

You ask the box:

Math.max(5, 10, 2)

The Box Says

Because 10 is the biggest.

Now lets deep dive in by technically

What is Mean By Json Object In Javascript

JSON stands for JavaScript Object Notation.
It is a lightweight data format used to store and exchange data between systems.

Even though it comes from JavaScript, JSON is now language-independent, meaning it can be used with:

JavaScript
Python
Java
PHP
C#

Why JSON Exists

Before JSON, systems used formats like XML to transfer data.

Example XML:

<user>
  <name>Hari</name>
  <age>21</age>
</user>

This format is long and complex.

JSON solved this by being shorter and easier to read.

JSON Version:

{
  "name": "Hari",
  "age": 21
}

JSON.stringify()

JSON.stringify() converts a JavaScript object into a JSON string.

Example:

let user = {
  name: "Hari",
  age: 21
};

let jsonData = JSON.stringify(user);

console.log(jsonData);

Output:

{"name":"Hari","age":21}

Conversion

JavaScript Object → JSON String

JSON.parse()

JSON.parse() converts a JSON string into a JavaScript object.

Example:

let jsonData = '{"name":"Hari","age":21}';

let user = JSON.parse(jsonData);

console.log(user.name);

Output:

Hari

Conversion:

JSON String → JavaScript Object

Math Object In Javascript.

The Math object in JavaScript is a built-in global object that provides mathematical constants and functions for performing calculations.

Important point:

The Math object is not a constructor, so we do not use new Math().

Why the Math Object Exists

Programming often requires mathematical operations like:

1.rounding numbers

2.finding maximum or minimum values

3.generating random numbers

4.trigonometric calculations

5.powers and square roots

Instead of writing these algorithms manually, JavaScript provides the Math object with built-in methods.

Math Methods

Math.max()

Returns the largest value

Math.max(10, 50, 20)

Output

Internally it compares numbers and returns the maximum.

Math.round()

Rounds a number to the nearest integer.

Math.round(4.6)

Output

Rules:

0.5 or greater → round up
less than 0.5 → round down

Example:

Math.round(4.4) → 4
Math.round(4.5) → 5

Math.floor()

Rounds down to the nearest integer.

Math.floor(4.9)

Output

Example:

Math.floor(8.99) → 8
Math.floor(3.1) → 3

Math.trunc()

Removes the decimal part.

Math.trunc(5.9)

Output:

Math.sqrt()

Calculates square root.

Math.sqrt(625)

Output

Math.crbt()

Calculates Cube root.

Math.cbrt(27)

Output

JavaScript String Methods Explained with Examples

Hariharan S J — Tue, 10 Mar 2026 15:21:56 +0000

1.String in Javascript

A string in JavaScript is a data type used to store text.
It is a sequence of characters such as letters, numbers, symbols, or spaces enclosed within quotes.

Example

`let name = "Hariharan";
let city = 'Chennai';
let message = "Hai";`

In the above examples

"Hariharan" is a string
"Chennai" is a string
"Hai" is a string

Important Points

Strings can be created using single quotes (' '), double quotes (" "), or backticks ( ).
Strings are used to store text values.
A string can contain letters, numbers, symbols, and spaces.

2.Why We Use Strings in JavaScript

We use strings in JavaScript to store and work with text data. Most applications need to handle text such as names, messages, addresses, or descriptions.

3.String Methods in JavaScript

In JavaScript, a string is a sequence of characters used to represent text. JavaScript provides many built-in string methods that allow developers to manipulate, analyze, and transform text data easily.

These methods help perform operations such as finding characters, extracting parts of a string, changing case, removing spaces, and replacing text.

One important thing to remember is that strings in JavaScript are immutable. This means string methods do not change the original string. Instead, they return a new string with the result.

1.Length

Returns the length of a string.

`let text = "Hari";
console.log(text.length);`

Output
10

2.charAt()

Returns the character at a specific index.

`let text = "Hariharan";
console.log(text.charAt(4));`

`Output
h`

3.charCodeAt()

Returns the Unicode value of a character.

`let text = "A";
console.log(text.charCodeAt(0));`

`Output
65`

What is Unicode

Unicode is a universal character encoding standard used to represent characters from almost all languages in the world.

It assigns a unique numeric code (number) to every character.

This allows computers to store and display text consistently across different systems and languages.

4.String Concat

The concat() method in JavaScript is used to join two or more strings together and return a new combined string.

It does not modify the original strings.

`let text1 = "Bumrah";
let text2 = "Bowls a Yorker";

let result = text1.concat(" ", text2);

console.log(result);`

`Output
Bumrah Bowls a Yorker`

5.toLowerCase()

Converts all characters to lowercase.

`let text = "HARIHARAN";
console.log(text.toLowerCase());`

`Output
hariharan`

6.toUppercase()

Converts all characters to uppercase

`let text = "hariharan";
console.log(text.toLowerCase());`

`Output
HARIHARAN`

6.Slice

Extracts a portion of a string

`let text = "JavaScript";
console.log(text.slice(0,4));`

`Output
Java`

7.trim()

Removes extra spaces from the beginning and end of a string

`let text = "   Hello   ";
console.log(text.trim());`

`Output
Hello`

String Search

JavaScript indexOf() Method

The indexOf() method in JavaScript is used to find the position (index) of the first occurrence of a specified value in a string.

If the specified value is not found, the method returns -1.

`let text = "Hello World";

console.log(text.indexOf("World"));`

`Output
6`

Important Points

indexOf() returns the first occurrence of a value.
If the value is not found, it returns -1.
It is case-sensitive.

JavaScript Array Basics: Methods & Iteration Explained

Hariharan S J — Mon, 02 Mar 2026 12:18:41 +0000

1.Definition of Method in JavaScript

A method in JavaScript is a function that is associated with an object. It is used to perform a specific task or operation on that object.

Example:

let name = "Hari";

console.log(name.toUpperCase());

Here, toUpperCase() is a method of the String object.

In simple words

Function → standalone
Method → function inside an object

2.Array Method in JavaScript

In JavaScript, array methods are built-in functions that allow us to perform different operations on arrays like adding, removing, updating, searching, and iterating elements.

Example

let fruits = ["apple", "banana", "orange"];

fruits.push("mango");  // add element

console.log(fruits);

Here, push() is an array method used to add a new element to the array.

In simple words

Array methods make array operations easy, fast, and clean.

3.Why should we use array methods in JavaScript

We should use array methods because they make our code simple, clean, readable, and efficient while working with arrays

Simple Example

Without array method (using loop)

let nums = [1, 2, 3, 4];
let squares = [];

for(let i = 0; i < nums.length; i++) {
  squares.push(nums[i] * nums[i]);
}

console.log(squares);

With array method

let nums = [1, 2, 3, 4];
let squares = nums.map(n => n * n);

console.log(squares);

4.Basic Array Methods in JavaScript

JavaScript basic array methods help developers efficiently add, remove, search, modify, and manage array elements. These methods improve code readability, reduce complexity, and enhance performance in real-world applications

Basic array methods mainly help us perform CRUD operations (Create, Read, Update, Delete) on array data

1.push() – Add Elements at the End

Purpose

Adds one or more elements to the end of an array

Key Points

Can add multiple values
Modifies the original array
Returns the new length of the array

let arr = [10, 20, 30];
let newLength = arr.push(40, 50);

console.log(arr);        // [10, 20, 30, 40, 50]
console.log(newLength); // 5

Real-world use case

Adding a new product to a shopping cart

2.pop() – Remove Last Element

Purpose

Removes the last element from an array

Key Points

Removes the last value
Returns the removed value
Modifies the original array

let arr = [1, 2, 3, 4];
let removed = arr.pop();

console.log(arr);     // [1, 2, 3]
console.log(removed); // 4

Use case

Undo operations, stack implementation (LIFO concept).

3.unshift() – Add Elements at the Beginning

Purpose

Adds one or more elements to the start of an array

Key Points

Existing elements shift to the right
Slightly slower than push() for large arrays

let arr = [20, 30];
arr.unshift(10);

console.log(arr); // [10, 20, 30]

Use case

Displaying latest notifications or messages at the top

4.shift() – Remove First Element

Purpose

Removes the first element from an array

Key Points

All remaining elements shift to the left
Used in queue operations (FIFO)

let arr = [10, 20, 30];
let removed = arr.shift();

console.log(arr);     // [20, 30]
console.log(removed); // 10

5.shift() – Remove First Element

Purpose

Removes the first element from an array

Key Points

All remaining elements shift to the left
Used in queue operations (FIFO)

let arr = [10, 20, 30];
let removed = arr.shift();

console.log(arr);     // [20, 30]
console.log(removed); // 10

6.length – Size of the Array

Purpose

Returns the number of elements in an array

let arr = [1, 2, 3, 4];
console.log(arr.length); // 4

Advanced Concept

You can manually modify the length property to truncate an array

let arr = [1, 2, 3, 4, 5];
arr.length = 3;

console.log(arr); // [1, 2, 3]

5.JavaScript Array Iteration Methods

In JavaScript, array iteration methods are built-in functions that loop through array elements and apply a callback function to each element to perform specific operations such as transformation, filtering, aggregation, and searching

1. forEach() – Execute Function for Each Element

Purpose

Executes a function once for each array element

Key Points

Does not return a new array
Used mainly for side effects (logging, updating UI, etc.)

let arr = [1, 2, 3, 4];

arr.forEach((value, index) => {
  console.log(`Index ${index} → Value ${value}`);
});

Use case

Displaying items in UI, logging data, API response handling.

2. map() – Transform Each Element

Purpose

Creates a new array by transforming each element

Key Points:

Returns a new array
Does not change original array

let numbers = [1, 2, 3, 4];

let squares = numbers.map(n => n * n);

console.log(squares); // [1, 4, 9, 16]

Use case

Data transformation, UI rendering, calculations.

3. filter() – Select Elements Based on Condition

Purpose

Returns a new array containing only elements that pass a condition

let numbers = [10, 15, 20, 25, 30];

let even = numbers.filter(n => n % 2 === 0);

console.log(even); // [10, 20, 30]

Use case

Search results, category filtering, validations

4. reduce() – Reduce Array to Single Value

Purpose

Reduces the array into a single output value

let numbers = [1, 2, 3, 4];

let sum = numbers.reduce((total, value) => total + value, 0);

console.log(sum); // 10

Use cases

Sum, average, max/min value, grouping data

5. find() – Find First Matching Element

Purpose

Returns the first element that matches a condition

let users = [
  { id: 1, name: "Hari" },
  { id: 2, name: "Karthi" },
  { id: 3, name: "Arun" }
];

let result = users.find(user => user.id === 2);

console.log(result); // { id: 2, name: "Karthi" }

6. findIndex() – Find Index of First Match

Purpose

Returns the index of first matching element

let nums = [5, 12, 8, 130, 44];

let index = nums.findIndex(n => n > 10);

console.log(index); // 1

6.What is Method Chaining in JavaScript

Method chaining in JavaScript is a programming technique in which multiple methods are invoked sequentially on the same object, where each method returns the object itself or another object, enabling continuous chained calls.

Why Use Method Chaining?

Makes code short and clean
Improves readability
Avoids unnecessary temporary variables
Encourages functional programming style
Makes logic more expressive

Simple Example

let result = [1, 2, 3, 4, 5]
  .filter(n => n % 2 === 0)
  .map(n => n * 10)
  .reduce((sum, n) => sum + n, 0);

console.log(result); // 60

Explanation

filter() → selects even numbers → [2, 4]
map() → multiplies by 10 → [20, 40]
reduce() → sums → 60

Functions in JavaScript – Learn Once, Use Everywhere

Hariharan S J — Tue, 24 Feb 2026 05:54:31 +0000

1.Function Definition

A function is a set of instructions that performs a particular job when we call it.

(Or)

A function in JavaScript is a block of reusable code that is designed to perform a specific task. It runs only when it is called (invoked), and it helps to reduce code repetition, improve readability, and make programs easier to manage.

Example

function makeParotta() {
    console.log("Kothu Parotta is Ready");
}

makeParotta();  // calling the function

2.Rules for Declaring a Function

Starts with lower case
No Space Allowed
No Special Characters are allowed except Underscore(_) and Dollar($)

function myFunction() { }
function _test() { }
function $demo() { }

JavaScript keywords cannot be used as function names

Reserved words like if, else, for, while, etc. cannot be used.

function if() { }   // ❌
function for() { }  // ❌

Parameters in Function

Definition

Parameters are the variables listed in the function definition. They act as placeholders to receive values when the function is called.

function add(a, b) {   // a and b are parameters
  return a + b;
}

Here, a and b are parameters.

Arguments in Function

Definition

Arguments are the actual values passed to the function when calling it.

add(5, 3);   // 5 and 3 are arguments

Here, 5 and 3 are arguments.

Simple One-Line Definition:

Parameter: Variable in function definition.

Argument: Value passed to the function.

Easy to Remember Trick:

P → Parameter → Placeholders
A → Argument → Actual values

Difference between Parameters and Arguments

Return Statement in a Function

A return statement gives the output of a function back to the caller.

(Or)

The return statement is used to send a value back from a function to the place where the function was called and stop the execution of the function.

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

let result = add(5, 3);
console.log(result);   // Output: 8

Explanation

return a + b; → sends the value 8 back
result receives 8

Important Points

A function can return only one value at a time.
Any code after the return statement will not execute.
If no return statement is used, the function returns undefined.

Understanding JavaScript the Easy Way

Hariharan S J — Fri, 13 Feb 2026 14:49:39 +0000

History of JavaSript

1. The Birth of JavaScript (1995)

JavaScript was created by Brendan Eich in 1995 while he was working at Netscape.

Initially named Mocha
Later renamed to LiveScript
Finally renamed JavaScript (because Java was very popular at that time, and the name helped in marketing)

Interestingly, the first version of JavaScript was developed in just 10 days.

2. Standardization (1997)

In 1997, JavaScript was standardized by ECMA International under the name ECMAScript (ES).

This ensured that different browsers followed the same core rules and reduced compatibility issues.

Variables in javascript

Variables in JavaScript are used to store data values.
You can think of a variable as a container that holds information.

How to Declare Variables

In JavaScript, there are three ways to declare variables:

1.Var(Old Method)

`var name = "Hari";
`

Function-scoped
Can be re-declared
Not recommended in modern JavaScript

2.let(Modern & Recommended)

`let age = 22;
`

Block-scoped
Can be updated
Cannot be re-declared in the same scope

3.const(Constant Value)

`const country = "India";
`

Block-scoped
Cannot be updated
Cannot be re-declared

Rules for Naming Variables

Must start with a letter, _, or $
Cannot start with a number
Case-sensitive (name and Name are different)
Avoid reserved keywords (like if, for, while)

Datatypes in javascript

In JavaScript, data types define the type of value a variable can hold
JavaScript has two main categories of data types:

1.Primitive Datatype
2. Non Primitive Datatype

1.Primitive Datatype

Primitive data types are basic data types that store a single value directly in memory
They are immutable, meaning their value cannot be changed once created (a new value is created instead).

1.Number

Represents both integers and decimal values.

`let age = 21;
let price = 105.234;
`

2.String

Represents text (written inside quotes).

`let name = "Hari";
let message = 'Hello World';
`

3.Boolean

Represents true or false values.

`let isLoggedIn = true;
let isAdmin = false;
`

4.Undefined

A variable that is declared but not assigned a value.

`let x;
console.log(x); // undefined
`

5.Null

Represents an intentional empty value.

`let data = null;

`

6.BigInt

Used for very large numbers.

`let bigNumber = 123456789012345678901234567890n;
`

7.Symbol

Used to create unique identifiers (mostly used in advanced concepts).

`let id = Symbol("unique");
`

2.Non Primitive Datatype

Non-primitive data types (also called reference data types) store collections of values or complex data
They are stored as references (memory addresses) instead of storing the actual value directly

They are mutable, meaning their contents can be changed.

1.Object

Stores data in key–value pairs.

`let person = {
  name: "Hari",
  age: 21
};
`

2.Array

Used to store multiple values in a single variable.

`let numbers = [1, 2, 3, 4];
`

3.Function

Functions are also treated as objects in JavaScript.

`function greet() {
  console.log("Hello!");
}
`

Semantic Tags in HTML

Hariharan S J — Wed, 21 Jan 2026 14:25:32 +0000

1.What is mean by semantic tags in html?

Semantic tags are HTML tags that tell both the browser and the developer what type of content they contain.

Example

❌ Non-semantic:

<div>This is a header</div>

✅ Semantic:

<header>This is a header</header>

2.Why semantic tags is used in html

Semantic tags are used in HTML to define the meaning and structure of web content, improving readability, SEO, and accessibility.

i)Better understanding of content

Example: tells it is a header, tells it is footer

ii)Improves SEO (Search Engine Optimization)

iii)Better accessibility

iv)Clean and readable code

v)Standard and professional layout

Example

❌ Without semantic tags:

<div id="header">Header</div>
<div id="nav">Menu</div>

✅ With semantic tags:

<header>Header</header>
<nav>Menu</nav>

3.Various semantic tags in html

🔹 Page Structure Semantic Tags

i) <header>

Represents top/intro content

Logo, heading, navigation

ii) <nav>

Navigation links

iii) <main>

Main content of the webpage (only one per page)

iv) <section>

Groups related content

v) <article>

Independent, self-contained content (blogs, news)

vi) <aside>

Side or related content

vii) <footer>

Bottom section (copyright, contact info)

🔹 Content Semantic Tags

i)<figure>

Image, diagram, illustration

ii) <figcaption>

Caption for figure

iii) <time>

Represents date or time

<time datetime="2026-01-21">Jan 21, 2026</time>

🔹 Text-Level Semantic Tags

i) <mark>

Highlights text

ii) <strong>

Important text (strong importance)

iii) <em>

Emphasized text

iv) <address>

Contact information

🔹 Media & Data Semantic Tags

i) <details>

Expandable content

ii) <summary>

Heading for details

<details>
  <summary>More Info</summary>
  Content here
</details>

4.Advantages of semantic tag

i)Better code readability

ii)Improves SEO

iii)Better accessibility

iv)Clear page structure

v)Easy maintenance

5.Disadvantages of semantic tags

i)Limited styling by default

ii)Learning curve for beginners

iii)Overuse or misuse

iv)Browser support issues (older browsers)

v)Not suitable for every situation

DEV Community: Hariharan S J

React Essentials: NPM, NPX, JSX Rules, Fragments & More

1. What is mean by npm?

2. What is mean by NPX?

3. What is Fragment in React?

4.Rules of JSX

5.Final Takeaway

From Basics to Brilliance: React, SPAs, MPAs & More

1. What is React?

2.Key Difference Between React and JavaScript

3. Why We Use React

4. What is a Single Page Application (SPA) in React

5.What is a Multi Page Application (MPA)?

6.Libraries vs Frameworks (Key Difference)

How I Built a To Do App with JavaScript — Features, Challenges & What's Next

1.Introduction

2.Why a Todo App?

3.Tech Stack

4.Features I Built

5.Challenges I Faced

6.What I Learned

7.Future Improvements

8.Final Thoughts

Building a Simple Calculator App using HTML, CSS & JavaScript

1.Introduction

2.Technologies Used

3.HTML Structure

4.CSS Design

5.JavaScript Logic

6.Features of the Calculator

7.Challenges Faced

8.Future Improvements

9.What I Learned

10.Conclusion

Why JavaScript Doesn’t Wait: Sync vs Async Explained

1.Introduction

2.What is Synchronous in JavaScript?

3.What is Asynchronous JavaScript

4.Methods Used in Asynchronous JavaScript

JavaScript DOM Basics: A Beginner’s Guide

1. Introduction

2. What is DOM?

3. DOM Structure (Tree Concept)

,

and

4. Selecting Elements (DOM Methods)

5. Changing Content

5.Creating Elements in DOM

6.Changing Attributes

7. Event Listeners

8.Conclusion.

Understanding JavaScript Core Concepts: Spread Operator, Constructor Functions, and Built-in Objects

Spread Operator in JavaScript

Now lets deep dive into the technical part of spread operator

Constructor Function In Javascript

Build In Objects In Javascript

Math Object In Javascript.

JavaScript String Methods Explained with Examples

1.String in Javascript

2.Why We Use Strings in JavaScript

3.String Methods in JavaScript

String Search

JavaScript Array Basics: Methods & Iteration Explained

1.Definition of Method in JavaScript

2.Array Method in JavaScript

3.Why should we use array methods in JavaScript

4.Basic Array Methods in JavaScript

5.JavaScript Array Iteration Methods

6.What is Method Chaining in JavaScript

Functions in JavaScript – Learn Once, Use Everywhere

1.Function Definition

2.Rules for Declaring a Function

Parameters in Function

Arguments in Function

Difference between Parameters and Arguments

Return Statement in a Function

Understanding JavaScript the Easy Way

History of JavaSript

Variables in javascript

Datatypes in javascript