DEV Community: Parthipan M

DOM in Java Script

Parthipan M — Thu, 03 Sep 2026 11:24:51 +0000

Document Object Model

The Document Object Model (DOM) is a programming interface provided by web browsers that represents an HTML or XML document as a tree of objects, allowing JavaScript to dynamically access, modify, and interact with the page's content, structure, and style.

Example:

<html>
  <body>
    <h1>Hello Parthipan</h1>
  </body>
</html>

The DOM Tree Structure:

The Document: The root or "owner" of the entire tree. In JavaScript, you access this via the global document object.
Elements: The HTML tags themselves (like <body>, <div>, <h1>, or <button>).
Attributes: Properties inside those tags (like href, src, or class).
Text: The actual text written inside your tags (e.g., "Click Me").

Accessing HTML Elements:

The HTML DOM can be used to access HTML elements.

The most common way to access an HTML element is to use the id of the element:

Example:

<html>
<body>
    <h1 id="head">DOM</h1>
    <div class="para">parthipan</div>
    <div class="para">Tony</div>
    <div class="para">antony</div>
    <div class="para">antony</div>
    <button onclick="changeContent()">changeContent</button>
    <script>
    // const changeContent = () => {
    //     document.getElementById("head").textContent = "Hello parthipan"
    //     document.getElementById("head").textContent = "Hello tony"
    //     document.getElementById("head").textContent = "Hello antony"
    //     document.getElementById("head").textContent = "Hello jaisuriya"
    // };
    // console.log(document.getElementById("head").textContent);
const divs = document.getElementsByClassName("para")
for (let i=0; i<divs.length; i++){
    divs[i].style ="color:red";
}

    </script>

</body>
</html>

In the example above, thegetElementById method used id="head" to find the element.

id="head" is an HTML property
getElementById() is a DOM Method
innerHTML is a DOM Property

Array in Javascript...

Parthipan M — Thu, 03 Sep 2026 10:27:06 +0000

An array in JavaScript is a special variable that can hold multiple values in a single variable, instead of storing just one value like a normal variable does.

Basic Example:

let Phones = ["Vivo", "Oppo", "Samsung"];

console.log(fruits[0]); // Vivo
console.log(fruits[1]); // Oppo
console.log(fruits[2]); // Samsung

Key Points:

Index starts at 0 - First item is array[0], not array[1]
Can hold any data type - Numbers, strings, booleans, objects, even other arrays
.length - Gives the total number of items
Dynamic size - You can add/remove items anytime

Mixed Array:

A mixed array is just an array that stores different data types together in a single array, instead of only numbers or only strings.

Example:

let mixedArray = ["Messi", 22, true, ["Tamil", "English"], { city: "Chennai" }];

Responsive Design

Parthipan M — Thu, 06 Aug 2026 07:54:51 +0000

Responsive in HTML

Responsive in HTML refers to Responsive Web Design (RWD), an approach where a single website dynamically alters its layout, images, and content to look good and function properly across all device sizes.

1. The Viewport Meta Tag

This is the most critical HTML component. Without it, mobile browsers will render the page at a desktop width and zoom out, making the text unreadably small. You must include this tag inside the section of your HTML document:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width: Sets the page width to follow the screen-width of the device.
initial-scale=1.0: Sets the initial zoom level when the page is first loaded by the browser

2. Responsive Layouts with CSS

While HTML structures the content, CSS controls the responsive layout using flexible structures.

Relative Units: Avoid fixed pixel (px) values for widths. Instead, use relative units like percentages (%), vw (viewport width), or vh (viewport height) so elements scale proportionally.
Flexbox and CSS Grid: These modern layout modules make it easy to create fluid grids that rearrange automatically. For example, elements aligned horizontally on a desktop can stack vertically on a smartphone screen.

3. CSS Media Queries

Media queries allow you to apply specific CSS rules only when certain conditions are met, such as maximum or minimum screen widths.

 /* Default styles for mobile devices */
body {
  background-color: lightblue;
}

/* Styles applied only when the screen width is 768px or wider (Tablets/Desktops) */
@media (min-width: 768px) {
  body {
    background-color: lightgreen;
  }
}

4. Responsive Images

Images should never overflow their containers or use fixed dimensions. You can make images responsive in two ways:

The CSS Rule: Applying max-width: 100%; and height: auto; ensures the image shrinks if the container gets smaller than the image's original size.
The HTML Element: For advanced optimization, you can use the to serve completely different image files tailored to specific screen resolutions.

PICTURE IN HTML

Parthipan M — Mon, 03 Aug 2026 18:33:18 +0000

picture tag in html

The HTML <picture> tag is a media wrapper element that allows developers to provide multiple image sources for different display scenarios, such as varying screen sizes, pixel densities, or image formats.

The browser will parse the child <source> elements and select the closest matching resource based on media queries or type attributes, falling back to the standard <img>tag if no matches are found or if the browser doesn't support the element.
Example:

<picture>
  <source media="(min-width: 1024px)" srcset="large-hero.webp" type="image/webp">
  <source media="(min-width: 768px)" srcset="medium-hero.jpg">
  <img src="small-fallback.jpg" alt="A descriptive fallback image" loading="lazy">
</picture>

Core Components

Core Components: The outer wrapper that acts as a decision engine for the browser.
: Contains the alternative image assets. You can use multiple source tags, and the browser will read them from top to bottom, picking the first one that evaluates to true.
media: Accepts media queries (e.g., max-width, orientation) to swap images based on device screen size.
srcset: Defines the path to the image file (or files, if using pixel density descriptors like 2x).
type: Defines the MIME type (e.g., image/webp, image/avif), allowing you to serve modern, highly compressed formats while providing fallback formats for older browsers.
<img>: Strictly required as the final child element. The <picture> tag itself does not display anything; it merely feeds a source URL to this inner <img>tag. It also ensures backwards compatibility for older browsers and holds vital attributes like alt and loading.

Bootstrap

Parthipan M — Sun, 02 Aug 2026 04:57:47 +0000

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

To include Bootstrap in an HTML file, you typically use a Content Delivery Network (CDN) link in the <head> for CSS and a <script> tag before the closing </body> for JavaScript.
For Bootstrap 5 (the current standard), the framework uses vanilla JavaScript and no longer requires jQuery. Include the following in your index.html:

CDN links

As reference, here are our primary CDN links.

CSS

https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js

How to use bootstrap grid system ?

The Bootstrap grid system is a mobile-first, flexbox-based layout structure that divides the page width into 12 columns. To use it effectively, you must follow a specific hierarchy: Containers → Rows → Columns.

Example:

<div class="container">
  <div class="row">
    <div class="col-8">Wide Column (8/12)</div>
    <div class="col-4">Narrow Column (4/12)</div>
  </div>
</div>

Responsive Breakpoints:

Bootstrap uses six responsive breakpoints to adapt layouts to different screen sizes. Column classes follow the format .col-{breakpoint}-{number}. Because Bootstrap is mobile-first, a class like .col-md-6 applies to medium screens and all larger screens (lg, xl, xxl), while the element remains full-width on smaller screens unless specified otherwise.

Key Features:

Auto-layout: Using just .col without a number allows columns to automatically divide the available space equally.
Gutters: Space between columns is handled by gutters (padding on columns and negative margins on rows). You can customize these using classes like .g-3 (standard gap), .gx-4
(horizontal only), or .g-0 (no gap).
Row Columns: Instead of defining width on every column, you can set the number of columns on the parent row using .row-cols-1, .row-cols-md-3, etc., to automatically force child columns into that layout.

FORM IN HTM

Parthipan M — Sun, 02 Aug 2026 03:53:55 +0000

what is a form ?

A from is an HTML elements used to collect data from the user like login,registration,feedback,etc.

<form> – the container tag that wraps all form elements
<input> – for text, password, email, checkbox, radio, file, submit, etc.
<lable> _ describes/name an input field
<textarea> _ for multi-line text input
<select> _ creates a dropdown list
<option> – defines each item inside a <select>
<optgroup> – groups related s together
<button>– clickable button (submit, reset, or custom)
<fieldset>– groups related form elements together visually
<legend> – gives a caption/title to a

What this includes:

Text, email, and phone input fields
A dropdown (select) menu
A multi-line text area
Basic CSS styling (rounded corners, shadow, button hover effect)

Key Components and Attributes:

Structure: Forms rely on the <form> tag to wrap input elements like <input>,<textarea>, and <button>.
Action: The action attribute specifies the URL or server-side script where the submitted data is sent.
Method: The method attribute defines how data is transmitted, typically using GET (data in URL) or POST (data in request body) HTTP methods.
Purpose: Common uses include user registration, login, search queries, and feedback submissions, enabling dynamic interaction between the user and the website.

ATTRIBUTES IN HTML

Parthipan M — Sun, 19 Jul 2026 07:35:20 +0000

HTML Attributes:

HTML attributes are special modifier words placed inside an element's opening tag to provide additional information, configuration, or behavioral changes to that element. They essentially customize how a standard HTML element looks, functions, or interacts with the user.

The Structure of an Attribute

Attributes almost always arrive in name/value pairs and follow a strict structural syntax

Attribute Name: Specifies the property you want to set (e.g., href, src, class).
Attribute Value: Specifies the actual setting or instruction, which must be enclosed in quotation marks.

example:

<a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a>

Common attributes

** Global vs Element-Specific Attributes**

Global attributes work on any HTML element:

Tag and Key Attributes

1.<a>- href, target, rel

<img>- src, alt, width, height
<input>- type, name, placeholder, required
<button>- type, disabled, onclick
<div>- id, class, style
<form>- action, method
<table>- border, cellpadding
<link>- rel, href, type
<script>- src, defer, async

TABLE.HTML

Parthipan M — Sat, 18 Jul 2026 13:12:03 +0000

Table tags in HTML

Table in HTML is a grid used to display data in rows and columns — like a spreadsheet.

How it works

<table> is the container for everything.
Inside it, each <tr> creates one row.
Inside each row,<td>creates a data cell, and <th>creates a header cell.
The browser lines up cells into columns automatically based on their position in each row.

HTML structure

<table>— wraps the whole table
<tr> — table row
<th>— header cell (bold, centered by default)
<td> — data cell

Grouping (optional but recommended)

<thead> — groups header row(s)
<tbody> — groups body rows
<tfoot> — groups footer row(s)

Other useful ones

<caption> — table title/description
<colgroup>/ <col> — apply styles to whole columns

Cell spanning

colspan="3" — cell spans n columns
rowspan="4" — cell spans n rows

FORM IN HTML

Parthipan M — Fri, 17 Jul 2026 12:46:55 +0000

what is a from ?

A from is an HTML elements used to collect data from the user like login,registration,feedback,etc.

<form> – the container tag that wraps all form elements
<input>– for text, password, email, checkbox, radio, file, submit, etc.
<lable> _ describes/name an input field
<textarea> _ for multi-line text input
<select> _ creates a dropdown list
<option> _ defines each item inside a select
<optgroup> – groups related s together
<button>– clickable button (submit, reset, or custom)
<fieldset> – groups related form elements together visually
<legend>– gives a caption/title to a

## Common form of elements

lable tag: The for attribute must match the id of the input field. eg:

<lable for="username">Username:</lable>

Input tag: Standard single-line text box

eg:

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

textarea: Used for multiple lines of text input

eg:

<textarea name="message" rows="4" cols="30"></textarea>

Select(Dropdown):

<select name="city">
  <option value="chennai">Chennai</option>
  <option value="mumbai">Mumbai</option>
</select>

Button:

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

GET vs POST

GET

Data is sent visibly in the URL
Used for search, filters, or non-sensitive visible data
Limited amount of data can be sent

POST

Data is sent hidden (in the request body)
Used for sensitive data like login, registration
Can send larger amounts of data

FORM IN HTML

Parthipan M — Fri, 17 Jul 2026 05:50:26 +0000

what is an HTML elements used to collect data from the user (like login,registration,feedfack,etc..,)

Commonly used HTML Form tag:

– the container tag that wraps all form elements.

– for text, password, email, checkbox, radio, file, submit, etc.
– describes/names an input field.
– for multi-line text input .<br> 5.<select> – creates a dropdown list. <br> 6.<option> – defines each item inside a <select><br> 7.<button> – clickable button (submit, reset, or custom)<br> 8.<fieldset> – groups related form elements together visually<br> 9.<legend> – gives a caption/title to a <fieldset></p>

<p>Common form elements:</p>

<p><em>Lable tag:</em><br>
the for attribute must match the id of the input field. <br>
ex: <br>
<label for="student name">name</label></p>

<p>Input tag:<br>
</p>
<div class="highlight"><pre class="highlight html"><code><span class="nt"><input</span> <span class="na">id=</span><span class="s">"student name"</span><span class="na">placeholder=</span><span class="s">"enter your name"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="nt">/></span>

</code></pre></div>
<p></p>
<div class="highlight"><pre class="highlight plaintext"><code> Textarea:
used for multiple lines of text input.
ex:
<textarea type="feedback" id="feedback"></textarea>
</code></pre></div>
<p>GET vs POST:</p>

<ul>
<li>Data is sent visibly in the URL Used for search, filters, or non-sensitive visible data</li>
<li>Limited amount of data can be sent</li>
</ul>
<h2>
<a name="post" href="#post" class="anchor">
</a>
POST
</h2>

<p>Data is sent hidden (in the request body)<br>
Used for sensitive data like login, registration<br>
Can send larger amounts of data</p>

FORM IN HTML

Parthipan M — Fri, 17 Jul 2026 04:23:00 +0000

 What is an HTML element used to collect data from the user like login,registration,feedback,etc.

 Commonly used HTML Form tag:

– the container tag that wraps all form elements
– for text, password, email, checkbox, radio, file, submit, etc.
– describes/names an input field
– for multi-line text input</p></li> <li><p><select> – creates a dropdown list</p></li> <li><p><option> – defines each item inside a <select></p></li> <li><p><button> – clickable button (submit, reset, or custom)</p></li> <li><p><fieldset> – groups related form elements together visually</p></li> <li><p><legend> – gives a caption/title to a <fieldset></p></li> </ol> <p># Common form elements:</p> <p>Lable tag:<br> the for attribute must match the id of the input field. </p> <p><label for="student name">name</label></p> <div class="highlight"><pre class="highlight plaintext"><code> Input tag: <input id="student name"placeholder="enter your name" type="text" /> Textarea: used for multiple lines of text input. <textarea type="feedback" id="feedback"></textarea> GET vs POST: GET </code></pre></div> <ul> <li>Data is sent visibly in the URL</li> <li>Used for search, filters, or non-sensitive visible data</li> <li>Limited amount of data can be sent</li> </ul> <p>POST</p> <ul> <li>Data is sent hidden (in the request body)</li> <li>Used for sensitive data like login, registration</li> <li>Can send larger amounts of data</li> </ul>

Git download

Parthipan M — Fri, 10 Jul 2026 05:24:13 +0000

Hello guys!
Yesterday I learnt to gitlab download.I was taught how to use it.