DEV Community: bala senthil

Master CSS Grid: Build Responsive Layouts Easily (With Examples)

bala senthil — Mon, 30 Mar 2026 12:32:59 +0000

Introduction

CSS Grid is one of the most powerful layout systems in modern web development. It allows you to create complex, responsive web layouts with minimal code compared to older methods like floats or even Flexbox.

In this guide, you’ll learn how to use CSS Grid to structure your web pages efficiently. We’ll cover the basics like rows, columns, and grid areas, and then move into building a real-world responsive layout step by step.

Whether you're a beginner or an experienced developer, mastering CSS Grid will help you design cleaner, faster, and more flexible user interfaces.

1. What is CSS Grid?

CSS Grid is a layout system that divides a page into rows and columns.

Basic Structure

.container{
   display:grid;
}

2. Creating Columns & Rows

Example

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 200px ;
  gap: 10px;
}

Explanation

1fr = Equal space
gap = space between items

3. Positioning Items in Grid

Examples

.item1{
   grid-column: 1/3;
}

.item2{
   grid-column: 2/3;
}

4. Using Grid Template Areas (Best Practice)

Example

.container{
  display: grid;
  grid-template-areas: 
  "header header"
  "sidebar main"
  "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 10px;
}

.header{
  grid-area: header;
}

.sidebar{
  grid-area: sidebar;
}

.main{
  grid-area: main;
}

.footer{
  grid-area: footer;
}

5. Build a Real-World Layout

HTML Syntax

<div class="container">
   <header class="header">Header</header>
   <aside class="sidebar">Sidebar</aside>
   <main class="main">Main Content</main>
   <footer class="footer">Footer</footer>
</div>

CSS

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  gap: 10px;
}

.header { grid-area: header; background: #333; color: white; }
.sidebar { grid-area: sidebar; background: #f4f4f4; }
.main { grid-area: main; background: #fff; }
.footer { grid-area: footer; background: #333; color: white; }

Output:

6. Make It Responsive

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

Output:

Conclusion

CSS Grid makes layout design faster, cleaner, and more powerful. Once you master it, you can build almost any modern UI with minimal code.

10 CSS3 Tricks Every Developer Should Know (With Examples)

bala senthil — Sat, 21 Mar 2026 12:22:46 +0000

Introduction

CSS3 is powerful—you can create stunning UI effects without JavaScript. Here are 10 must-know CSS3 tricks with practical examples

1. Smooth Hover Effects

Smooth hover effects make your UI feel modern and interactive. Instead of abrupt changes when users hover over buttons, cards, or images, CSS transitions create a soft animation that improves user experience and visual appeal.

Hover effects are commonly used in:

Buttons
Navigation menus
Cards
Images
Links

Using the transition property in CSS, we can control how the effect animates.

Basic Hover Effect Example

HTML

<button class="btn-hover">Hover me</button>

CSS

.btn-hover{
  background-color: #399292;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.btn-hover:hover{
  background-color: #2ecc71;
}

When the user hovers over the button, the color changes smoothly instead of instantly.

2. CSS Variables (Custom Properties)

CSS Variables (also called Custom Properties) allow you to store reusable values like colors, fonts, spacing, and more. They make your CSS cleaner, easier to maintain, and perfect for building scalable designs. In this guide, you’ll learn how to use CSS variables with real-world examples.

CSS Variables are user-defined values declared using --variable-name and accessed using var().

Why Use CSS Variables?

Reuse values across your project
Easy theme management
Reduce repetition
Improve maintainability
Dynamic updates with JavaScript

Example 1: Basic CSS Variable Usage

HTML

<button class="button-variable">Click Me</button>

CSS

:root{
  --main-color: #399292;
  --text-color: #ffffff;
  --border-none: none;
}

.button-variable{
  background-color: var(--main-color);
  color: var(--text-color);
  border: var(--border-none);
  padding: 10px 15px;
}

CSS Variables are a powerful feature that helps you write cleaner and more flexible CSS. Whether you're building a small website or a large application, using variables can significantly improve your workflow and maintainability.

3. Flexbox Centering (Perfect Alignment)

Centering elements in CSS used to be tricky, but with Flexbox, it becomes simple and powerful. Whether you want to center text, images, or entire layouts, Flexbox provides a clean and responsive way to achieve perfect alignment both horizontally and vertically.

Flexbox uses properties like justify-content and align-items to align elements along the main axis and cross axis.

Horizontal alignment → justify-content
Vertical alignment → align-items

Example 1: Centering Horizontally

HTML

<div class="container">
   <div class="item">Centering Horizontally</div>
</div>

CSS

.container{
  display: flex;
  justify-content: center;
  border: 2px solid #000;
  height: 100px;
}

.item{
  background-color: #2ecc71;
  color: #ffffff;
}

Example 2: Centering Vertically

HTML

<div class="container"></div>

CSS

.container{
  display: flex;
  align-items: center;
  height: 200px;
  border: 2px solid #000;
}

This aligns the child element vertically in the center.

4. Gradient Backgrounds

Gradient backgrounds are a powerful way to make your website visually appealing without using images. CSS gradients allow you to create smooth color transitions, modern UI designs, and eye-catching effects using just code. In this guide, you’ll learn how to use linear, radial, and advanced gradients with real working examples.

Linear Gradient

HTML

<div class="item"></div>

CSS

.item{
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, #2ecc71, #399292);
}

Gradient backgrounds are one of the easiest ways to enhance your UI design. With just a few lines of CSS, you can create beautiful, modern, and dynamic visuals that improve user experience.

5. Box Shadow for Depth

The box-shadow property in CSS is used to add shadow effects around elements. It helps create depth, improve visual hierarchy, and make UI components like cards, buttons, and modals look modern and attractive. In this guide, you’ll learn how to use box-shadow with real working examples.

Basic Box Shadow

HTML

<div class="item"></div>

CSS

.item{
  width: 200px;
  height: 100px;
  background: #ffffff;
  box-shadow: 2px 2px 5px rgb(199 199 199 / 30%);
}

The box-shadow property is a simple yet powerful tool to elevate your UI design. With proper usage, you can create depth, focus, and visually appealing components without using images.

6. Text Overflow Ellipsis

When text content is too long to fit inside a container, it can break your layout. The text-overflow: ellipsis property helps you handle this elegantly by truncating the text and adding ... at the end. In this guide, you’ll learn how to use ellipsis for single-line and multi-line text with real working examples.

Basic Requirements for Ellipsis

HTML

<div class="item">
   <p>This is a very long text that will not fit inside the container</p>
</div>

CSS

.item p{
  width: 200px;
  border: 1px solid #000;
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Text overflow ellipsis is a small but powerful CSS feature that improves UI design and user experience. It ensures your layouts stay clean and professional even with long dynamic content.

7. Responsive Images

Responsive images ensure that your images look great on all screen sizes—mobile, tablet, and desktop—without breaking layouts or slowing down your website. In this guide, you’ll learn how to make images responsive using CSS and modern HTML techniques with real working examples.

Basic Responsive Image (CSS)

HTML

<img class="responsive-image" src="./images/Bannerimage.png"/>

CSS

.responsive-image{
  max-width: 100%;
  height: auto;
}

Responsive images are essential for modern web development. With simple CSS and HTML techniques, you can ensure your images look perfect on every device while improving performance and user experience.

8. CSS Animations

CSS animations allow you to create dynamic and engaging user interfaces without using JavaScript. From simple hover effects to complex motion designs, animations can improve user experience and make your website feel modern and interactive. In this guide, you’ll learn how to use CSS animations with real working examples.

Simple Fade In Animation

HTML

<div class="item">Simple fade in animation</div>

CSS

@keyframes fadeIn{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

.item{
  animation: fadeIn 2s ease-in;
}

CSS animations are a powerful way to make your UI more engaging and interactive. With keyframes and a few properties, you can create stunning effects that improve user experience without adding extra complexity.

9. Sticky Positioning

CSS position: sticky allows elements to stick to a specific position while scrolling. It’s commonly used for sticky headers, navigation bars, and sidebars. This feature combines the behavior of both relative and fixed positioning, making it powerful and easy to use.

An element with position: sticky behaves like:

Relative → before scrolling
Fixed → after reaching a defined position

HTML

<div class="container">
   <aside class="sidebar">Sidebar</aside>
   <main class="main">Content</main>
</div>

CSS

.container {
  display: flex;
}

.sidebar {
  position: sticky;
  top: 20px;
  height: 200px;
  background: #2196F3;
  color: white;
  padding: 10px;
}

.main {
  height: 1500px;
  margin-left: 20px;
}

CSS Sticky Positioning is a simple yet powerful feature that enhances user experience by keeping important elements visible during scrolling. It’s perfect for headers, sidebars, and section labels in modern web design.

10. Clamp for Responsive Fonts

The clamp() function in CSS is a powerful tool for creating responsive font sizes without using media queries. It allows you to define a minimum size, a preferred (scalable) size, and a maximum size—ensuring your text looks perfect on all devices.

Why Use clamp() for Fonts?

No need for media queries
Smooth scaling across screen sizes
Better readability
Cleaner and modern CSS

Responsive Heading

HTML

<h1>Responsive heading</h1>

CSS

h1{
  font-size: clamp(24px, 5vw, 48px);
}

The clamp() function is a modern CSS feature that simplifies responsive design. It helps you create fluid typography and layouts without writing complex media queries, making your code cleaner and more efficient.

Master CSS Selectors: The Complete Guide with Real-Time Examples

bala senthil — Fri, 20 Mar 2026 14:42:57 +0000

Introduction

CSS selectors are the backbone of styling in web development. They allow you to target HTML elements and apply styles efficiently.

Whether you're a beginner or an experienced developer, mastering selectors will make your CSS cleaner, faster, and more powerful.

1. Basic CSS Selectors

HTML Syntax

<p>This is a paragraph</p>

CSS

p{
  color: #596af7;
}

Class Selector

Targets elements with a specific class.

HTML Syntax

<p class="text">Hello World</p>

CSS

.text{
  color: #596af7;
}

ID Selector

Targets a unique element.

HTML Syntax

<p id="title">Welcome</p>

css

#title{
  color: #596af7;
}

2. Grouping Selector

Apply same styles to multiple elements.

HTML Syntax

 <p>Selectors are powerful!</p>
 <h1>Title heading</h1>
 <span>Sub heading</span>

CSS

p,h1,span{
  color: aquamarine;
}

3. Descendant Selector

Targets elements inside another element.

HTML Syntax

<div>
    <p>Inside div</p>
</div>

CSS

div p{
  color: palegreen;
}

4. Child Selector (>)

Targets direct children only.

CSS

div > p{
  color: aqua;
}

5. Attribute Selector

Targets elements based on attributes.

HTML Syntax

<input type="text" />
<input type="password" />

CSS

input[type="text"] {
  border: 2px solid blue;
}

6. Pseudo-Class Selectors

Used for specific states.

Hover Example

HTML Syntax

<button>Submit</button>

CSS

button:hover {
    background-color: black;
    color: white;
}

First Child

li:first-child {
  color: red;
}

7. Pseudo-Element Selectors

First letter

CSS

p::first-letter {
  font-size: 24px;
  color: #596af7;
}

Before Element

CSS

p::before {
  content: "";
}

8. Universal Selector

Targets all elements.

CSS

* {
  margin: 0;
  padding: 0;
}

9. Adjacent Sibling Selector (+)

Targets immediate next element.

CSS Syntax

h1 + p {
  color: green;
}

10. General Sibling Selector (~)

Targets all siblings.

CSS

h1 ~ p {
  color: gray;
}

Real-Time Example (Mini Project)

HTML Syntax

<div class="card">
   <h2>CSS Selectors</h2>
   <p>Selectors are powerful!</p>
</div>

CSS

.card {
    border: 1px solid #ccc;
    padding: 15px;
    margin: 10px 0px;
  }

  .card:hover {
    background-color: #f5f5f5;
  }

  .card h2 {
    color: #596af7;
  }

  .card p::first-letter {
    font-size: 18px;
    font-weight: 500;
  }

  input[type="text"] {
    border: 2px solid lightblue;
  }

Conclusion

CSS selectors are essential for writing efficient and scalable styles. Once you master them, you can build complex layouts with minimal code.

Master CSS Grid Layout with Real-World Examples (Beginner to Advanced)

bala senthil — Wed, 18 Mar 2026 15:10:05 +0000

What is CSS Grid?

CSS Grid is one of the most powerful layout systems in modern web development. It allows you to create complex, responsive layouts with minimal code—without relying heavily on Flexbox or external frameworks.

In this guide, you’ll learn how to use CSS Grid with real-world working examples, from basic layouts to advanced responsive designs.

1. Basic Grid Layout

Example: 2 Column Layout

HTML Syntax

<div class="grid">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid div {
  background: lightblue;
  padding: 20px;
}

Output

2. Responsive Grid (Auto Fit)

Example: Card Layout

HTML Syntax

<div class="grid">
   <div class="card">Card 1</div>
   <div class="card">Card 2</div>
   <div class="card">Card 3</div>
   <div class="card">Card 4</div>
</div>

CSS

.grid {
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.card {
  background: rgb(93 192 223);
  padding: 20px;
}

Output

3. Dashboard Layout

HTML Syntax

<div class="container">
   <header>Header</header>
   <aside>Sidebar</aside>
   <main>Main Content</main>
   <footer>Footer</footer>
</div>

CSS

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  gap: 10px;
}

header { grid-area: header; background: #596af7; color: white; }
aside { grid-area: sidebar; background: #eee; color: black; }
main { grid-area: main; background: #eee; }
footer { grid-area: footer; background: #333; color: white; }

Output

4. Image Gallery Layout

HTML Syntax

<div class="img-gallery">
   <img src="./images/Bannerimage.png" alt="">
   <img src="./images/Bannerimage.png" alt="">
   <img src="./images/Bannerimage.png" alt="">
   <img src="./images/Bannerimage.png" alt="">
</div>

CSS Syntax

.img-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.img-gallery img{
  width: 100%;
  height: 150px;
  object-fit: cover;
}

Output:

5. Centering with Grid

HTML Syntax

<div class="grid-center">
   Grid Center
</div>

CSS

.grid-center{
  display: grid;
  place-items: center;
  height: 100vh;
}

Output

CSS Grid vs Flexbox

Slice vs Splice vs Split in JavaScript – Key Differences with Real Examples

bala senthil — Wed, 18 Mar 2026 08:03:54 +0000

Introduction

When working with JavaScript, developers often get confused between slice(), splice(), and split(). While they sound similar, they serve completely different purposes.

In this article, you'll learn the exact difference, when to use each method, and see working examples you can apply in real projects.

1. slice() – Extract Without Changing Original Array

The slice() method is used to extract a portion of an array without modifying the original array.

Syntax

array.slice(start, end)

Example

let employee = ['Bala','Rahul','Rohit','Vicky'];
let result = employee.slice(1,3);
console.log(result);
console.log(employee);

Output:

[ 'Rahul', 'Rohit' ]
[ 'Bala', 'Rahul', 'Rohit', 'Vicky' ]

Key Points

Does NOT modify original array
Returns a new array
End index is NOT included

2. splice() – Modify Original Array

The splice() method is used to add, remove, or replace elements in an array.

Syntax

array.splice(start, deleteCount, item1, item2, ...)

Example

let employee = ['Bala','Rahul','Rohit','Vicky'];
employee.splice(1,1,'Jack');
console.log(employee);

Output:

[ 'Bala', 'Jack', 'Rohit', 'Vicky' ]

Key Points:

Modifies original array
Can add/remove/replace elements
Very powerful but must be used carefully

3. split() – Convert String to Array

The split() method is used on strings, not arrays. It converts a string into an array based on a separator.

Syntax:

string.split(separator)

Example:

let employee = "Bala,Rahul,Rohit,Vicky";
let result = employee.split(",");
console.log(result);

Output:

[ 'Bala', 'Rahul', 'Rohit', 'Vicky' ]

Key Points:

Works on strings
Returns an array
Does NOT modify original string

Build a Contact Form with Real-Time Validation in JavaScript (Step-by-Step Guide)

bala senthil — Tue, 17 Mar 2026 14:09:47 +0000

Introduction

Forms are everywhere on the web—from login pages to contact sections. But what makes a form truly user-friendly is real-time validation.

Instead of showing errors only after submission, modern applications validate inputs instantly—guiding users as they type. In this tutorial, you’ll learn how to build a responsive contact form with live validation, including email format checking and dynamic error handling.

What You’ll Learn

Create a clean contact form using HTML
Style it with modern CSS
Add real-time validation using JavaScript
Validate email format properly
Improve user experience with instant feedback

Step 1: HTML Structure

<form id="contactForm">
      <h2>Contact Us</h2>

      <input type="text" id="userName" placeholder="User Name" />
      <small id="usernameError" class="error"></small>

      <input type="email" id="userEmail" placeholder="Email" />
      <small id="useremailError" class="error"></small>

       <textarea id="message" placeholder="Your Message"></textarea>
       <small id="messageError" class="error"></small>

       <button type="submit">Send Message</button>
       <p id="successMsg"></p>
 </form>

Step 2: Styling with CSS

form {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
}

button {
  width: 100%;
  padding: 10px;
  background: #4facfe;
  color: white;
  border: none;
  cursor: pointer;
}

.error {
  color: red;
  font-size: 12px;
}

#successMsg {
  color: green;
  text-align: center;
}

Step 3: Real-Time Validation with JavaScript

const form = document.getElementById("contactForm");

const usernameInput = document.getElementById("userName");
const useremailInput = document.getElementById("userEmail");
const messageInput = document.getElementById("message");

const usernameError = document.getElementById("usernameError");
const useremailError = document.getElementById("useremailError");
const messageError = document.getElementById("messageError");
const successMsg = document.getElementById("successMsg");

const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

// Real-time validation
usernameInput.addEventListener("input", () => {
  usernameError.innerText = usernameInput.value.trim() === "" ? "Name is required" : "";
});

useremailInput.addEventListener("input", () => {
  const email = useremailInput.value.trim();

  if (email === "") {
    useremailError.innerText = "Email is required";
  } else if (!emailPattern.test(email)) {
    useremailError.innerText = "Enter a valid email";
  } else {
    useremailError.innerText = "";
  }
});

messageInput.addEventListener("input", () => {
  messageError.innerText = messageInput.value.trim() === "" ? "Message is required" : "";
});

// Submit validation
form.addEventListener("submit", function (e) {
  e.preventDefault();

  let isValid = true;
  successMsg.innerText = "";

  if (usernameInput.value.trim() === "") {
    usernameError.innerText = "Name is required";
    isValid = false;
  }

  if (useremailInput.value.trim() === "") {
    useremailError.innerText = "Email is required";
    isValid = false;
  } else if (!emailPattern.test(useremailInput.value.trim())) {
    useremailError.innerText = "Enter a valid email";
    isValid = false;
  }

  if (messageInput.value.trim() === "") {
    messageError.innerText = "Message is required";
    isValid = false;
  }

  if (isValid) {
    successMsg.innerText = "Message sent successfully!";
    form.reset();
  }
});

Output: Without Validation

Output: With Validation

Output: Not valid email

Output: Form submitted successfully

Output: Responsive mode

How It Works

When a field is empty → error message appears
As the user types → error disappears instantly
Invalid email → shows “Enter a valid email”
Valid input → allows submission

Conclusion

Building a contact form with real-time validation is a great beginner project that teaches you how JavaScript interacts with the DOM. It also gives you a strong foundation for creating more advanced applications.

JavaScript Basics Every Developer Must Know (Complete Beginner Guide)

bala senthil — Tue, 17 Mar 2026 08:32:19 +0000

Learn the essential JavaScript basics every developer must know, including variables, data types, functions, arrays, and DOM manipulation. This beginner-friendly guide with real-world examples will help you build a strong foundation and start creating interactive web applications.

Real-Time Example: Simple User Greeting App

This example combines variables, functions, events, and DOM manipulation—all core JavaScript basics.

HTML Syntax

<section class="d-flex justify-content-center mt-5 mb-2">
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Enter your name" id="userInput">
            <button onclick="greetMessage()" type="button" class="btn btn-success">Click me</button>
        </div>
</section>
<div class="d-flex justify-content-center">
     <p id="greetMessage" class="fw-bold"></p>
</div>

Script

let message = 'Welcome';

function greetMessage(){
  const inputMessage = document.getElementById('userInput').value;

  if(inputMessage === ''){
    document.getElementById('greetMessage').innerText = 'Please enter your name';
    return
  }

  document.getElementById('greetMessage').innerText = `${message} ${inputMessage}`
}

Output: Before Click

Output: After button click

Variables (let message)

Variables are used to store data that can be reused throughout your program. In this example, the message variable holds a default greeting text that is later combined with user input to create a personalized message.

Functions (greetMessage())

Functions help organize your code into reusable blocks. The greetMessage() function is triggered when the user clicks a button, making it easy to handle logic like reading input and updating the UI in one place.

DOM Manipulation (getElementById)

JavaScript can interact directly with HTML elements using the DOM (Document Object Model). With getElementById, we access elements like the input field and paragraph, allowing us to read user data and display results dynamically.

Events (onclick)

Events make web pages interactive. In this example, the onclick event listens for a button click and triggers the greetMessage() function, creating a smooth user interaction.

Conditions (if (inputMessage === ""))

Conditions allow your program to make decisions. Here, we check if the input field is empty and display a warning message instead of proceeding, improving user experience and preventing errors.

Template Literals (${message}, ${inputMessage})

Template literals provide an easy and readable way to combine strings and variables. Instead of using complex concatenation, we use backticks (`) to embed variables directly into the string for a cleaner output.

This example brings together multiple JavaScript basics to show how they work in a real-world scenario. By combining variables, functions, DOM manipulation, and events, you can create interactive and user-friendly web applications.

Check out more web development articles by clicking the link below.

Dev with Bala: JavaScript Basics Every Developer Must Know (Complete Beginner Guide)

Most Useful HTML Tags Learn the essential JavaScript basics every developer must know, including variables, dat...

devwithbala.blogspot.com

Github Link

Balasenthil / UI-Development

A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.

UI-Development

A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.

View on GitHub

JavaScript map(), filter(), and reduce() Explained with Simple Examples

bala senthil — Mon, 16 Mar 2026 13:51:03 +0000

map(), filter(), reduce() in JavaScript Explained with Examples

JavaScript provides powerful array methods that help developers write clean, readable, and efficient code. Among them, map(), filter(), and reduce() are the most commonly used methods in modern JavaScript development.

These methods are widely used in frameworks like Angular, React, and Vue to manipulate and transform data.

In this article, we’ll explore map(), filter(), and reduce() with simple examples.

1. map() – Transform Array Elements

The map() method creates a new array by applying a function to each element of the original array.

It does not modify the original array.

Example

const numbers = [1,2,3,4,5]
const result = numbers.map(n => n * 2);
console.log(result);

Output:

[2, 4, 6, 8, 10]

Real-World Example

const users = [
  {
    name: 'Bala'
  },
  {
    name: 'Rohit'
  },
  {
    name:'Vicky'
  }
]

const result = users.map(n => n.name);
console.log(result);

Output: ['Bala', 'Rohit', 'Vicky']

map() is commonly used when transforming data from APIs.

2. filter() – Select Specific Elements

The filter() method creates a new array with elements that satisfy a condition.

Example

const numbers = [1,2,3,4,5,6]
const result = numbers.filter(n => n%2 === 0);
console.log(result);

Output: [2, 4, 6]

Real-World Example

const users = [
  {
    name: 'Bala',
    age: 20
  },
  {
    name: 'Rohit',
    age:25
  },
  {
    name:'Vicky',
    age:30
  },
  {
    name:'John',
    age:35
  },
  {
    name:'Michael',
    age:32
  }
]

const result = users.filter((n => n.age > 30));
console.log(result);

Output:
0: {name: 'John', age: 35}
1: {name: 'Michael', age: 32}

filter() is useful for search results, product filtering, and user lists.

3. reduce() – Convert Array into a Single Value

The reduce() method processes each element and reduces the array to a single value.

Example

const numbers = [1,2,3,4,5]
const result = numbers.reduce((acc, num) => acc+num,0)
console.log(result);

Output:15

Real-World Example

const result = cart.reduce((total, item)=> total + item.price,0);
console.log(result);

Output: 70000

reduce() is often used for totals, analytics, and aggregations.

Conclusion

The map(), filter(), and reduce() methods are essential tools for working with arrays in JavaScript. They help developers write clean, concise, and functional code.

Check out more web development articles by clicking the link below.

Dev with Bala: JavaScript map(), filter(), and reduce() Explained with Simple Examples

Most Useful HTML Tags map(), filter(), reduce() in JavaScript Explained with Examples JavaScript provides ...

devwithbala.blogspot.com

Most Useful JavaScript Array Methods Every Developer Should Know

bala senthil — Mon, 16 Mar 2026 11:11:19 +0000

JavaScript array methods

JavaScript arrays are one of the most powerful and commonly used data structures in web development. Whether you're working with user data, product lists, or API responses, arrays help you store and manipulate collections of data efficiently.

JavaScript provides many built-in array methods that make it easy to add, remove, transform, and iterate through data. In this article, we'll explore some of the most useful JavaScript array methods every developer should know.

1. push() – Add Element to the End

The push() method in JavaScript is used to add one or more elements to the end of an array. It modifies the original array and returns the new length of the array.

const employee = ['Ajay', 'Vijay', 'Rahul'];

employee.push('Bala');

console.log(employee);

Output: ['Ajay', 'Vijay', 'Rahul', 'Bala']

This method is commonly used when adding new items to a list.

2. pop() – Remove Last Element

The pop() method in JavaScript is used to remove the last element from an array.

It modifies the original array and returns the removed element.

const employee = ['Ajay', 'Vijay', 'Rahul'];

employee.pop();

console.log(employee);

Output: ['Ajay', 'Vijay']

The last element "Rahul" is removed.

3. shift() – Remove First Element

The shift() method in JavaScript is used to remove the first element from an array.

It changes the original array and returns the removed element.

const employee = ['Ajay', 'Vijay', 'Rahul'];

employee.shift();

console.log(employee);

Output:['Vijay', 'Rahul']

The first element 'Ajay' is removed.

4. unshift() – Add Element to the Beginning

The unshift() method in JavaScript is used to add one or more elements to the beginning of an array.

It modifies the original array and returns the new length of the array.

const employee = ['Ajay', 'Vijay', 'Rahul'];

employee.unshift('Bala');

console.log(employee);

Output: ['Bala', 'Ajay', 'Vijay', 'Rahul']

unshift() returns the new length of the array.

5. map() – Transform Array Data

The map() method in JavaScript is used to create a new array by applying a function to each element of an existing array.

Unlike push() or pop(), map() does not change the original array. It returns a new array.

let numbers = [1,2,3,4,5,6]
let result = numbers.map(n => n * 2);
console.log(result);

Output:[2, 4, 6, 8, 10, 12]

let names = ['Ajay', 'Vijay', 'Rahul'];
let upperNames = names.map(empname => empname.toUpperCase());
console.log(upperNames);

Output: ['AJAY', 'VIJAY', 'RAHUL']

This method is widely used in modern JavaScript frameworks like Angular and React.

6. filter() – Filter Data from an Array

The filter() method in JavaScript is used to create a new array containing elements that match a specific condition.

It does not modify the original array. Instead, it returns a new filtered array.

let numbers = [1,2,3,4,5,6]
let filteredNumbers = numbers.filter(n => n % 2 === 0);
console.log(filteredNumbers);

Output: [2, 4, 6]

let numbers = [5,10,1,8,20,3,40]
let filteredNumbers = numbers.filter(n => n <= 10)
console.log(filteredNumbers)

Output: [5, 10, 1, 8, 3]

7. reduce() – Reduce Array to a Single Value

The reduce() method in JavaScript is used to reduce an array to a single value by applying a function to each element.

It is commonly used for sum, totals, grouping, or complex calculations.

let numbers = [1,2,3,4,5,6]
let result = numbers.reduce((acc, num) => acc + num, 0);
console.log(result);

Output: 21

8. find() – Find First Matching Element

The find() method in JavaScript is used to return the first element in an array that satisfies a given condition.

If no element matches the condition, it returns undefined.

let numbers = [10,5,12,3,25,4,30]
let result = numbers.find(n => n > 10);
console.log(result);

Output: 12

9. includes() – Check if Value Exists

The includes() method in JavaScript is used to check whether an array contains a specific element.

It returns true if the element exists, otherwise false.

let names = ['Bala','Rahul','Sachin','Rohit'];
let result = names.includes('Bala');
console.log(result);

Output: true

10. sort() – Sort Array Values

The sort() method in JavaScript is used to sort the elements of an array.
By default, it sorts elements as strings in ascending order and modifies the original array.

let numbers = [10,4,3,25,1,7,9];
let result = numbers.sort((a,b) => a-b);
console.log(result);

Output: [1, 3, 4, 7, 9, 10, 25]

JavaScript array methods make it easy to work with collections of data efficiently. Methods like map(), filter(), reduce(), and find() are especially important for modern web development and are widely used in frameworks like Angular, React, and Vue.

Check out more web development articles by clicking the link below.

Dev with Bala: Most Useful JavaScript Array Methods Every Developer Should Know

Most Useful HTML Tags Most Useful JavaScript Array Methods Every Developer Should Know JavaScript array me...

devwithbala.blogspot.com

How to Create a Typing Animation Using Pure CSS (Step-by-Step Guide)

bala senthil — Thu, 12 Mar 2026 15:07:24 +0000

Creating a Typing Animation Using CSS (Step-by-Step Guide)

Animations play a major role in modern web design. A small interactive effect can make a website feel more dynamic and engaging. One such popular effect is the typing animation, where text appears on the screen as if it is being typed in real time.

This effect is commonly used in portfolio websites, landing pages, and hero sections to capture user attention. The best part is that you can create this animation using pure HTML and CSS, without needing any JavaScript.

In this guide, we’ll learn how to build a simple and elegant typing animation using CSS.

Understanding the Typing Effect

A typing animation works by gradually revealing text from left to right. At the same time, a blinking cursor is displayed to simulate the look of someone typing on a keyboard.

To achieve this effect, we use:

CSS keyframe animations
The steps() timing function
A border cursor animation

These techniques allow us to create a smooth and realistic typing experience.

Step 1: Create the HTML Structure

<section class="d-flex justify-content-center">
        <h1 class="typing-text">Welcome to My Personal Website</h1>
</section>

Step 2: Style the Text with CSS

Next, we apply some basic styles to prepare the text for animation.

.typing-text {
  font-family: monospace;
  font-size: 28px;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid black;
}

Why these properties?

white-space: nowrap → Prevents the text from wrapping to another line
overflow: hidden → Hides the text until it is "typed"
border-right → Creates the typing cursor

Step 3: Create the Typing Animation

.typing-text {
  width: 0;
  animation: typing 5s steps(31) forwards;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 31ch;
  }
}

Explanation

steps(31) makes the animation move character by character.
31ch represents the width of 31 characters.

This gives the effect of text appearing letter by letter.

Step 4: Add a Blinking Cursor

.typing-text {
  animation: typing 5s steps(31) forwards, blink 0.9s infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

This animation repeatedly hides and shows the cursor, creating a blinking effect.

Result

After combining everything, the text will:

Appear character by character
Display a blinking cursor
Create a realistic typing effect

This small animation can significantly improve the visual appeal of your website.

Check out more web development articles by clicking the link below.

Dev with Bala: How to Create a Typing Animation Using Pure CSS (Step-by-Step Guide)

Most Useful HTML Tags How to Create a Typing Animation Using Pure CSS (Step-by-Step Guide) Creating a Typi...

devwithbala.blogspot.com

Github link:

Balasenthil / UI-Development

A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.

UI-Development

A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.

View on GitHub

Responsive login form using HTML and CSS

bala senthil — Thu, 12 Mar 2026 07:53:35 +0000

Responsive Login Form Design with HTML, CSS, and Flexbox

A login form is one of the most important elements of any website or web application. It allows users to securely access their accounts by entering their credentials such as a username or email address and password. A well-designed login form not only improves user experience but also gives a professional look to your website.

In this tutorial, we will learn how to create a modern and responsive login form using HTML and CSS. The design will include a clean layout, stylish input fields, icons, a login button, and a beautiful gradient background. We will also focus on creating a user-friendly interface that works smoothly across different devices including desktops, tablets, and mobile phones.

This guide is perfect for beginners and front-end developers who want to improve their UI design skills and understand how login forms are structured in real-world websites. You will learn how to align elements properly, style form inputs, and create an attractive design using modern CSS techniques.

By the end of this tutorial, you will have a fully functional and visually appealing login form that you can easily integrate into your projects such as websites, admin dashboards, SaaS applications, or portfolio projects.

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link rel="stylesheet" href="loginform.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
    </style>

</head>

<body>
    <header>
        <nav>
            <input type="checkbox" id="check">
            <label for="check" class="checkbtn">
                <i class="fas fa-bars"></i>
            </label>
            <h5 class="logo">Company Name</h5>
            <ul class="mb-0">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Products</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Support</a>
                </li>
                <li>
                    <a href="#">Pricing</a>
                </li>
            </ul>
        </nav>
    </header>
    <section>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6 text-center mb-5">
                    <h1>Login form</h1>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-12 col-lg-10">
                    <div class="form-container d-md-flex">
                        <div class="logintext-wrap p-4 p-lg-5 text-center d-flex align-items-center order-md-last">
                            <div class="text w-100">
                                <h1>Welcome to login</h1>
                                <p>Don't have an account?</p>
                                <a href="#" class="btn btn-white btn-outline-white">Sign up</a>
                            </div>
                        </div>
                        <div class="loginform p-4 p-lg-5">
                            <div class="d-flex">
                                <div class="w-100">
                                    <h3 class="mb-4">Sign in</h3>
                                </div>
                            </div>
                            <div class="d-flex signin-form">
                                <form class="w-100">
                                    <div class="mb-3">
                                        <label for="username" class="form-label text-uppercase fw-medium">Username</label>
                                        <input type="text" class="form-control userName" id="username"
                                            placeholder="Username" required aria-describedby="username">
                                    </div>
                                    <div class="mb-3">
                                        <label for="userpassword" class="form-label text-uppercase fw-medium">Password</label>
                                        <input type="password" class="form-control userPassword" placeholder="Password"
                                            required id="userpassword">
                                    </div>
                                    <button type="submit" class="btn btn-primary login-button mb-3 w-100">Login</button>
                                    <div class="d-flex justify-content-between">
                                        <div class="form-check ps-0">
                                            <input type="checkbox" class="remember-me" id="remember-me">
                                            <label class="form-check-label" for="remember-me">Remember me</label>
                                        </div>
                                        <div class="forgot-password">
                                            <a href="#">Forgot Password</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
        crossorigin="anonymous"></script>
</body>

</html>

CSS Syntax:

section {
  padding: 2em 0;
}
.container {
  max-width: 1140px;
}
h1 {
  font-size: 2rem;
}
.logintext-wrap {
  background: #596af7;
  background: -moz-linear-gradient(135deg, 596af7 0%, #5560f3 100%);
  background: -webkit-linear-gradient(45deg, #596af7 0%, #5560f3 100%);
  background: -o-linear-gradient(135deg, #596af7 0%, #5560f3 100%);
  background: -ms-linear-gradient(135deg, #596af7 0%, #5560f3 100%);
  background: -webkit-linear-gradient(135deg, #596af7 0%, #5560f3 100%);
  background: -o-linear-gradient(135deg, #596af7 0%, #5560f3 100%);
  background: linear-gradient(135deg, #596af7 0%, #5560f3 100%);
  color: #fff;
  width: 50%;
}
.logintext-wrap .text h2 {
  font-weight: 900;
  color: #fff;
}
.btn.btn-white.btn-outline-white {
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
}
.loginform {
  width: 50%;
}
.form-container {
  width: 100%;
  border-radius: 5px;
  -webkit-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
  box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
}
.signin-form input {
  border-radius: 50px;
  background-color: #eeeeee;
}
.signin-form input:focus{
  border: none;
  border: 1px solid #eeeeee;
  box-shadow: none;
}
.login-button {
  background-color: #596af7;
  border-radius: 50px;
  outline: none;
  border: none;
  padding: 10px 0px;
}
.login-button:hover,
.login-button:active {
  background-color: transparent !important;
  color: #596af7 !important;
  border: 1px solid #596af7 !important;
}
.forgot-password a {
  text-decoration: none;
  color: #989696;
}
input[type="checkbox"] {
  accent-color: #596af7;
}
header {
  background-color: #596af7;
}
header .logo {
  color: #ffffff;
  font-size: 24px;
}
header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
}
header ul {
  display: flex;
  gap: 25px;
  list-style: none;
}
header ul li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
}
.checkbtn {
  font-size: 30px;
  color: white;
  cursor: pointer;
  display: none;
}
#check {
  display: none;
}

@media only screen and (max-width: 792px) {
  .card-container .card {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .checkbtn {
    display: block;
    order: 1;
  }

  nav ul {
    position: fixed;
    top: 65px;
    right: -100%;
    background-color: #596af7;
    width: 50%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    z-index: 1001;
  }

  nav ul li {
    margin: 20px 0;
  }

  nav ul li a {
    font-size: 20px;
  }

  #check:checked ~ ul {
    right: 0;
    justify-content: flex-start;
  }
  .logintext-wrap,
  .loginform {
    width: 100%;
  }
}

Output: Desktop mode

Output: Ipad mode

Output: Mobile mode

Creating a well-designed login form is an essential step in building modern and user-friendly websites. In this tutorial, we explored how to design a clean and responsive login form using HTML and CSS, along with a visually appealing gradient background and properly styled input fields. A simple and intuitive login interface helps improve the overall user experience and makes your website look more professional.

By applying the techniques discussed in this guide, you can easily customize the login form to match your website’s design and branding. You can also extend this project by adding features such as form validation, password visibility toggle, social login options, or backend authentication.

Building small UI components like login forms is a great way to improve your front-end development skills and create reusable elements for future projects. Keep experimenting with different layouts, colors, and styles to design even more attractive and functional login pages.

Github Link:

Balasenthil / UI-Development

A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.

UI-Development

A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.

View on GitHub

Check out more web development articles by clicking the link below.

Dev with Bala

HTML5, CSS3, JavaScript basics for beginners tutorial with examples. Learn HTML5 structure, tags, attributes, forms, and lists with easy step-by-step explanations for web development beginners.

devwithbala.blogspot.com

Web development, Pricing table, HTML5, CSS3, Flexbox, Modern CSS, Beginner

bala senthil — Wed, 11 Mar 2026 14:25:19 +0000

Build a Modern Pricing Table with HTML and CSS Flexbox (Step-by-Step Guide)

bala senthil ・ Mar 11

#beginners #html #css #flexbox