DEV Community: Narasimma Radhakrishnan

JavaScript Arrays for Beginners 🚀

Narasimma Radhakrishnan — Thu, 01 Oct 2026 16:10:46 +0000

When I started learning JavaScript, arrays were one of the first concepts I learned. Arrays are very useful when we need to store multiple values in a single variable.

What is an Array?

An array is a collection of multiple values.

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

Instead of creating three different variables, we can store everything inside one array.

Accessing Array Elements

Array indexing starts from 0.

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

Output:

Apple
Banana
Mango

Remember:

First element → index 0
Second element → index 1

Adding Elements
push()

Adds an element to the end.

fruits.push("Orange");

console.log(fruits);
unshift()

Adds an element to the beginning.

fruits.unshift("Grapes");

console.log(fruits);
Removing Elements
pop()

Removes the last element.

fruits.pop();
shift()

Removes the first element.

fruits.shift();
Finding the Array Length

Use .length to find how many elements are inside the array.

let numbers = [10, 20, 30, 40];

console.log(numbers.length);

Output:

4
Looping Through an Array

We can use a for loop to access every element.

let numbers = [10, 20, 30, 40];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

Output:

10
20
30
40

JavaScript Functions & CRUD Operations on Objects 🚀

Narasimma Radhakrishnan — Wed, 30 Sep 2026 05:24:37 +0000

As a beginner in JavaScript, I learned that functions help us organize and reuse code, while objects help us store related data.

Let's understand both with simple examples.

Types of Functions in JavaScript Normal Function

A normal function is created using the function keyword.

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

Function with Parameters

We can pass values to a function.

function greet(name) {
  console.log("Hello " + name);
}
greet("Narasimma");

Function with Return

A function can return a value.

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

console.log(add(10, 20));

Output:

30
Arrow Function

Arrow functions provide a shorter way to write functions.

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

console.log(add(10, 20));

CRUD Operations on Objects 📦

CRUD stands for:

C → Create
R → Read
U → Update
D → Delete

Let's use a simple student object.

Create

Create an object with some information.

let student = {
  name: "Narasimma",
  age: 21,
  course: "B.Tech IT"
};

Read

Access the information from the object.

console.log(student.name);
console.log(student.age);

Output:

Narasimma
21
Update

Change an existing value.

student.age = 22;

console.log(student.age);

Output:

We can also add a new property:

student.city = "Chennai";

console.log(student);

Delete

Remove a property using the delete keyword.

delete student.age;

console.log(student);

Now the age property is removed.

Easy Way to Remember 💡

Functions = Perform actions ⚙️

Objects = Store information 📦

CRUD = Create → Read → Update → Delete

These are simple concepts, but they are very important when working with JavaScript applications and APIs.

Keep practicing small programs before moving to bigger projects! 🚀

javascript #webdev #beginners #coding

JavaScript Objects & Constructors for Beginners 🚀

Narasimma Radhakrishnan — Tue, 29 Sep 2026 05:18:19 +0000

When I started learning JavaScript, objects and constructors were confusing at first. But once I understood how they work together, they became much easier.

What is an Object?

An object stores related information using key-value pairs.

let student = {
name: "Narasimma",
age: 21,
course: "B.Tech IT"
};

console.log(student.name);
console.log(student.age);

Output:

Narasimma
21

Think of an object like a student profile 📦.

What is a Constructor?

A constructor is used to create multiple objects with the same structure.

Instead of creating every student object manually, we can create a constructor:

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

Now we can create multiple students:

let student1 = new Student("Narasimma", 21, "B.Tech IT");

let student2 = new Student("Arun", 22, "B.Tech CSE");

console.log(student1.name);
console.log(student2.name);

Output:

Narasimma
Arun
How Does new Work?

When we write:

let student1 = new Student("Narasimma", 21, "B.Tech IT");

JavaScript creates a new object and assigns the values to it.

Easy Way to Remember 💡

Object = One student 📦

Constructor = Student object factory 🏭

If you need 100 student objects, you don't have to write 100 objects manually. Create one constructor and reuse it.

Conclusion

Objects are one of the most important concepts in JavaScript. Once you understand objects, constructors, and the new keyword, you are ready to explore more advanced JavaScript concepts.

Learn the basics → Practice with small programs → Build projects. 🚀

javascript #webdev #beginners #coding

Bootstrap for Beginners: Build Responsive Websites Faster 🚀

Narasimma Radhakrishnan — Mon, 28 Sep 2026 05:17:15 +0000

When I started learning CSS, creating responsive layouts took a lot of time. Then I discovered Bootstrap—a CSS framework that helps build modern websites much faster.

What is Bootstrap?

Bootstrap is a free front-end framework that provides ready-made components and a responsive grid system.

You can quickly build:

Navigation bars
Buttons
Cards
Forms
Responsive layouts
How to Add Bootstrap

Add the Bootstrap CDN inside the tag.

Now Bootstrap classes are ready to use.

Your First Bootstrap Button

Click Me

No custom CSS needed!

Responsive Grid Example

Left
Right

On larger screens, the content appears in two columns. On smaller screens, it automatically stacks.

Why Beginners Love Bootstrap
Feature Benefit
Grid System Easy responsive layout
Ready Components Faster development
Mobile First Works on all devices
Utility Classes Less custom CSS
Conclusion

Bootstrap is a great tool for beginners because it lets you focus on building projects instead of writing every style from scratch. Learn HTML + CSS first, then use Bootstrap to speed up your workflow.

bootstrap #html #css #webdev

Console-Level Coding in JavaScript for Beginners 💻

Narasimma Radhakrishnan — Sun, 27 Sep 2026 05:31:57 +0000

When I started learning JavaScript, I didn't build websites first—I practiced in the console. It's the easiest way to understand how JavaScript works.

What is console.log()?

console.log() prints output to the browser console.

console.log("Hello, World!");

Output:

Hello, World!
Variables in the Console
let name = "Narasimma";
let age = 21;

console.log(name);
console.log(age);
Simple Addition
let a = 10;
let b = 20;

console.log(a + b);

Output:

30
Create a Function
function greet(name) {
return "Welcome " + name;
}

console.log(greet("Student"));

Output:

Welcome Student
Where Do You Practice?
Open Google Chrome
Press F12
Select Console
Type your JavaScript code and press Enter
Conclusion

The console is the best playground for beginners. Practice with variables, operators, functions, and console.log() before moving to DOM manipulation.

Start small. Code daily. Improve consistently. 🚀

javascript #webdev #beginners #coding

JavaScript vs Java: They're Not the Same! ☕⚡

Narasimma Radhakrishnan — Sat, 26 Sep 2026 05:21:23 +0000

JavaScript vs Java: They're Not the Same! ☕⚡

As a beginner, I thought Java and JavaScript were the same language because of their names. They aren't—they're completely different.

What is Java? ☕

Java is a programming language mainly used for backend development, Android apps, and enterprise software.

public class Main {
public static void main(String[] args) {
System.out.println("Hello Java");
}
}
What is JavaScript? ⚡

JavaScript is used to make websites interactive and also powers backend applications with Node.js.

console.log("Hello JavaScript");
Java vs JavaScript
Java JavaScript
Compiled language Interpreted language
Backend & Android Web & Full Stack
Runs on JVM Runs in Browser & Node.js
Strongly typed Dynamically typed
Which Should Beginners Learn?
Learn Java if you're interested in backend development, Android, or DSA.
Learn JavaScript if you want to build interactive websites and MERN stack applications.

JavaScript Variables & Functions for Beginners 🚀

Narasimma Radhakrishnan — Fri, 25 Sep 2026 05:17:19 +0000

When I started learning JavaScript, the first two concepts I learned were variables and functions. They are the foundation of every JavaScript program.

What is a Variable? 📦

A variable is a container that stores data.

let name = "Narasimma";
const age = 21;

console.log(name);
console.log(age);
let → Value can change
const → Value cannot be changed
What is a Function? ⚙️

A function is a reusable block of code that performs a specific task.

function greet(name) {
return "Hello " + name;
}

console.log(greet("Student"));

Output:

Hello Student
Why Use Functions?

Instead of writing the same code many times, create one function and reuse it whenever needed.

JavaScript for Beginners: Your First Step into Web Development 🚀

Narasimma Radhakrishnan — Thu, 24 Sep 2026 03:53:18 +0000

When I learned HTML and CSS, I could build beautiful web pages—but they couldn't respond to user actions. That's where JavaScript comes in.

What is JavaScript?

JavaScript is a programming language that makes websites interactive.

With JavaScript, you can:

Respond to button clicks
Validate forms
Create sliders and menus
Update content without reloading the page
Your First JavaScript Code
let name = "Narasimma";
console.log("Hello " + name);

Output:

Hello Narasimma
Variables

Variables store data.

let age = 21;
const college = "KGiSL";
let → Value can change
const → Value stays the same
Functions

Functions help you reuse code.

function greet(name) {
return "Welcome " + name;
}

console.log(greet("Student"));
Events

JavaScript can react to user actions.

Click Me
function sayHello() {
alert("Hello, World!");
}

When the button is clicked, an alert appears.

Why Learn JavaScript?
Adds interactivity to websites
Essential for React and MERN Stack
Used in frontend and backend (Node.js)
One of the most popular programming languages
Conclusion

JavaScript is the bridge between design and functionality. Start with variables, functions, and events, then gradually explore DOM manipulation and APIs.

Every great web developer starts with the basics. 💙

javascript #webdev #beginners #frontend

Why I Built a Website Clone Using HTML & CSS 💻

Narasimma Radhakrishnan — Wed, 23 Sep 2026 06:27:01 +0000

One of the best ways to improve your frontend skills is by cloning a website. As a beginner, I learned more from recreating real layouts than from only watching tutorials.

What is a Website Clone?

A website clone is a practice project where you recreate the design and layout of an existing website using HTML and CSS. The goal is to learn—not to copy or republish someone else's work.

Skills I Practiced
Semantic HTML structure
Flexbox & CSS Grid
Position and spacing
Responsive design with Media Queries
Buttons, cards, and navigation bars
My Simple Workflow
Analyze the website layout.
Build the HTML structure.
Style it using CSS.
Make it responsive for mobile.
Compare and improve the design.
What I Learned
Better understanding of page layouts
Improved CSS positioning and alignment
More confidence using Flexbox and Grid
Cleaner and reusable code

CSS Grid Areas.....

Narasimma Radhakrishnan — Mon, 21 Sep 2026 14:33:19 +0000

When I first learned CSS Grid, I used column numbers everywhere. Then I discovered Grid Areas—a much cleaner way to create page layouts.

What is grid-template-areas?

It lets you name each section of your layout instead of remembering column and row numbers.

.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
Assign a name to each element
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Now every element automatically goes to its correct position.

Why use Grid Areas?
Cleaner and more readable CSS
Perfect for dashboards and landing pages
Easy to rearrange layouts for responsive design

CSS Position Explained for Beginners 🎯

Narasimma Radhakrishnan — Sat, 19 Sep 2026 03:51:15 +0000

One of the most confusing topics in CSS is position. The good news? There are only 5 main position values you need to know.

Static (Default)

Every HTML element is static by default. It follows the normal page layout.

.box {
position: static;
}

Relative

relative keeps the element in its original place but lets you move it.

.box {
position: relative;
top: 20px;
left: 30px;
}

Absolute

absolute positions an element relative to its nearest positioned parent.

.parent {
position: relative;
}

.child {
position: absolute;
top: 10px;
right: 10px;
}

Perfect for badges and icons.

Fixed

A fixed element stays in the same place even while scrolling.

.navbar {
position: fixed;
top: 0;
}

Best example: Sticky navigation bar.

Sticky

Sticky behaves like relative until you scroll, then it sticks.

.header {
position: sticky;
top: 0;
}

Great for table headers and section titles.

The AI Era: Learn AI, Don't Fear It 🤖

Narasimma Radhakrishnan — Fri, 18 Sep 2026 13:33:40 +0000

We are living in the AI era, where technology is changing how we learn, build, and solve problems. As a beginner developer, I realized that AI is not replacing learning—it is helping us learn faster.

What is the AI Era?

The AI era is a time when applications use Artificial Intelligence to understand data, generate content, automate tasks, and assist people in everyday work.

Examples include:

AI chatbots
Code assistants
Language translation
Image generation
Smart recommendations
Why Should Developers Learn AI?

You don't need to become an AI expert on day one.

Start by learning:

Python fundamentals
APIs
Machine Learning basics
Prompt engineering
How to integrate AI into web applications
AI + Web Development

A simple modern stack can look like this:

Frontend: React
Backend: Node.js
AI: Gemini or OpenAI API
Database: MongoDB

This allows you to build intelligent applications without creating your own AI model.

My Biggest Lesson

AI won't replace developers. Developers who know how to use AI will build better solutions.

Keep learning, keep building, and use AI as a tool to improve your skills—not as a shortcut.

AI #MachineLearning #WebDevelopment #Beginners