DEV Community: ASHWINTH

Grid in Html

ASHWINTH — Tue, 21 Jul 2026 19:15:49 +0000

What Is CSS Grid?

CSS Grid is a two-dimensional layout system that allows developers to arrange elements into rows and columns. Unlike Flexbox, which is primarily designed for one-dimensional layouts Grid can manage both dimensions simultaneously.

why we use grid?
CSS Grid is a powerful layout system that makes it easy to create modern, responsive web page designs. It allows developers to arrange elements in both rows and columns, making complex layouts simpler to build and manage. Compared to older layout techniques, CSS Grid requires less code, provides better control over element placement, and adapts easily to different screen sizes. Because of its flexibility, clean structure, and wide browser support, CSS Grid has become an essential tool for building responsive and professional websites.

<div class="container">
    <div class="box">Item 1</div>
    <div class="box">Item 2</div>
    <div class="box">Item 3</div>
    <div class="box">Item 4</div>
    <div class="box">Item 5</div>
    <div class="box">Item 6</div>
</div>
CSS
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.box {
    background: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

For example output

| 1 | 2 | 3 |

| 4 | 5 | 6 |

Conclusion

CSS Grid has transformed the way developers build web layouts. Its powerful two-dimensional capabilities make creating responsive, organized, and visually appealing designs much simpler than older methods. By mastering Grid, you'll be able to create everything from simple portfolios to sophisticated dashboards with clean, maintainable code.

Html Table

ASHWINTH — Sun, 19 Jul 2026 08:41:09 +0000

what is html table?
HTML tables are one of the most useful elements in web development. They allow developers to display information in rows and columns, making data easy to read and understand. Whether you're creating a student report, employee database, product list, or timetable, HTML tables are the ideal choice for presenting structured information.

html table tags?


<table>
<thead>
<tbody>
<tr>
<td>
<th>
<tfoot>
<caption>

Features of html table?

Organize data into rows and columns.
Display headers using the tag.
Merge cells with rowspan and colspan.
Style tables easily using CSS.
Improve accessibility by using semantic table elements.

Conculutions?

HTML tables are an essential part of web development when you need to display structured information. By learning the basic table elements such as and and you can create a clear organization and presentation.

Html Form

ASHWINTH — Sun, 19 Jul 2026 07:19:38 +0000

What is html forms?
An HTML forms are elements used to collect input from users on a webpage . Forms are created using the

element, which acts as a container for various input fields such as text boxes, radio buttons, checkboxes, dropdown menus, and submit buttons.

. Text Input

Used to collect short text such as names or usernames.


<input type="text" name="username">

Password Input

Masks the entered text for security.

<input type="password" name="password">

Email Input

Ensures the entered value follows a valid email format.

Number Input cccepts only numeric values.


<input type="number" name="age">

Radio Buttons

Allows users to select only one option from a group.Allows users to select multiple options.


<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Checkboxes

HTML
CSS

Dropdown List

<select name="country">
    <option>India</option>
    <option>USA</option>
    <option>Canada</option>
</select>

Textarea

Used for longer text input, such as comments or feedback.

Submit Button

Sends the form data to the server.

Html Form

ASHWINTH — Thu, 16 Jul 2026 17:18:45 +0000

What is html forms?
An HTML forms are elements used to collect input from users on a webpage . Forms are created using the

element, which acts as a container for various input fields such as text boxes, radio buttons, checkboxes, dropdown menus, and submit buttons.

Text Input

Used to collect short text such as names or usernames.

Password Input

Masks the entered text for security.

<input type="password" name="password">

Email Input

Ensures the entered value follows a valid email format.

Number Input cccepts only numeric values.


<input type="number" name="age">

Radio Buttons

Allows users to select only one option from a group.Allows users to select multiple options.


<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Checkboxes

Its select one or multiple values to the input fiels


<input type="checkbox" name="Language" value="english"> english
<input type="checkbox" name="language" value="tamil"> tamil

Dropdown List

create a list of options to the input fields.

<select name="country">
    <option>India</option>
    <option>USA</option>
    <option>Canada</option>
</select>

Textarea

Used for longer text input, such as comments or feedback.

<textarea name="message"></textarea>

Submit Button

Sends the form data to the server.


<input type="submit" value="Send">

Get and Post methods

Get
Its send dats though the Url and Data is visible in the browser address bar.

http://127.0.0.1:5500/user?name=aswinth&email=aswinth%40gmail.com&phone=9865896589&address=chennai&gender=male&course=course1

Post

Sends data in the request body and More secure than GET Suitable for login forms, registrations, and sensitive information.

Conculution

They enable websites to collect information, process requests, and provide personalized experiences. By mastering form elements, validation techniques, and accessibility best practices, developers can create forms that are both user-friendly and reliable. As

Html :)

ASHWINTH — Wed, 15 Jul 2026 06:23:11 +0000

What is html?

html(hyper text markup language) it is a standard language its used to create a structure of web page content.

What is Html Tags?
HTML tags are special keywords enclosed within angle brackets(<>).They tell the browser how to display content. there is lots of tag in html.

example:
     <h1>welcome</h1>

what is Html attributes?
while html tage define the sturcture of web pages the attribues are add more information to the tag elements.

Why attributes are important?

Create hyperlinks
Display images
Add styles
Identify elements
Improve accessibility
Build forms
Add metadata

Types of Html attributes

href
target
src
alt
width
height
type
placeholder
required
action
method
id
class
style
title
hidden
lang
dir

Common Html Attributes?

id Attribute

The id attribute uniquely identifies an HTML element.Each id value should be unique within a webpage.

<div id="header">
    Welcome!
</div>

class Attribute

The class attribute groups elements together. It is mainly used with CSS and JavaScript.Multiple elements can share the same class

<p class="highlight">
    This is important.
</p>

3.** href Attribute**

The href attribute specifies the destination of a hyperlink.Without href, the link won't navigate anywhere.

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

4.** src Attribute**

The src attribute specifies the location of an image, video, audio, or other external resource.


<img src="nature.jpg" alt="Nature">

alt Attribute

The alt attribute provides alternative text if an image cannot be displayed. It also improves accessibility for screen readers.Always provide meaningful alt text.

<img src="cat.jpg" alt="A cute orange cat">

style Attribute

The style attribute allows you to apply inline CSS directly to an element.For larger projects, prefer external CSS over inline styles.

<p style="color: blue; font-size: 20px;">
    Hello Friends!
</p>

target Attribute

The target attribute specifies where a linked document should open.

Open Website

Common values:
_self
_blank
_parent
_top

placeholder Attribute

Displays hint text inside input fields.

<input
    type="text"
    placeholder="Enter your name">

required Attribute

Makes an input field mandatory.Users must enter a value before submitting the form.

<input
    type="email"
    required>

disabled Attribute

Disables an element.Disabled elements cannot be interacted with.

<button disabled>
    Submit
</button>

value Attribute

Specifies the initial value of an input element.


<input
    type="text"
    value="John">

width and height Attributes

Set the dimensions of images.

<img
    src="mountain.jpg"
    width="400"
    height="250"
    alt="Mountain">

maxlength Attribute

Limits the number of characters a user can type.


<input
    type="text"
    maxlength="20">

readonly Attribute

Makes an input field read-only.Users can see the value but cannot edit it.


<input
    type="text"
    value="Admin"
    readonly>

*Combining multiple Attributes *

An one elements have multiple attributes. this is very common in real world projects.

<input type="text" id="username" class="form-control" placeholder=" Enter your username" required>

Conculution
As you continue learning HTML, practice using different attributes together in small projects. The more you experiment, the more comfortable you'll become with writing clean and effective HTML.

Happy Coding!

flex box and flex directions

ASHWINTH — Thu, 09 Jul 2026 08:38:21 +0000

*flex directions.
The flex-direction property in CSS determines the direction in which flex items are placed inside a flex container.

flex wrap.
flex-wrap is a CSS property that controls whether flex items stay on a single line or wrap onto multiple lines when there isn't enough space.

justify content
justify-content is a CSS Flexbox property that controls how flex items are aligned along the main axis (the direction set by flex-direction).

For the default flex-direction: row, the main axis is horizontal, so justify-content controls the horizontal spacing of items.

main axis and cross axis

if the main axiss is row the cross axis is column and main axis is column the cross axis is row.
when the flex direction is row the main axis is row when you move the main axis elements use justify content-center.
when you move the cross axis use the align items center.

Hello Guys :)

ASHWINTH — Tue, 07 Jul 2026 07:18:50 +0000

this is my first blog and today we are discuss about block elements and inline elements how works margin and padding spaces.and creating footer to my instagram login page.