DEV Community: Saravanan Cn

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.

Day 14: Learning JavaScript Array Methods 🚀

Saravanan Cn — Tue, 06 Oct 2026 14:22:01 +0000

Today i continued learning Javascript and explored several useful array methods.

1.length

the length property tells us how many elements are in an array.

let Laptops = ["Hp","lenovo","dell","orange"]; console.log(fruits.length);

2. toString()

Converts an array into a string.

console.log(fruits.toString());

3. join()

console.log(fruits.join(" - "));

4.delete()

The delete operator can remove an element from an array, but it leaves an empty space.

5. concat()

Combines two or more arrays.

`let a = ["Apple", "Banana"];
let b = ["Orange", "Mango"];

let result = a.concat(b);`

6. flat()

Converts a nested array into a flatter array.

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

console.log(numbers.flat());`

7. push()

Adds an element to the end of an array.
fruits.push("Mango");

8. unshift()

Adds an element to the beginning of an array.

fruits.unshift("Mango");

9. pop()

Removes the last element from an array.

fruits.pop();

10. shift()

Removes the first element from an array.

fruits.shift();

11. splice()

Used to add, remove, or replace elements in an array.

fruits.splice(1, 1);

12. slice()

Creates a new array containing a selected portion of an array.

let result = fruits.slice(1, 3);

13. copyWithin()

Copies part of an array to another position within the same array.
let numbers = [1, 2, 3, 4, 5];

numbers.copyWithin(2, 0);

Day 13: Learning JavaScript Arrays & For Loops 🚀

Saravanan Cn — Sun, 04 Oct 2026 16:33:14 +0000

Today i learned Javascript arrays and for loops.

1.Arrays

An Array is used to multiple values in single variable.

let laptops = ["Hp","Dell","Msi","Lenovo"];

console.log(laptops);

Each value in an array has an index.The index starts from 0.

console.log(laptops[0]); console.log(laptops[1]);

2.For Loop

I also learned how to use a for loop to repeat a block of code.

for(let i=1;i<=5;i++){ console.log(i); }

This prints numbers from 1 to 5.

3.Using a for loop with an Array.

for loop can also be used to go through the values in an array.
`
let laptops = ["Hp", "Lenovo", "msi", "dell"];

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

Day 12: Learning Anonymous Functions, Arrow Functions & Key-Value Pairs 🚀

Saravanan Cn — Thu, 01 Oct 2026 14:55:53 +0000

Today is Day 12 of my web development learning journey.

I continued learning javascript about anonymous functions,arrow functions and key-value pair.

1.Anonymous Function

It is a function without a name.
`
let greet = function() {
console.log("Hello!");
};

greet();`

2.Arrow Function

An arrow function is another way to write a function using the => syntax.

Arrow functions can make function syntax shorter and easier to write.

`let greet = () => {
console.log("Hello!");
};

greet();

3.Key-Value Pair

I also learned about key-value pairs in Javascript Objects.

let student = { name: "Saravanan", age: "29", course: "JavaScript" };`

Key-value pairs are used to store related information inside an object.

Day 11: Learning JavaScript Objects & Constructors 🚀

Saravanan Cn — Tue, 29 Sep 2026 17:35:10 +0000

1.Objects

Today i continued learning Javascript and learned about Objects,Object properties,constructors.

An object is used to store related data using key-value pairs
``javascript
let student = {
name: "Saravanan",
age: 33,
course: "JavaScript"
};

console.log(student);`

2.Reassigning a property

We can change the value of an object's property

`student.age = 34;

console.log(student.age);`

3.Constructor

A constructor function can be used to create multiple objects with the same structure.
`
function Student(name, age) {
this.name = name;
this.age = age;
}

let student1 = new Student("Saravanan", 33);
let student2 = new Student("Arun", 25);

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

Day 10: Learning JavaScript Parameters, Arguments & If-Else Conditions 🚀

Saravanan Cn — Sun, 27 Sep 2026 03:45:53 +0000

Today is Day10 of my web development learning journey. I contonued learning javascript and leraned about function,parameters,arguments and if-else condition.

1. Function Parameters

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

2. Function Arguments

Arguments are the actual values that we pass to a function when we call it.
greet("Saravanan");

3.If-else condition

The if block runs when the condition is true.

If the condition is false, the else block runs.

`let age = 20;

if (age >= 18) {
console.log("Eligible");
} else {
console.log("Not eligible");
}`

Day 9: Learning JavaScript Variables, Operators & Functions 🚀

Saravanan Cn — Fri, 25 Sep 2026 13:53:33 +0000

Today i started continue to learn Javascript and lean the basic fundamentals.

1.console.log()

I learned to use console.log() to display values and messages in the browser console.
console.log("Hello Javascript");

2.Variables

I learned how to declare variables and assign values to them.
var name = "Saravanan";
Here name is the variable and value is the Saravanan.

3.Assignment Operator(=)

assignemt operator is used to assign a value to a variable.
let age = 33;

4,Let keyword

I how to declare variables using let keyword.
let city = "chennai"

5.Functions

I learnt how to declare a function,give it a name and call the function.

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

greet();`

The function is declared using function keyword .greet() is the function name.

Today i understood Javascript can store datas,perform operations,execute reusable blocks code of using fucntions.

Day 8: HTML Media Tags & Starting My JavaScript Journey 🚀

Saravanan Cn — Fri, 25 Sep 2026 01:48:38 +0000

1. iframe

I learned about the <iframe> tag, which can be used to embed another webpage or external content inside an HTML page.

2.audio controls

I learned how to add videos to a webpage using the tag.

3.video controls

After learning these HTML concepts, I started learning JavaScript.

JavaScript is a programming language that can make webpages interactive and dynamic.

I started with JavaScript data types.

Some of the basic data types I learned are:

String
Number
Boolean
Undefined
Null
BigInt
Symbol
Object

For example:

let name = "Saravanan"; // String
let id = 31; // Number
let isLearning = true; // Boolean
let value; // Undefined
let data = null; // Null

Today was an important step because I completed several HTML and CSS concepts and have now started my JavaScript journey.

I'm excited to learn JavaScript step by step and build more interactive webpages. 🚀

html #javascript #webdevelopment #beginners

Day 7: Creating a YouTube Page Using HTML & CSS 🎥🚀

Saravanan Cn — Thu, 24 Sep 2026 01:01:10 +0000

Today is Day 7 of my web development learning journey.

Today, I created a YouTube-style webpage using HTML and CSS.

🛠️ What I worked on

While creating the page, I practiced:

Creating the webpage structure using HTML.
Styling the page using CSS.
Creating a navigation/header section.
Adding images and text to the webpage.
Working with layouts and positioning.
Using CSS to align different elements.
Creating a YouTube-style video layout.
Practicing responsive design concepts.

💡 What I learned

Building this page helped me understand how HTML provides the structure of a webpage and CSS is used to control its appearance and layout.

I also learned that creating a webpage becomes easier when I break it down into smaller sections and build each section step by step.

This is another small project in my web development learning journey.

I'm continuing to practice HTML and CSS before moving on to JavaScript. 🚀

📚 My learning journey so far

Day 1 → HTML & CSS basics

Day 2 → Tables & Navigation Bar

Day 3 → Media Queries, Hover & Form Elements

Day 4 → CSS Positioning

Day 5 → CSS Grid & Google-style Homepage

Day 6 → Facebook & Instagram-style Pages

Day 7 → YouTube-style Page 🎥

Another day of learning completed! 🚀

html #css #webdevelopment #beginners

Day 6: Building Facebook & Instagram Pages with HTML and CSS 🚀

Saravanan Cn — Wed, 23 Sep 2026 00:52:19 +0000

Today is Day 6 of my web development learning journey.

Yesterday, I practiced creating Facebook and Instagram-style pages using HTML and CSS.

What I learned

How to structure a webpage using HTML.
How to style webpages using CSS.
How to create layouts similar to real-world websites.
How to use the placeholder attribute in input fields.
How to create and style login forms.
How to position and align different elements on a webpage.

🛠️ Practice Projects

I created practice versions of:

Facebook page
Instagram page

These projects helped me understand how HTML and CSS concepts are combined to create real-world webpage layouts.

📚 What is a placeholder?

The placeholder attribute provides a short hint inside an input field to tell the user what information to enter.

For example:

Day 5: Learning CSS Grid & Building a Google Homepage 🚀

Saravanan Cn — Mon, 21 Sep 2026 16:01:09 +0000

Today I learned about CSS Grid and practiced using positioning concepts to create a webpage layout.

What I learned today

CSS Grid and how it helps create structured webpage layouts.
How to use rows and columns with Grid.
How positioning can be used to place elements accurately.
How different CSS concepts work together to create a complete webpage.

🛠️ Mini Project: Google Homepage

After learning these concepts, I practiced by creating a Google homepage using HTML and CSS.

While building it, I practiced:

Creating the page structure with HTML.
Using CSS Grid for layout.
Positioning different elements.
Styling buttons, links, and other elements.
Making the layout look similar to the original design.

This project helped me understand how individual HTML and CSS concepts can be combined to build a complete webpage.

I'm continuing my journey step by step and looking forward to learning JavaScript next! 🚀

Day 4: Learning CSS Positioning — Fixed, Relative, Absolute & Sticky 🚀

Saravanan Cn — Fri, 18 Sep 2026 14:19:23 +0000

Today is Day 4 of my web development learning journey.

Today I learned about the different CSS position properties and how they control the placement of elements on a webpage.

position: relative

The relative position allows an element to be moved from its normal position using properties such as top, left, right, and bottom.

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

position: absolute

The absolute position removes the element from the normal document flow and positions it relative to its nearest positioned ancestor.

.box {
position: absolute;
top: 0;
right: 0;
}

position: fixed

The fixed position keeps an element in the same place on the screen even when the page is scrolled.

.navbar {
position: fixed;
top: 0;
width: 100%;
}

position: sticky

The sticky position behaves like a normally positioned element until a specified scroll position is reached. Then it sticks to that position.

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

html #css #webdevelopment #beginners