Forem: Priyaramu

Introduction to React: A Beginner’s Guide

Priyaramu — Fri, 17 Apr 2026 16:57:11 +0000

Introduction
React is a popular JavaScript library used for building user interfaces, especially for single-page applications (SPAs). It was developed and maintained by Meta (formerly Facebook) and has become one of the most widely used tools among developers.

When building web applications, you’ll often hear two terms:
MPA (Multi-Page Application) and SPA (Single-Page Application). They represent different ways a website loads and updates content.

What is an MPA (Multi-Page Application)?
An MPA loads a new page from the server every time you click a link.

How it works:
   - Each action → sends a request to the server
   - Server returns a completely new HTML page
   - The browser reloads the entire page

Examples:
   - Amazon
   - Wikipedia

What is an SPA (Single-Page Application)?
An SPA loads one single HTML page and updates content dynamically without reloading.

How it works:
   - Initial page loads once
   - JavaScript updates only parts of the page
   - No full page refresh

Examples:
   - Gmail
   - Google Maps
   - Apps built with React

Why React?

Modern web applications need to be fast and smooth for a better user experience. However, using traditional JavaScript can make development complex and harder to manage.

React solves these problems by making it easier to build fast, interactive, and scalable applications.

Faster Performance
React updates only the parts of the page that change instead of reloading the whole page. This makes applications faster.

Reusable Components
React lets you build UI using components that can be reused. This saves time and reduces repeated code.

Easy Data Handling
React uses something called state to manage data. When data changes, the UI updates automatically.

Strong Community
React has a large community with many tools and resources, making it easier to learn and use.

Used in Real Applications
Many big applications use React, which shows it is reliable and scalable.

Easy to Learn and Use
React has a simple structure, making it easier to understand, maintain, and grow applications.

Conclusion

React is a powerful tool for building modern web applications. Its speed, flexibility, and ease of use make it a popular choice among developers.If you want to build fast and interactive user interfaces, learning React is a great step forward.

Learn Synchronous and Asynchronous JavaScript

Priyaramu — Fri, 27 Mar 2026 17:57:30 +0000

Synchronous

In synchronous programming, tasks are done one after another in order. Each line of code waits for the previous one to finish before moving to the next. This means the program runs step by step in a clear and predictable way.

console.log("Start");
console.log("Task 1");
console.log("Task 2");
console.log("End");

In this example, "Start" is printed first, followed by "Task 1", then "Task 2", and finally "End". Each line runs only after the previous one has finished. This shows that the code executes in a fixed order, step by step, without skipping any task.

Asynchronous

In asynchronous programming, tasks can run independently without waiting for previous tasks to complete. While one task is in progress, other tasks can continue running. This improves performance and makes applications faster and smoother.

console.log("Start");

setTimeout(function() {
  console.log("Task 1");
}, 2000);

console.log("End");

Output:
Start
End
Task 1

In this example, "Start" is printed first, followed by "End". The "Task 1" message is printed after a delay. This happens because the setTimeout function runs asynchronously, so the code does not wait and continues executing the next line.

How Asynchronous JavaScript Works

Call Stack:

The call stack is where JavaScript runs functions.
It follows a simple rule: one function runs at a time, in order.
Each function is added to the stack, executed, and then removed before the next one runs.

Web APIs (Browser)

Some tasks like setTimeout, API calls, and event listeners are handled by the browser using Web APIs.

When you use something like setTimeout, JavaScript sends it to the Web API.
The Web API handles the waiting time, so the main code does not stop.

Callback Queue

After the Web API finishes its task (like waiting for time), it sends the function (callback) to the callback queue.

Event Loop

The event loop keeps checking the call stack.

If the call stack is empty
It takes functions from the callback queue
And moves them to the call stack for execution

That’s why delayed tasks run after the main code finishes.

Closure in Javascript

Priyaramu — Thu, 26 Mar 2026 17:49:08 +0000

What is a Closure?

In JavaScript, when you create a function inside another function, the inner function can use the variables of the outer function. Normally, once a function finishes running, its variables are gone. But in closures, the inner function keeps those variables in memory.

function outer() {
  let name = "John";

  function inner() {
    console.log(name);
  }

  return inner;
}

const myFunction = outer();
myFunction();

Difference Between Function and Closure
Function
A normal function executes its code and then finishes. Once it is done, the variables inside the function are removed from memory and cannot be used again.In a normal function, variables are often global and can be changed by anyone, which makes them unsafe.

let count = 0;

function add() {
  count++;
  console.log(count);
}

Closure
A closure is a function that remembers the variables from its outer function even after the outer function has finished running. These variables stay in memory and can be used later whenever the function is called.In a closure, variables are private and protected, so they cannot be accessed or modified from outside.

Closures are useful when we need to store data, maintain state, or protect variables from outside access.

function counter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const add = counter();

Closures are used in different ways like:

storing values
protecting data
creating functions
handling events

Memory Diagram:
Call outer() for Variable count is created

Memory:
outer()
 └── count = 0

Return inner()

Memory:
outer()
 └── count = 0

fn → inner() function
      ↑
      remembers count

inner() is returned and stored in fn
It keeps a reference to count

Outer Function Ends

Memory:
count = 0   ✅ (NOT deleted)

fn → inner()

Normally count should be deleted
But it stays because inner() uses it

Call fn()

count = 0 → 1

Output: 1

Call fn() Again

count = 1 → 2

Output: 2

inner()  
  └── carries → count

Even if outer() is gone, inner() still has the data

The inner function keeps a reference to the variable count, so it stays in memory and continues to update each time the function is called.

JavaScript DOM for Beginners

Priyaramu — Wed, 25 Mar 2026 17:22:43 +0000

DOM (Document Object Model)

When a browser loads a web page, it converts the HTML into a structured tree of objects. This tree is called the DOM. Each element becomes a node (object) that JavaScript can interact with.

Example HTML:

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

DOM structure:

Document
 └── html
      └── body
           ├── h1
           └── p

Why is DOM important?
- Access elements
- Modify content
- Change styles
- Handle events (clicks, typing, etc.)

Accessing Elements in the DOM:

JavaScript provides several ways to select and access elements in a web page. Here are the most commonly used methods:

Selects a single element with a specific id
const element = document.getElementById("title");

Returns a collection of elements with the given class
const elements = document.getElementsByClassName("item");

Selects all elements with a specific tag (like <p>)
const elements = document.getElementsByTagName("p");

Selects the first matching element using CSS selectors
const element = document.querySelector(".item");

Selects all matching elements (returns a NodeList)
const elements = document.querySelectorAll(".item");

Modifying Content in the DOM
JavaScript provides different ways to modify content, and each behaves slightly differently.

<div id="demo">
  Hello <span style="display:none;">Hidden</span> World
</div>

textContent:
textContent includes all text inside an element, even content that is hidden using CSS. It ignores any HTML tags and treats everything as plain text, making it a safer and cleaner option.

document.getElementById("demo").textContent;

Output:
Hello Hidden World

innerText
innerText shows only the text that you can see on the page. If something is hidden using CSS (like display: none), it will not be shown.

document.getElementById("demo").innerText;

Output:
Hello World

innerHTML

document.getElementById("demo").innerHTML;

Output:
Hello <span style="display:none;">Hidden</span> World

Changing Styles in the DOM
JavaScript can change how elements look on a web page. You can change colors, size, background, or even hide elements using styles.

Example:
element.style.backgroundColor = "yellow";
element.style.color = "red";
element.style.fontSize = "20px";
element.style.display = "none";

Handling Events in the DOM
Events are actions performed by the user, like clicking a button or typing in a box. JavaScript listens for these events and runs code when they happen, making the website interactive.

Example:
<button id="btn" onclick="clickHandler()">Click Me</button>

<script>
  function clickHandler() {
    alert("Button clicked!");
  }
</script>

JavaScript: The Beginning

Priyaramu — Mon, 02 Mar 2026 08:10:49 +0000

Javascript
In 1995, a programmer named Brendan Eich was working at Netscape. At that time, websites were mostly static — they could display information, but they couldn’t really interact with users.

Netscape wanted to make web pages more dynamic and engaging. So Brendan Eich was given a task: create a scripting language that would run inside the browser.Incredibly, he built the first version of JavaScript in just 10 days.

What Is JavaScript?
JavaScript is a programming language used to make websites interactive and dynamic.It controls what happens on a webpage. For example, JavaScript makes it possible to:

- Respond when a user clicks a button
- Check if a form is filled out correctly (form validation)
- Show animations and sliders
- Update content on the page without refreshing it

Without JavaScript, websites would feel static and unresponsive.

Flow Chart: How JavaScript Runs in the Browser

Browser loads HTML
        ↓
Browser sees <script> tag
        ↓
Browser sends code to JavaScript Engine
        ↓
Engine executes the code
        ↓
Result appears on screen

JavaScript variables
In JavaScript, a variable is a named container used to store data. Think of it as a labeled box where you keep information so you can use it later in your program.

Instead of repeating a value multiple times in your code, you store it inside a variable and refer to it by name. This makes your code cleaner, easier to read, and simpler to maintain.

For example:
let userName = "John";

In this case, userName is the variable, and it stores the value "John". Whenever you use userName in your program, JavaScript will use the stored value.

Why Do We Use Variables?

    - Store values (numbers, text, objects, etc.)
    - Reuse data
    - Update values during program execution

How to Declare Variables in JavaScript

JavaScript provides three ways to declare variables:

    - let
    - const
    - var

What is let in JavaScript?
let is a keyword used to declare a variable. It was introduced in ES6 (2015) and is now the recommended way to create variables when the value may change later.

let and const
Both let and const only exist inside the block { } where they are declared.

Example with let

if (true) {
  let name = "John";
}

console.log(name); // ❌ Error

Scope vs Reassignment
- Scope → Where the variable can be used
- Reassignment → Whether you can change its value
let can be reassigned and const cannot be reassigned

What is const in JavaScript?
const is used to make a constant variable — a variable that cannot be changed once it has a value.
Example with const

if (true) {
  const age = 25;
}

console.log(age); // ❌ Error

What is var in JavaScript?
var is a way to declare a variable in JavaScript. It has been in JavaScript since the very beginning (ES5 and earlier), but now it’s mostly replaced by let and const in modern code.

A var variable belongs to the function it is declared in, not to a block scope { }.You can change its value anytime.

CSS Properties

Priyaramu — Sat, 24 Jan 2026 08:37:11 +0000

*CSS (Cascading Style Sheets) *
CSS is the language we use to style a Web page.It controls how HTML elements look on the screen, such as colors, fonts, spacing, and positioning. CSS helps separate content from design, making websites easier to manage and visually appealing.

Global selector
The Global selector * means all elements (headings, paragraphs, divs, etc.)It sets the margin and padding of every element to 0.Useful for starting a page with a clean, consistent style.

hr tag
In HTML

means horizontal rule. It is used to draw a horizontal line across the page.Usually, it separates sections or content.

List style type
In CSS, list-style-type is used to change the bullet or numbering style of a list.
Unorder list
ul {
list-style-type: disc; /* default bullet /
}
ul.circle {
list-style-type: circle; / hollow circle /
}
ul.square {
list-style-type: square; / square bullet /
}
**Order list*
ol {
list-style-type: decimal; /* default 1, 2, 3 /
}
ol.upper-roman {
list-style-type: upper-roman; / I, II, III /
}
ol.lower-alpha {
list-style-type: lower-alpha; / a, b, c */
}

Border-collapse
border-collapse is a property used with HTML tables to control how the borders of table cells are displayed.

Each cell has its own border
    table {
            border-collapse: separate;
     }

Adjacent cell borders are merged into a single border
    table {
            border-collapse: collapse;
     }

Linear gradient
It is used to create a smooth transition between two or more colors in a straight line.

Why do we use the alt attribute in the image tag?
The alt attribute in the tag is used to provide alternative text for an image.

What is an Attribute?
An attribute is extra information added to an HTML element. In simple terms, an attribute is like a detail or characteristic that tells the browser how the element should behave or appear.
Example: src="dog.jpg" → tells what the image actually is
alt="A cute dog" → describes the image

Element meaning
An HTML element is a basic building block of a web page. It represents a piece of content, such as a heading, paragraph, image, or link.
Most HTML elements have three parts:
1. Opening tag → tells the browser what type of element it is
2. Content → the information inside the element
3. Closing tag → ends the element

Understanding HTML Structure

Priyaramu — Thu, 22 Jan 2026 08:24:14 +0000

HTML
HTML (HyperText Markup Language) is the language used to create and structure web pages.

Meaning of HTML Structure
HTML structure means the basic framework or layout of a web page that shows how content is arranged using HTML tags.

<!DOCTYPE html>
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.

Why we use <!DOCTYPE html>:
Tells the browser the HTML version – It informs the browser that the page is written in HTML5.

Ensures correct display – Without it, browsers may use quirks mode, which can make your page look wrong.

Helps with modern features – It allows the browser to understand and correctly display new HTML5 elements like , , and .

Meaning of **head tag:**
The head tag holds information about the web page (like title, metadata, and CSS links) that is mostly not visible on the page.

Meaning of **title tag:**
The title tag is used to give a title to the web page. It is placed inside the

section and shows in the browser tab. The title helps users and search engines know what the page is about.

Meaning of **body tag:**
The body tag contains all the visible content of a web page, such as headings, paragraphs, images, and links. Everything the user sees on the page is placed inside the

tag.

Inside **body tag**
The body tag contains all the visible parts of a web page, such as:

1. Headings → <h1> to <h6>
2. Paragraphs → <p>
3. Images → <img>
4. Links → <a>
5. Lists → <ul>, <ol>, <li>
6. Tables → <table>
7. Forms → <form>, <input>
8. Buttons → <button>
9. Videos / Audio → <video>, <audio>
10. Divisions and sections → <div>, <section>, <article>

Git and Git Lab

Priyaramu — Sun, 04 Jan 2026 11:41:42 +0000

Git Global Information Tracker
Git is a version control system that helps us save our code and track changes over time. It allows many people to work on the same project and keeps a complete history of all updates.

Version Control Systems
A version control system is a tool that helps manage different versions of code. There are two types of version control systems.

Centralized Version Control System (CVCS)
Distributed Version Control System (DVCS)

Centralized Version Control System
there is only one main server where the code is stored. All developers connect to that server to get and save changes. If the server goes down, developers cannot work.
Example: SVN
Distributed Version Control System
Every developer has a full copy of the project on their computer. Even if the main server is not available, developers can continue working and later share their changes.
Example: GIT

Gitlab
Web-based platform that is used to store and manage Git repositories. It helps developers collaborate on code, track changes, review code, and automate tasks like testing and deployment.

Host
A host is an online platform that stores your Git repositories so you can access them from anywhere and share them with others.

HTML Notes

Priyaramu — Sat, 03 Jan 2026 09:39:10 +0000

HTML
HTML (HyperText Markup Language) is the basic language used to create websites. It helps the browser understand what content to show, such as text, images, links, and headings.
The founder of HTML is Tim Berners-Lee. He invented HTML in 1991 and also created the World Wide Web, including URLs and the first web browser.

Markup Language
Markup language is a way to structure and organise text for computers to display properly. HTML, for example, tells the browser which part is a heading, paragraph, or link.

Difference between Markup Language vs Programming Language
A markup language (like HTML) is for structuring and displaying content.
A programming language (like Python) is for making the computer perform tasks or logic.

Scripting Language
A scripting language is a type of programming language that is used to automate tasks or add behavior to websites and apps. Scripts are usually easy to write and run directly without compiling.

HTML and CSS version
HTML’s previous versions were 1.0 to 4.01, providing basic structure, forms, and tables. The current version, HTML5, supports video, audio, and modern interactive content. CSS started with CSS1 and CSS2 for basic styling, while CSS3 adds animations, transitions, and advanced design features.