DEV Community: Vairavan

HTML

Vairavan — Mon, 01 Jun 2026 15:38:43 +0000

HTML (HyperText Markup Language) is the standard language used to create web pages. Every website starts with HTML. It helps structure the content of a webpage such as headings, paragraphs, images, links, and more.

What is HTML?

HTML is not a programming language. It is a markup language used to organize and display content on a webpage.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to HTML.</p>
</body>
</html>

HTML Document Structure

Every HTML page has a basic structure:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    Content goes here
</body>
</html>

Explanation

<!DOCTYPE html> → Tells the browser this is an HTML5 document.
→ Root element of the webpage.

→ Contains page information.
→ Title shown in browser tab.<br> → Visible content of the webpage.

Headings

HTML provides six heading tags.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>

h1 is the largest heading and h6 is the smallest.

Paragraph

Paragraphs are created using the p tag.

<p>This is a paragraph.</p>

Links

Links are created using the a tag.

<a href="https://example.com">Visit Website</a>

The href attribute contains the destination URL.

Images

Images are added using the img tag.

<img src="image.jpg" alt="Sample Image">

src → Image path.
alt → Alternative text if image fails to load.

Lists

Ordered List

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Unordered List

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Buttons

<button>Click Me</button>

Buttons allow users to interact with the webpage.

Buttons can perform different actions.

<button type="button">Click Me</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>

button → General button
submit → Sends form data
reset → Clears form fields

Forms

Forms are used to collect user information.

<form>
    <input type="text" placeholder="Enter Name">

</form>

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

Input Elements

Input elements allow users to enter data.

<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="date">

Common Types:

text
email
password
number
date
checkbox
radio

Div Tag

The div tag is a block-level container used to group HTML elements together. It helps organize the webpage structure.

<div>
    <h1>Welcome</h1>
    <p>This is a div container.</p>
</div>

Span Tag

The span tag is an inline container used to style or group small parts of text.

<p>Hello <span>World</span></p>

Semantic Tags

Semantic tags describe the meaning of the content.

Semantic Tags

header
nav
section
article
footer

<header></header>
<nav></nav>
<section></section>
<article></article>
<footer></footer>

Header Tag

The header tag represents the top section of a webpage.

<h1>My Website</h1>
</header>

Footer Tag

The footer tag represents the bottom section of a webpage.

<footer>
    <p>Copyright 2026</p>
</footer>

Navigation Bar

The tag contains navigation links.

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
</nav>

Section Tag

The section tag groups related content.

<section>
    <h2>About Us</h2>
    <p>Information about the company.</p>
</section>

Benefits:

This structure makes websites easier to understand
Better readability
Better SEO
Better accessibility

Tables

Tables are used to display data in rows and columns.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Surya</td>
        <td>22</td>
    </tr>
</table>

Important table tags:

Tag - Purpose

table-Creates a table
tr-Table row
th-Table heading
td-Table data
thead-Table header
tbody-Table body
tfoot-Table footer

Common Attributes:

id
class
href
src
alt
title
style

ID Attribute

The id attribute uniquely identifies an element.

<h1 id="title">Hello</h1>

Rules:

Must be unique.
One element should have one unique ID.

Class Attribute

The class attribute groups multiple elements.

<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>

Multiple elements can share the same class.

JavaScript

Vairavan — Fri, 29 May 2026 13:00:02 +0000

JavaScript is one of the most popular programming languages in web development. It is mainly used to make websites interactive and dynamic. With JavaScript, we can create things like buttons, animations, calculators, login forms, games, and much more.

Variables

Variables used to store data in JavaScript.

JavaScript has 3 ways to create variables:

var
let
const

var

var has global scope and it is the old way of declaring variables.

var a = 10;
console.log(a);
output:
10

let

let has block scope. It can only be accessed inside { }.

Example:

let a = 10;

{
  let a = 20;
  console.log(a); // 20
}

console.log(a); // 10

OutPut :
10

const

const is used for constant values. Its value cannot be reassigned.

const c = 30;
console.log(c);

OutPut:
30                 ✅

const weekdays = 7;

weekdays = 10;     ❌ Error

OutPut:

TypeError: Assignment to constant variable

But if the value is an array or object, we can change values inside it.👍

Data Types

JavaScript has different data types.

1.Primitive Data Types

These store single values.

Number
String
Boolean
Null
Undefined

Example:

let age = 20;
let name = "Surya";
let Student = true;
let salary =null;
let a

2.Non-Primitive Data Types

These can store multiple values.

Array
Object

Operators

Operators are symbols that help us perform calculations, comparisons, and logical operations in JavaScript.

1. Arithmetic Operators

Operator Meaning

{ + } Add
{ - } Subtract
{ * } Multiply
{ / } Divide
{ % } Remainder

Example:

let a = 10;
let b = 5;

console.log(a + b);
output:
15
console.log(a - b);
output:
5

2.Comparison Operators

*comparison of Two values *

Operator Meaning

{ == } Equal
{ === } Strict Equal
{ != } Not Equal
{ > } Greater Than
{ < } Less Than

Example:

let a = 10;
let b = 5;

console.log(a > b);

Output:
true

3.Logical Operators

Logical operators are used to combine two or more conditions.

Operator Meaning

{ && } AND → both conditions must be true
{ || } OR → any one condition can be true
{ ! } NOT → changes true to false and false to true

Example:

Use &&

let age = 20;

console.log(age > 18 && age < 30);

Output:

true

let age = 20;

console.log(age < 18 && age < 30);

Output:

false

Use ||

let age = 20;

console.log(age > 18 || age < 30);

Output:

true

let age = 20;

console.log(age < 18 || age < 30);

Output:

true

Increment Operator ++

Used to increase Value.

Two Type of increment operators

++a--- Pre-increment
a++--- Post-increment

Example:

let a = 5;

a++;

console.log(a);

Output:

6

let a = 5;
let b = a;

a++;


console.log(a);
console.log(b);

Output:

6
5

Decrement Operator --

Used to decrease value

Two Type of Decrement operators

--a ---Pre-decrement
a-- ---Post-decrement

Example:

let a = 5;

a--;

console.log(a);

Output:

4

Arrays

Array is used to Store Multiple Values in a Single Variable [].

Example:

const marks = [79, 70, 93, 100];

 index:       0   1   2    3

console.log(marks[1]); 

 Output:
 70

Multiple Data Types in One Array

Arrays can store different data types together.

const values = [10, true, "abc", 50];

Changing Array Values with const

Call the index Num when Change the Value.

When using const, you cannot reassign the whole array.

But you can change values inside the array.

const marks = [10, 20, 0, 11, 5];

marks[2] = 99;

console.log(marks);

Functions

A function is a reusable block of code.

It runs only when the function is called.

Function Declaration

function add(no1, no2) {

}

add(5, 10);

Arrow Function

Arrow function is a shorter way to write functions.

const add = (no1, no2) => no1 + no2;

add(10, 15);

Return Value

The return keyword sends a value back from the function.

function add(no1, no2) {
  return no1 + no2;
}

let result = add(5, 7);

console.log(result);

OutPut:

 12

Hoisting

Hoisting means JavaScript moves declarations to the top before running the code.

-Functions are hoisted ✅
-let and const variables are not hoisted ❌

let result = add(5, 7);

console.log(result);

function add(no1, no2) {
  return no1 + no2;
}

Objects

An object stores data in key : value pairs.

  const laptop = {
  brand: "HP",
  price: 35000,
  model: "HP05"
};

console.log(laptop.brand);
console.log(laptop.price);

Objects with Functions

Objects can also contain functions.

const obj = {

  type: "object",

  state: "active",

  behavior: function() {
    console.log("Object is working");
  }

};

obj.behavior();

Day 2 of Python Learning 🐍

Vairavan — Tue, 26 May 2026 19:02:48 +0000

Last day, we learned terminal basics, conditional statements, how to use Boolean datatype in Python, and what dynamic type is. Today, we will see some more things that I learned in Python.
I learned was Control Flow Statements.

Control Flow Statement

Control Flow Statements are used to control the execution flow of a program type of three.

1.Condition Statements
2.Lopping Statements
3.Jump Statements

Today we are going to learn two statements.😁
One is Conditional Statements, and another one is Looping Statements.

Condition Statements

Condition statement means checking a condition and running the code based on that condition.

Condition Statement key words

if
else
elif 🤔

In JavaScript, I used else if.
In Python, we use elif for the same purpose. ( else + if = elif 😜 )

a =10
b =20
c =21
if a>=b and a>=c:
    print(a)
elif b>=a and b>=c:
    print(b)
elif c>=a and c>=b:
    print (c)

OutPut:
   c

First I created three variables and assigned values to them.
Then I used an if-elif condition statement to check which value is greater.
Used to (ex) a>=b and a>=c, b>=a and b>=c, c>=a and c>=b
Finally the program prints the largest number.📈

Looping Conditions

A looping condition is used to repeat a block of code again and again until the condition becomes false. two Type of Looping Conditions is Here
For Loop Condition and While Loop Conditions. but I Today only Learn in While Loop Condition.

While Loop

It is used to run the code until the condition becomes false.
I was create a while loop conditions by 4 task. see the task easy to Understand in while loop condition..

Task no: 1) 5 4 3 2 1

count =5
while count>=1:
    print(count, end=" ")
    count-=1
Output :
5 4 3 2 1
------------------------------

Task no: 2) 10 8 6 4 2

loop=10
while loop>= 2:
    print(loop, end=" ")
    loop-=2
Output :
10 8 6 4 2

------------------------------

Task no3) 15 12 9 6 3

count1 =15
while count1>=3:
    print(count1,end=" ")
    count1-=3
Output :
15 12 9 6 3

------------------------------

Task no:4) 25 20 15 10 5

count2 =25
while count2>=5:
    print(count2,end=" ")
    count2-=5
Output :
25 20 15 10 5

EX :

Task no 1
Full program flow:

Create a Variable and Initialization starting value. count = 5
Used a while Loop condition and Check the Condition. while count>=1:
print the Count. print( Count )
value decrease. count-=1 meaning count=5 > > 5 - 1 = 4 > > count =4
again condition check. count value = 4 again print and again decrement the count.
When the condition becomes false the loop stops. [ex] count is 0 >=1.

And I use All print inside end=" "

what is this end=""🤔

end="" is used to control what comes after the print output.
Normally print moves to the next line.😒

OutPut:

5
4              
3
2
1

But using end="" we can print output in the same line.😃

OutPut :

5 4 3 2 1

We can use space, star, dash, or other symbols inside end="".😯

end="*",end="_"

OutPut :

5*4*3*2*1

5_4_3_2_1

I will continue my Python journey tomorrow...👋

Day 1 Python Learning 🐍

Vairavan — Tue, 26 May 2026 09:41:37 +0000

Today I Started learning python programming language.
I learned some basic concepts about python and terminal commands

Python is a Interpreter and dynamically typed programming language.
Python automatically Understands the datatype.
Interpreter means a code is Executed Line by Line..

EX :

x=10
x="HI"

OutPut:
HI

Terminal Commands

I Learn How to use Terminal Cmd :

" ls " -used to show file and folders
" cd " -used to change folder
" cd .. " -used to one step back file are folder
" --version " -used to check the versions (ex) python --version output :3.14.3 *up arrrow -used to access previous commands

Conditional Statements

Conditional Statements used to Make Decisions in Programming

EX :

a=10
b=5
if a>b:
    print(a)
else:
    print(b)

OutPut:
a

if the condition is true, python executes the if
otherwise, it executes the else block.

I Learn One Important of Boolean Datatype in Python

I used to js in boolean datatype true and false.
Python also true, false but used to first letter must be Capital.

EX :

true, false ❌
True, False ✅

Today was my first day learning Python.
I learned terminal basics, conditional statements, How to use Boolean Datatype in Python, and What is dynamic type.
I am excited to learn more about Python and programming.