DEV Community: AravindhBalakrishnan

Let's start JavaSciprt.

AravindhBalakrishnan — Tue, 26 May 2026 01:59:57 +0000

Java script is a scripting language where we can add interactive elements to a static webpage. Java script is a dynamically typed language which is interpreted line by line not like compiled one.
JS is formally known as Mocha then live script which after java's popularity changed its live script name into javascript.

JS can be written inside a HTML page within <script> tag.
Let see a small JS program to print

Hello World

<script> 
console.log("Hello, World!");
</script>

Now we can write smaller arithmetic functions like addition, subtraction, multiplication, division using variable.

Like all programming languages JS also uses variable to perform operations on the values which is stores in identifiers which we can call as variable.

We can declare a variable and initialise a value to that variable using let keyword. let a = 20 is used to declare and initialise variable an and assign a value of 20 to a. We can also use var and const to declare a variable. But let is used rather than var since var allows to redeclare the same variable which leads into changing of actual value at any part of the program where as let will not allow users to create same variable again in any part of the program which is more safer option.

<script>
let a = 20;
let b = 30;
console.log(a+b);
</script>

Similarly we can perform subtraction, division, multiplication, modulo function.

<script> 
let a = 20;
let b = 10;
console.log(a-b);

let a = 20;
let b = 10;
console.log(a*b);

let a = 20;
let b = 10;
console.log(a/b);

let a = 20;
let b = 10;
console.log(a % b);
</script>

const keyword is used to create a variable which need not be changed at any part of the program lets us say value of pi which is 3.142 which can be declared as const variable.

<script> 
const pi =3.142 
let radius = 3; 
let area = pi*radius*radius; 
console.log(area); 
</script>

In this above program we can change the value of radius but now the value of pi when we try to give new value for pi it will throw a error and we cannot assign new value to pi

Let's see about the data types in JS. Like other programming languages we have datatypes Number , string , BigInt, Boolean are commonly used datatype.

Number is used to represent numeric value. But when number becomes large than a safe integer value we need to use BigInt. Also we can store floating value and double value in_ Number_ datatype.

eg.

let a = 123;
let b = 2.567; 
let c= 1234567890;

String is used to represent series of characters and text which can be represented within " "

eg.

let a  = "ABC is the first 3 alphabet of English"; 
let name = "Aravindh Balakrishnan "
let address = "Chennai, Tamil Nadu, "
let mobileNumber = " 98900000000"

Boolean is used to represent true or false

let x = true;
let y = false;

There are few more datatype is there which is Undefined , Null , Symbol , Object

Undefined is used to represent not assigned value but a variable is declared.

Null is used to represent empty value of the variable.

Symbol is used to represent unique value of the variable which doesn't allow other variable to use the same value.

Object is a datatype which is used to represent key:value pair of the data.

How to create a Website

AravindhBalakrishnan — Sat, 16 May 2026 04:35:18 +0000

Start doing website to learn HTML CSS. To build let us build a website like Google.

First try to understand how many sections are there in the site and try to segregate all the contents inside a box like modules so that we can build it.

First let us take header, body section then footer part which has language and about us section.

First add a <header>, body <div> part, <footer>.

Now add About & Store links inside a <div>. Now Gmail, Images, Menu dots, UserProfilePic inside a separate <div>. Using <style>tag we can align them in both side of the page using Flex with help of justify content - Space Between attribute. So this has an expected result like google page.

No coming to body part the website it have image of Google Logo, A search bar which has integrated Magnifier glass , <input> box for getting text from user followed by + icon image, Microphone icon image, Scanner icon image and then AI mode. Add all the thing inside a separate <div> tag so that we can make it look like a single input search box. Now using CSS modify the Logo image as expected size and then using flex align the image and <div> tag for search box one below the other.We have the give the size of the search box appropriate to the Google Logo size and give its width, Now we can add style to Searchbox like setting the icon size to same with same padding and gap between them. Now we can give the outline of the text input box as none and align them to centre of the searchbox with edges rounded.
We have to add two button below them for Google Search & Im Feeling Lucky, add styling them for lighter colour grey, no border, give exact space between them inside a separate<div>block.

Now we can add the contents in the <footer> section like India with <hr> tag for a line then followed by links for Advertising, Business, How search works on the left side also Privacy, Terms, Setting in the right side. Add CSS property to style them respectively.

HMTL-2

AravindhBalakrishnan — Wed, 15 Apr 2026 03:43:27 +0000

Here again I start to write my learning journey, for the past 3 days we have been building FB clone page to learn new tags like input text, password, button. we placed then in page and wanted to make it centre. So we started learning Flex which allows us to move the elements flexibly from on place to another. We have explored the multiple possible options about this so that we can align and justify which is used to move in column and rows wise by default, but wen also changed the flex direction using flex-direction : column;

Also we started using <div> tag in order to make the multiple elements come into one box.

Within a div we need to make the elements look in a particular fashion which is done using padding and margin properties. Where padding is used to give space within the box content whereas margin gives outside the box content.

The alignment of the various elements which we give will always depend on the Style property which we give in the head tag.

Start learning HTML

AravindhBalakrishnan — Wed, 08 Apr 2026 11:33:14 +0000

This is my first DevPost here, Im learning HTML now. HTML is the markup language where it is used to communicate with web browsers as a human. Today I joined a class at Payilagam. Markup language is not a programming language it is used to define the structure of the web page which needs to be displayed in web browser, markup language uses Tags elements to structure and define where the elements like text, images, videos, links needs to be displayed and placed accordingly using the tags.

I created a basic web page code where I can enter the user name and password as text and click the button submit just as any web application has a login page on the website. I got to know about CSS which is used to style the web page which is created by HTML.

I created the login page with help of tags <html>, <head>, <body>, <input>, <button>.