DEV Community: Saravanan Cn

Day 2 of Learning Python: Practising Python Fundamentals 🐍

Saravanan Cn — Tue, 27 Oct 2026 14:31:25 +0000

1. Variables in Python

A variable is a name that refers to a value.

`name = "Python"
age = 25

print(name)
print(age)

Output:

Python
25`

Python automatically determines the type of a value when it is assigned to a variable.

2. Operators in Python

Operators are symbols or keywords that perform operations on values.

*Arithmetic operators
*
`a = 10
b = 3

print(a + b) # Addition
print(a - b) # Subtraction
print(a * b) # Multiplication
print(a / b) # Division
print(a % b) # Modulus

Output:

13
7
30
3.3333333333333335
1`

Comparison operators

Comparison operators compare two values and return True or False.

`print(10 > 5)
print(10 == 5)
print(10 != 5)

Output:

True
False
True`

3. Type Conversion

Type conversion means converting a value from one data type to another.

`age = "25"

age = int(age)

print(age)
print(type(age))

Output:

25

Here, int() converts the string "25" into the integer 25.

Taking Input from the User

Python provides the input() function to accept information from a user.

name = input("Enter your name: ")

print("Hello", name)

The program asks for a name and displays a greeting.

Python for Beginners: What Is Python? A Complete Introduction 🐍

Saravanan Cn — Mon, 26 Oct 2026 12:15:14 +0000

1. What Is Python?

Python is a high-level, general-purpose programming language known for its simple syntax and readability.
It was created by Guido van Rossum and first released in 1991.
Python allows developers to write programs using code that is relatively easy for humans to read and understand.

Example:

`print("Hello, World!")

Output:

Hello, World!

The print() function displays the text on the screen.`

Where is Python used?

Python is used in many fields, including:

Web development: Building websites and web applications.

Artificial intelligence: Developing AI applications and machine learning models.

Data science: Analyzing and visualizing data.

**Automation: **Automating repetitive tasks.

Scientific computing: Performing mathematical and scientific calculations.

Software development: Building different kinds of applications.

2. Difference Between Python and Python 3

Python is the name of the programming language. Python 3 is the modern major version of Python.

Python 2 and Python 3 are different major versions. Python 2 reached the end of its official support on January 1, 2020.

Important: Python 3 is the recommended version for beginners and new projects.

3. High-Level vs. Low-Level Programming Languages

Programming languages can be described by how closely they relate to human-readable concepts or the computer's hardware.

High-level programming language

A high-level language uses syntax and concepts that are relatively easy for humans to understand. It hides many hardware details.

Examples:

Python
Java
JavaScript

Example:

`a = 10
b = 20

print(a + b)`

Python lets us add two numbers without manually managing the computer's registers or memory addresses.

Low-level programming language

A low-level language is closer to the computer's hardware and instruction set.

Examples:

Machine code

Assembly language

Low-level programming can offer detailed control over hardware, but it generally requires more knowledge of the underlying computer architecture.

4. Programming Language vs. Scripting Language

A scripting language is commonly used to automate tasks, control other programs, or execute sequences of instructions.
Examples of languages commonly used for scripting include Python, JavaScript, and Bash.
Programming language
Programming languages can be used to build software, applications, operating systems, and many other systems.
Scripting language
Scripting is often focused on automation and connecting existing tools or components. For example, a Python script could automatically rename hundreds of files instead of requiring you to rename each file manually.

for number in range(1, 6): print("Learning Python", number)

Output:

Learning Python 1
Learning Python 2
Learning Python 3
Learning Python 4
Learning Python 5

Is Python a programming language or a scripting language?

Python is both.

It is a general-purpose programming language that is also widely used for scripting and automation. The distinction is mainly about how a language is used, rather than a strict technical division between two types of languages.

5. Compiled Language vs. Interpreted Language

Programs written in different languages need to be translated or executed in a form the computer can process.

Compiled languages

A compiler translates source code into another form, often machine code or an intermediate representation, before the program runs.
Examples include C and C++, which are commonly compiled to native machine code. ** Interpreted languages ** An interpreter executes a program by processing its instructions at runtime. Some implementations interpret source code directly, while others use intermediate forms.

Python is commonly described as an interpreted language.

In the standard Python implementation, CPython, source code is generally compiled into bytecode, which the Python virtual machine executes.

Main differences

Compiled approach

Often translates code before execution
Can produce a standalone native executable
C and C++ are common examples
Errors may be detected during compilation or execution

Interpreted approach

Often processes code during execution
May require a runtime or interpreter
Python is a common example
Errors may be detected during execution

6. Disadvantages of Python

Python is useful, but it also has some limitations.

1. Slower execution speed

Python can be slower than compiled languages such as C and C++ for CPU-intensive tasks because of its runtime overhead.

2. Higher memory usage

Some Python programs use more memory than comparable programs written in lower-level languages. This can matter for memory-constrained applications.

3. Not always ideal for mobile development

Python is not as commonly used as languages such as Kotlin or Swift for developing native Android and iOS applications.

4. Runtime errors

Because Python is dynamically typed, some type-related errors may only become apparent when the relevant code runs.

5. Global Interpreter Lock in CPython

In standard GIL-enabled CPython builds, the Global Interpreter Lock (GIL) limits how multiple threads execute Python bytecode at the same time. This can affect CPU-bound multithreaded programs, although multiprocessing, native extensions, and free-threaded Python builds provide alternatives.

6. Not ideal for every application

Python may not be the best choice for every real-time, hardware-constrained, or performance-critical application.

Despite these limitations, Python remains a popular and powerful languages for beginners and experienced developers alike.

Day 24 of My React Learning Journey 🚀 | useState Hook Practice

Saravanan Cn — Sun, 25 Oct 2026 16:52:01 +0000

Today, I learned more about the useState Hook in React. I practiced increment, decrement, and reset operations. I also worked on two scenarios: a toggle button and an input field.

1. useState Hook

The useState Hook allows us to store and update data in a functional component.

Syntax

const [state, setState] = useState(initialValue);

state stores the current value.

setState updates the value.

initialValue is the starting value.

I also learned that component names should start with a capital letter, such as ToggleButton or NameInput.

A functional component is a JavaScript function that returns JSX.

2. Toggle Button: ON and OFF

I created a button that switches between ON and OFF.

`import { useState } from "react";

function Toggle() {
const [ toggle,settoggle] = useState("OFF");

function togglebtn(){
    if(toggle === "OFF"){
        settoggle("ON");
    }
    else{
        settoggle("OFF");
    }



}
// toggle === "OFF" ? settoggle("ON"): settoggle("OFF");

 return (
    <div>
    <button onClick={togglebtn}> {toggle } </button>
    </div>
)

}

export default Toggle;
`

I used a Boolean state (true or false).
The initial value is false, so the button starts at OFF.
Clicking the button changes the state to its opposite value.
React updates the UI when the state changes.

3. Input Field: Displaying a Name

I also practiced taking a name from an input field and displaying a greeting.

`import { useState } from 'react';

function Greeting() {

const [userinput, setuserInput] = useState("");

 let user_input = "";

 function greet() {
setuserInput("Hello" + user_input);

}

function getInput(event) {
user_input = event.target.value;
setuserInput(event.target.value);
}

return (

Greet me

{userinput}

 </div>

)
}

export default Greeting;`

What I understood:
useState('') starts with an empty string.
value={name} connects the input to the state.
onChange runs when the user types.
event.target.value gets the text entered by the user.
setName() updates the state, and React displays the new greeting.

Why use useState instead of a normal variable?

A normal variable does not automatically tell React to render the component again when its value changes. Using useState lets React keep track of the value and update the UI when the state changes.

What I Learned Today

The syntax of the useState Hook.
How to increment, decrement, and reset values.
How to create a toggle button using Boolean state.
How to store input values using useState.
How state updates cause React to update the UI.
Why functional components and reusable component names are important.

Day 23 of My React.js Learning Journey 🚀 | JSX and Components

Saravanan Cn — Sat, 24 Oct 2026 01:07:38 +0000

Today, I learned about JSX in React, component-based architecture, and the two types of React components: class components and functional components. I also got introduced to Hooks and the useState Hook.

1. What Is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows us to write HTML-like markup inside JavaScript code.

Although JSX looks similar to HTML, it follows some different rules.

Example

`function App() { return <h1>Hello, React!</h1>; }

export default App;`

Here, JSX allows us to write

markup directly inside a JavaScript function.

Important: JSX lets us create our own React components, such as . It does not allow us to invent arbitrary HTML tags and automatically make them work.

React's Component-Based Architecture

React uses a component-based architecture. This means we can divide a user interface into small, reusable components.

For example, an e-commerce website can contain:

Navbar component
Product component
Cart component
Footer component

Example

`function Welcome() {
return

Welcome to React!

;
}

function App() {
return (

);
}

export default App;`

Here, the Welcome component is reused twice inside the App component.

3. What Is the Root in React?

`jsx
`import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(

);``

Here:

document.getElementById('root') finds the HTML element with the ID root.
createRoot() creates a React root.
.render() displays the App component inside that element.

4. Types of React Components

There are two commonly discussed types of React components.

Class Components

`Class components use JavaScript classes and extend React.Component.
import { Component } from 'react';

class Welcome extends Component {
render() {
return

Hello, React!

;
}
}

export default Welcome;`

Class components are still supported, but they are less commonly used in new React code.

Functional Components

Functional components are JavaScript functions that return React elements.

`function Welcome() {
return

Hello, React!

;
}

export default Welcome;`

Functional components are the preferred approach for most new React components.

5. What Are Hooks?

Hooks are special React functions that let functional components use React features such as state.

useState() — manages state.

6. What Is useState?

useState is a React Hook that allows a component to store information and update its UI when that information changes.

Example: Like Button 👍
import { useState } from 'react';

function LikeButton() {
const [likes, setLikes] = useState(0);

return (

Likes: {likes}

  <button onClick={() => setLikes(likes + 1)}>
    Like 👍
  </button>
</div>

);
}

export default LikeButton;`

`What I Learned Today

JSX stands for JavaScript XML.
JSX lets us write HTML-like markup inside JavaScript.
React uses reusable components to organize user interfaces.
React has class components and functional components.
Functional components and Hooks are commonly used in modern React development.
useState manages state and helps update the UI.
The React root is where React renders and manages the application UI.

Day 22 of My Web Development Journey 🚀 | Meta Tags and Introduction to React.js

Saravanan Cn — Fri, 23 Oct 2026 06:11:32 +0000

Today, I learned about HTML meta tags and started exploring React.js. I also learned the difference between a library and a framework and how to set up a React project using the terminal.

1. What Are Meta Tags in HTML?

Meta tags provide information about a webpage to browsers and search engines. They are placed inside the section of an HTML document.

Example

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="My web development learning journey"> <title>My Website</title> </head>

charset="UTF-8" supports a wide range of characters.
name="viewport" helps webpages display properly on different screen sizes.
name="description" provides a short description of the webpage.
defines the title shown in the browser tab.</li> </ul> <h2> <a name="2-introduction-to-reactjs" href="#2-introduction-to-reactjs" class="anchor"> </a> 2. Introduction to React.js </h2> React.js is a JavaScript library used to build user interfaces, especially interactive web applications. React helps us divide a webpage into reusable pieces called components. For example, an e-commerce website can have separate components for: <ul> <li>Navbar</li> <li>Product card</li> <li>Shopping cart</li> <li>Footer</li> </ul> Instead of writing the same UI code repeatedly, we can reuse components. 3. What Is a Library? A library is a collection of reusable code that helps developers perform particular tasks. Example: React.js is a library that helps us build user interfaces. We choose when and where to use the library in our application. 4. What Is a Framework? A framework provides a broader structure for building an application and often guides how different parts of the application should work together. Examples include Angular and Next.js, although Next.js is specifically a React framework. Library vs Framework Library Helps with particular tasks. we call its functions when needed. Example:ReactJS. Framework Provides a broader application structure. Often defines how the application is organized. Example:Angular,next js. <h2> <a name="5-installing-react-using-the-terminal" href="#5-installing-react-using-the-terminal" class="anchor"> </a> 5. Installing React Using the Terminal </h2> I started setting up my React project using the terminal. First, I checked whether Node.js and npm were installed. ` node -v npm -v` Then, I created a React project using Vite: <code>npm create vite@latest my-react-app -- --template react</code> Next, I entered the project folder: <code>cd my-react-app</code> I installed the required dependencies: <code>npm install</code> Finally, I started the development server: <code>npm run dev</code> The terminal displays a local URL that I can open in my browser to view the React application. What I Learned Today <ul> <li>The purpose of HTML meta tags.</li> <li>The basics of React.js.</li> <li>The difference between a library and a framework.</li> <li>How to create and run a React project using the terminal.</li> <li>How Node.js and npm help us set up a development environment.</li> </ul>

Day 21 of My JavaScript Learning Journey 🚀

Saravanan Cn — Wed, 21 Oct 2026 15:03:38 +0000

Today, I learned about async and await and explored another concept related to closures in JavaScript.

As I continue learning JavaScript, I’m starting to understand how asynchronous operations work and how functions can remember variables from their surrounding scope.

1.Async and Await in Javascript

async and await helps us to work with promises and make synchronous code easier to understand

await pauses the execution of the surrounding async function until a Promise settles, allowing us to work with its result.

`async function greet() {
return "Hello, JavaScript!";
}

greet().then((result) => {
console.log(result);
});
`

Output:

Hello, JavaScript!

Example using await

`function getData() {
return new Promise((resolve) => {
resolve("Data received!");
});
}

async function displayData() {
let result = await getData();
console.log(result);
}

displayData();
`
Output:

Data received!

Here, await waits for the Promise to fulfill and assigns its result to the result variable.

2. Closures in JavaScript

A closure happens when a function remembers and can access variables from the scope where it was created, even after the outer function has finished executing.

Example

`function outerFunction() {
let message = "Hello from the outer function!";

function innerFunction() {
    console.log(message);
}

return innerFunction;

}

let myFunction = outerFunction();
myFunction();`

Output:

Hello from the outer function!

In this example, innerFunction() can still access the message variable from outerFunction(). This is an example of a closure.

What I Learned Today

How async and await work with Promises.
How asynchronous functions return Promises.
How await helps us work with Promise results.
What a closure is and how a function can remember variables from its surrounding scope.

Day 20: Learning JavaScript setTimeout(), Synchronous vs Asynchronous Code & Promises 🚀

Saravanan Cn — Thu, 15 Oct 2026 16:41:39 +0000

1. setTimeout()

The setTimeout() method executes a callback function after a specified delay.

setTimeout(() => { console.log("Hello JavaScript!"); }, 2000);

Here, the message is printed after approximately 2 seconds.

2. Synchronous JavaScript

Synchronous code executes one statement at a time, in order. Each statement normally finishes before the next one runs.

console.log("First"); console.log("Second"); console.log("Third");

Output:

First
Second
Third

3. Asynchronous JavaScript

Asynchronous operations allow JavaScript to continue running other code while waiting for certain operations to complete.

console.log("Start");

setTimeout(() => {
console.log("Inside timeout");
}, 2000);

console.log("End");

Output:

Start
End
Inside timeout

This helped me understand how JavaScript handles delayed operations.
`

4. Promise

A Promise is a built-in JavaScript object that represents the eventual success or failure of an asynchronous operation.

A Promise can be in one of three states:

Pending — the operation is still in progress.

Fulfilled — the operation completed successfully.

Rejected — the operation failed.
`
let myPromise = new Promise((resolve, reject) => {
resolve("Task completed!");
});

myPromise.then((result) => {
console.log(result);
});`

Output:

Task completed!

resolve() fullfills the promise and .then() handles the fullfilled result.

Today I learned the difference between synchronous and asynchronous JavaScript, how setTimeout() schedules a callback, and how Promises represent the result of an asynchronous operation.

These concepts are useful when fetching API data and working with my e-commerce website.

Day 19: Using JSON.stringify() and JSON.parse() in My E-Commerce Project 🛒

Saravanan Cn — Wed, 14 Oct 2026 00:50:41 +0000

Today, I continued improving my e-commerce website using HTML, CSS, and JavaScript.

I learned how to use JSON.stringify() and JSON.parse() with localStorage to store and retrieve cart data.

WHAT I LEARNED

1.JSON.stringify()

It converts my cart array into a JSON string so that I can store it in localStorage.

localStorage.setItem("cart", JSON.stringify(cart));Today, I continued improving my e-commerce website using HTML, CSS, and JavaScript.

I learned how to use JSON.stringify() and JSON.parse() with localStorage to store and retrieve cart data.

ringify(cart));

2.JSON.parse()

It converts the stored JSON string back into a JavaScript array.

let savedCart = JSON.parse(localStorage.getItem("cart"));

🛒 Applying it to my e-commerce website

When a user adds a product to the cart, I can save the updated cart:

cart.push(product);

localStorage.setItem("cart", JSON.stringify(cart));

When the page loads, I can restore the saved cart:

let cart = JSON.parse(localStorage.getItem("cart")) || [];

This allows the cart items to remain available after refreshing the page in the same browser.

Day 18: Learning JavaScript addEventListener(), localStorage & Nested Function Calls 🚀

Saravanan Cn — Tue, 13 Oct 2026 11:11:42 +0000

1. addEventListener()

I learned how to use addEventListener() to respond to events such as button clicks.

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

button.addEventListener("click", () => {
console.log("Button clicked!");
});

2. localStorage

I learned about localStorage, which allows us to store data in the browser so that it can remain available after refreshing or reopening the page.

localStorage.setItem("username", "Saravanan");

let name = localStorage.getItem("username");

console.log(name);

Here****

setItem() stores data.
getItem() retrieves stored data.

3. Calling Another Function Inside an Arrow Function

I learned that an arrow function can call another function. This allows us to reuse code and organize our programs.

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

let showMessage = () => {
greet();
};

showMessage();

Here:

greet() is a function declaration.

showMessage is an arrow function.

Inside the arrow function, greet() is called.

Calling showMessage() executes the arrow function, which then calls greet().

Note: Calling another function inside a function does not automatically make it a nested function. A nested function is specifically a function defined inside another function.

E-Commerce Product Listing Website using HTML, CSS, and JavaScript.

Saravanan Cn — Sat, 10 Oct 2026 01:47:32 +0000

This project helped me practice JavaScript concepts and understand how to fetch product data from an API and display it dynamically on a webpage.

1. Fetching Product Data

I used the JavaScript fetch() method to retrieve product data from the DummyJSON API.

This project helped me practice JavaScript concepts and understand how to fetch product data from an API and display it dynamically on a webpage.

🛠️ Technologies Used

HTML — Created the webpage structure.

CSS — Designed product cards using CSS Grid, Flexbox, shadows, and hover effects.

JavaScript — Added functionality for fetching products, pagination, and cart management.

DummyJSON API — Retrieved sample product data.

2. Dynamic Product Cards

I used document.createElement() and appendChild() to create product cards dynamically using the data received from the API.

3. CSS Grid Layout

I used CSS Grid to display five product cards per row and added spacing between the cards.

4. Products Per Page

I created a dropdown menu to select how many products to display per page: 10, 20, or 30.

5. Next and Back Buttons

I implemented pagination using JavaScript variables such as limit and skip to navigate between product pages.

6. Add to Cart

I used an array to store selected products and displayed the cart item count using JavaScript.

7. Button Hover Effects

I added CSS hover effects to make the buttons more interactive.

Day 16: Learning JavaScript DOM Manipulation — Create, Change & Delete Elements

Saravanan Cn — Fri, 09 Oct 2026 01:39:33 +0000

My webdevelopment learning journey continues

Today I learned about JavaScript DOM manipulation and how to create, modify, and delete HTML elements dynamically using JavaScript.

1. document.getElementById()

Used to select an HTML element using its unique ID.

let heading = document.getElementById("title");

2. document.createElement()

Used to create a new HTML element.

let newElement = document.createElement("p"); newElement.textContent = "Hello JavaScript!";

3. appendChild()

Used to add a new element as a child of another element.

document.body.appendChild(newElement);

4. Change Text

`I learned how to change the text of an HTML element using JavaScript.

document.getElementById("title").textContent = "Welcome!";`

5. Change Image

I learned how to change an image dynamically using the src property.

document.getElementById("myImage").src = "new-image.jpg";

6. Change Color

I learned how to change the color of an element using JavaScript.

document.getElementById("title").style.color = "blue";

7. Delete an HTML Element

I learned how to remove an element from a webpage using the remove() method.

document.getElementById("title").remove();

8. onclick

I learned how to execute a JavaScript action when an element is clicked.

`Click Me

function changeText() {
document.getElementById("title").textContent = "Text Changed!";
}`

Day 15: Learning JavaScript Splice, Spread, Rest, Fetch, Promises & Array Methods 🚀

Saravanan Cn — Thu, 08 Oct 2026 02:00:02 +0000

Today I learned several important JavaScript concepts, including array methods, spread and rest operators, fetch(), promises, arrow functions, and truthy/falsy values.

1.Splice

I learned how splice() can be used to add, remove, or replace elements in an array.
``javascript
let fruits = ["Apple", "Banana", "Orange", "Mango"];

fruits.splice(1, 1);

console.log(fruits);`

2. Spread Operator (...)

The spread operator ... is used to expand the elements of an array or properties of an object.

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

let newNumbers = [...numbers, 4, 5];

console.log(newNumbers);`

3. Rest Parameter (...)

The rest parameter ... collects multiple arguments into an array.

`function add(...numbers) {
console.log(numbers);
}

add(10, 20, 30);`

4. Arrow Functions

I learned that when an arrow function uses curly braces {}, we normally need a return statement if we want to return a value.

let add = (a, b) => { return a + b; };

Without curly braces the value will be returned automatically.

let add = (a, b) => a + b;

5. fetch()

I learned about the fetch() method, which can be used to request data from a server or API.

``fetch("https://example.com/data")
.then(response => response.json())
.then(data => console.log(data));

6. Promise

I also learned about Promises.
A Promise is a JavaScript object that represents the eventual completion or failure of an asynchronous operation.
fetch() returns a Promise, which is why we can use .then() with it.

fetch("https://example.com/data") .then(response => response.json()) .then(data => console.log(data));

7. forEach()

I used forEach() for iteration. It executes a function once for each element in an array.

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

numbers.forEach(function(number) {
console.log(number);
});
`

8. filter()

I learned that filter() creates a new array containing elements that pass a condition.

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

let result = numbers.filter(number => number > 2);

console.log(result);

9. map()

I also learned about map(). It creates a new array by transforming each element.`

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

let result = numbers.map(number => number * 2);

console.log(result);`

10. Truthy and Falsy Values

I learned about truthy and falsy values in JavaScript.
Some falsy values include:

false
0
""
null
undefined
NaN Values that are not falsy are generally treated as truthy.