DEV Community: ABISHEK M

Bootstrap

ABISHEK M — Mon, 03 Aug 2026 17:27:49 +0000

The Most Popular CSS Framework for Responsive Web Development

Building a website using only HTML and CSS can take a lot of time. Developers need to write CSS for buttons, forms, navigation bars, layouts, and many other elements. They also need to write media queries to make the website responsive on different screen sizes.

Bootstrap helps solve these problems.

Bootstrap is a free and open-source CSS framework that makes web development faster and easier. It provides ready-made CSS classes and JavaScript components that can be used to create responsive and attractive websites. Instead of writing large amounts of CSS, developers can simply use Bootstrap classes to style HTML elements.

To use Bootstrap, the Bootstrap CSS file must first be added to the HTML document using the Bootstrap CDN.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

When the browser loads the webpage, it also loads the Bootstrap CSS file. This file contains predefined styles for buttons, forms, cards, navigation bars, layouts, and many other components. When an HTML element contains a Bootstrap class, the browser automatically applies the corresponding styles from the Bootstrap CSS file.

Button Example

Let's compare creating a button with and without Bootstrap.

Without Bootstrap

First, create the button using HTML.

<button>Login</button>

Then write CSS to style the button.

button{
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

Here, we need to write CSS to set the background color, text color, padding, border, and border radius.

With Bootstrap

After adding the Bootstrap CDN, the same button can be created with just one line of code.

<button class="btn btn-primary">Login</button>

Here:

btn gives the button its basic Bootstrap styling.
btn-primary applies Bootstrap's primary blue color.

No separate CSS is required because Bootstrap already contains all the necessary styles. This makes development faster and keeps the code clean.

Another important feature of Bootstrap is its responsive grid system, which automatically adjusts layouts for different screen sizes such as mobile phones, tablets, laptops, and desktops. Bootstrap also includes many reusable components like navigation bars, cards, forms, tables, alerts, and modals.

Overall, Bootstrap is a powerful front-end framework that simplifies web development. It saves time, reduces CSS coding, and helps developers build modern, responsive, and professional-looking websites more efficiently.

TossConf

ABISHEK M — Thu, 30 Jul 2026 14:17:20 +0000

My TossConf 2026 Experience

TossConf 2026,it is a tamil free open source software conference,scheduled for 3 days. It was held on 3 days from 23/07/2026 at st.Joseph's Institute of Technology, chennai.

Day 1: Hackathon

On day 1, there was a hackathon. Teams picked a problem from 20 problems and built a solution for it.

I liked two projects:

One team built a tool for a Tamil newspaper called Theekkathir. This tool finds and fixes spelling and spacing mistakes in the newspaper text.

Another team built a mobile app. This app watches your phone activity while you read a book or document. If you start using social media instead, the app stops you and brings your focus back.

Day 2: Workshops

On day 2, there were workshops. I attended two of them.

Frappe Framework — Frappe is a full-stack, low-code Python/JS framework, mainly used to build business applications. This session explained how Frappe is built internally, and how anyone can contribute to its open-source codebase.

The Art of Crafting Software — This session was not about any specific tool or framework. It was about how to write clean, maintainable, and well-designed code. It also covered how employees and organizations should behave. The main idea was simple: always ask yourself "what, why, who, how" before doing any task. People often skip these questions because they seem too basic, but they are actually the reason behind most failures.

Day 3: Talks and Stalls

On day 3, there were two parallel tracks of 45-minute technical talks, along with FOSS project stalls/booths that people could walk around and visit.

I explored two projects:

LibreOffice — This is a free software, like MS Office. You can use it to create documents, spreadsheets, and presentations. It works on all types of computers.

OpenStreetMap — This is a free map, like Google Maps. But anyone in the world can add or edit information on this map.

What I Learned

TossConf 2026 was a good experience for me. I learned new tools. I met people who build real projects. I want to attend more events like this.

HTML Tables

ABISHEK M — Wed, 22 Jul 2026 05:39:49 +0000

How to Create Tables in HTML

HTML tables are used to display data in rows and columns. They make information easy to read and understand by organizing it into a structured format. Tables are commonly used to display student details, employee records, product lists, marks, timetables, and many other types of data.

For example, instead of writing student information like this:

Name: Abishek
Age: 22
City: Chennai

Name: Abi
Age: 21
City: Madurai

the same information can be displayed in a table:

Name	Age	City
Abishek	22	Chennai
Abi	21	Madurai

This format is easier to read because the related information is organized into rows and columns.

HTML provides several tags to create a structured table, and each tag has a specific purpose.

The <table> tag is the main container that creates the table and holds all other table elements.
The <caption> tag adds a title to the table, helping users understand what the table is about.
The <thead> tag groups the header section of the table.
Inside the <thead>, the <tr> tag creates a table row.
The <th> tag creates the header cells that define the headings for each column.
The <tbody> tag contains the main content of the table.
Inside the <tbody>, the <tr> tag is used again to create each data row.
The <td> tag creates the data cells that store the actual information in each row.
The <tfoot> tag groups the footer section of the table and is commonly used to display totals, summaries, or remarks.
The <colgroup> tag groups one or more columns together for applying common formatting.
The <col> tag defines properties for individual columns, such as width, visibility, or background color.

Using the correct table tags makes the HTML code more organized, easier to read, and easier to maintain. It also improves accessibility by helping browsers and screen readers understand the structure of the table.

Understanding HTML Forms

ABISHEK M — Fri, 17 Jul 2026 03:18:34 +0000

HTML Forms and the `<form>` Tag

HTML forms are used to collect information from users through a webpage. They are commonly found in login pages, registration forms, contact forms, search bars, and online shopping websites. The <form> tag acts as the main container that groups different form elements together. When a user submits the form, the browser collects the entered data and prepares it to be sent to a server.

<form>
    <label for="name">Full Name</label>
    <input type="text" id="name" name="fullname">

    <button type="submit">Submit</button>
</form>

Understanding the `action` and `method` Attributes

The action attribute specifies where the form data should be sent after submission. This destination is usually called an endpoint. The method attribute defines how the data is sent. The GET method sends data through the URL, while the POST method sends data inside the request body, making it suitable for sensitive information.

<form action="/submit" method="post">
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

Understanding Common Form Attributes

The <form> tag supports several attributes that control its behavior. Attributes such as autocomplete, target, enctype, novalidate, and accept-charset improve the user experience and define how the browser handles form data before and after submission.

<form
    action="/submit"
    method="post"
    autocomplete="on"
    target="_self">
</form>

How an HTML Form Works

When a user enters information and clicks the Submit button, the browser collects all form data and sends it to the location specified by the action attribute using the HTTP method defined in method. The server processes the request and returns a response to the browser.

<form action="/login" method="post">
    <input type="email" name="email">
    <input type="password" name="password">

    <button type="submit">Login</button>
</form>

Why HTML Forms Are Important

HTML forms make websites interactive by allowing users to submit information. They are essential for building features such as login systems, registration pages, contact forms, search bars, booking systems, and payment pages. Understanding the <form> tag and its attributes is a fundamental step in learning web development.

HTML Attributes

ABISHEK M — Wed, 15 Jul 2026 17:59:08 +0000

What are HTML Attributes?

HTML attributes provide additional information about an HTML element. They help the browser understand how an element should behave, what extra information it contains, or how it should be displayed on a webpage. Attributes are always written inside the opening tag of an HTML element and usually follow the format attribute="value".

Syntax

<tagname attribute="value">Content</tagname>

For example:

<a href="https://www.google.com">Google</a>

In this example, <a> is the HTML element, and href is the attribute. The href attribute tells the browser which webpage should open when the link is clicked.

Why Are Attributes Used?

HTML tags create the basic structure of a webpage, but many elements need additional information to perform their intended task. Attributes provide these extra details and make HTML elements more useful. They help define how an element behaves, what content it should display, and how users can interact with it.

For example:

<img src="flower.jpg" alt="Flower">

The src attribute specifies the image file that should be displayed, while the alt attribute provides alternative text if the image cannot be loaded. Without these attributes, the browser would not know which image to display or what text to show when the image is unavailable.

Multiple Attributes

An HTML element can contain more than one attribute. Each attribute performs a different task, but together they provide complete information about the element.

<img src="flower.jpg" alt="Flower" width="300" height="200">

In this example, src specifies the image file, alt provides alternative text, width defines the image width, and height defines the image height. All these attributes work together to control how the image appears on the webpage.

Common HTML Attributes

Some attributes can be used with many HTML elements, while others are designed for specific elements. Below are some of the most commonly used HTML attributes:

href – Specifies the destination of a hyperlink.
src – Specifies the location of an image, video, audio, or other file.
alt – Provides alternative text for an image.
id – Assigns a unique identifier to an HTML element.
class – Groups multiple elements together for CSS styling or JavaScript.
style – Applies CSS directly to an HTML element.
title – Displays additional information as a tooltip when the mouse pointer is placed over an element.
placeholder – Displays a hint inside an input field before the user enters data.
required – Makes a form field mandatory before submission.
disabled – Disables an element so it cannot be used or interacted with.
checked – Selects a checkbox or radio button by default.

These attributes are widely used when building web pages because they improve the functionality, appearance, and usability of HTML elements.

HTML

ABISHEK M — Wed, 15 Jul 2026 17:06:42 +0000

My First Day Learning HTML

HTML is the first step in web development. It stands for "HyperText Markup Language" and is used to create the structure of a webpage. Every website on the internet starts with HTML, while CSS is used to improve the design and JavaScript is used to add interactivity.

Every HTML document follows a basic structure. It starts with <!DOCTYPE html>, followed by the <html>, <head>, and <body> tags. These tags help the browser understand how to display the webpage correctly.

The <!DOCTYPE html> declaration tells the browser that the document is written in HTML5.

The <html> tag is the root element of the webpage. All the content of the webpage is written inside this tag.

The <head> tag contains information about the webpage, such as the page title, meta information, CSS files, and JavaScript files. The content inside the <head> tag is not displayed on the webpage, but it helps the browser process the page correctly.

The <body> tag contains everything that appears on the webpage. Elements such as headings, paragraphs, images, buttons, links, and forms are placed inside the <body> tag. Whatever is written inside this section is displayed to the user in the browser.

Learning the basic structure of HTML is an important first step because every webpage is built using these fundamental tags. Once these basics are clear, it becomes much easier to create and understand web pages.