DEV Community: Harish raj

30/10/26 in payilagam

Harish raj — Wed, 30 Sep 2026 17:06:08 +0000

today i learn about how to create a object then what is objust .object is the state of compiantion and behaviour .const value are state .function is a behaviour. an objuct carrier function another function and variable.then learn about crud operation how to add new value in object then how to view then how to update the value and how to delete . this are all discussed today

29/09/2026 in payilagam

Harish raj — Tue, 29 Sep 2026 17:23:01 +0000

today learn about constructor .JavaScript Constructor Method A constructor in JavaScript is a special function used to create and initialize objects. It sets up object properties and is typically invoked using the new keyword. Constructors allow for the creation of multiple instances with similar properties and methods. Object.create() function in JavaScript
Object.create() in JavaScript is used to create a new object by setting an existing object as its prototype. Instead of copying properties directly or invoking a constructor, it establishes prototype-based inheritance, allowing the new object to access properties and methods from the specified prototype.

26/9/26 in payilagam

Harish raj — Sat, 26 Sep 2026 17:42:51 +0000

today i learn about js and function then what is parameter and arugment then how to use return end of the day sir give a project to create ecomerce site

23/9/2026 in payilagam

Harish raj — Wed, 23 Sep 2026 16:52:22 +0000

today last day of html css . i will done 6 project using html css . last project is clone the youtube page

today in payilagam

Harish raj — Wed, 23 Sep 2026 16:47:09 +0000

i will create a fb login page and instagram login page using html and css

day 5 in payilagam

Harish raj — Fri, 18 Sep 2026 17:44:52 +0000

today i will completed nav bar header in webpage .today i will learn media query and learn about position in css there are type static,absolute,relative,fixed and sticky.

day 4 in payilagam

Harish raj — Thu, 17 Sep 2026 17:25:02 +0000

today i learn about create header part in website using nav tag and using media queries then id and for input type .Font awesome is a website where they have n numbers icons.

day 3 in payilagam

Harish raj — Thu, 17 Sep 2026 17:10:48 +0000

today i learn how to create a resume using html and css . first i use grid box to separate box in column . then using img tag for profile photo .then learn about main asix and cross asis in flex then create a table for study details then push into gitlab

Day 2 – Learning HTML & CSS in payilagam

Harish raj — Fri, 11 Sep 2026 08:10:30 +0000

Today, I continued learning HTML and CSS as part of my web development journey. I focused on images, the

tag, CSS selectors, and the basics of Flexbox.
HTML:

Tag
In HTML, if we need a horizontal line to separate content, we can use the tag.

About Me

This is my introduction.

The

tag is useful for creating a visual separation between different sections.

Display Flex
Another important topic I learned today was Flexbox.

When we use:

display: flex;
the child elements are arranged in a row by default.

For example:

.container {
display: flex;
}
If we want to change the direction from a row to a column, we can use:

.container {
display: flex;
flex-direction: column;
}
Note: The correct property is flex-direction, not flex-template-column.

Main Axis and Cross Axis
I also learned about the main axis and cross axis in Flexbox.

Main Axis
The main axis is controlled using:

justify-content
For example:

.container {
display: flex;
justify-content: center;
}
Cross Axis
The cross axis is controlled using:

align-items
For example:

.container {
display: flex;
align-items: center;
}
The direction of these axes depends on the flex-direction.

space-around
I also learned about:

justify-content: space-around;
This distributes the flex items with space around them.

Example:

.container {
display: flex;
justify-content: space-around;
}
This is useful when we want to create even spacing around the items.

What I Learned Today
Today I learned:

tag

alt attribute

Styling the img element using CSS

Using classes with .

tag

display: flex

flex-direction

Main axis and cross axis

justify-content

align-items

justify-content: space-around

day 1 piyalagam "resume"

Harish raj — Thu, 10 Sep 2026 18:07:22 +0000

Creating a Resume Using HTML & CSS — My Day 1 Learning at Payilagam

Today, I started working on an interesting mini project at Payilagam Institute — creating a Resume using HTML and CSS.

Instead of directly writing the code, I learned that planning the layout first is an important step. Today, I mainly focused on planning the resume structure and creating a basic grid layout using CSS. I will continue the remaining content tomorrow.

1. First Step — Planning

Before starting the actual HTML and CSS, I learned how important it is to plan the structure of the resume.

This planning helps to decide how the content should be arranged on the webpage before writing the CSS.

2. Creating a Grid Layout

After planning the structure, I started creating the basic layout using CSS Grid.

The main property I learned today was:

display: grid;

CSS Grid is useful for creating rows and columns and arranging different sections of a webpage.

I also learned:

grid-template-columns: 1fr 1fr;

This creates two equal columns.

For example:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

Here, 1fr 1fr means that the available space is divided equally between the two columns.

3. Understanding `vh` and `vw`

Today, I also learned about two useful CSS units:

`vh` — Viewport Height

vh represents a percentage of the browser's viewport height.

height: 100vh;

100vh means the element can take the full height of the viewport.

`vw` — Viewport Width

vw represents a percentage of the browser's viewport width.

width: 100vw;

100vw represents the full width of the viewport.

These units are useful when creating layouts that should adjust according to the screen size.

4. `box-sizing: border-box`

Another important CSS concept I learned today was:

box-sizing: border-box;

It helps control how the width and height of an element are calculated.

For example:

* {
    box-sizing: border-box;
}

Using border-box makes it easier to manage the size of elements when padding and borders are added.

5. Using `px`

I also learned about using pixels (px) in CSS.

For example:

font-size: 16px;
margin: 10px;
padding: 20px;

Pixels are useful when I want to specify a particular fixed size for an element.

6. Using `margin: auto`

Today I also learned this simple but useful CSS technique:

margin: auto;

It can be used to automatically distribute the available margin. One common use is centering a block element horizontally when it has a defined width.

Example:

.container {
    width: 80%;
    margin: auto;
}

This helps create a cleaner and more centered webpage layout.

7. HTML Shortcut — Emmet

One small but very useful shortcut I learned is Emmet in VS Code.

Instead of writing:

<div class="container"></div>

I can type:

div.container

and press Enter/Tab, depending on the Emmet setup.

VS Code automatically generates:

<div class="container"></div>

This makes writing HTML much faster.

What I Learned Today

Today, my main focus was on understanding the planning and basic layout structure of a resume website.

I learned:

Planning the webpage before coding
Creating a layout using display: grid
Using grid-template-columns
Understanding 1fr 1fr
Using vh and vw
Understanding box-sizing: border-box
Using px
Using margin: auto
Using Emmet shortcuts in VS Code

This was my Day 1 progress in creating a Resume using HTML and CSS. I have completed the basic planning and started building the grid structure. I will continue the remaining parts of the resume tomorrow and learn more while developing the project.

Day 1: Plan → Structure → Grid → Learn CSS Basics → Build

Learning step by step, one concept at a time.
— Payilagam Institute

DEV Community: Harish raj

30/10/26 in payilagam

29/09/2026 in payilagam

26/9/26 in payilagam

23/9/2026 in payilagam

today in payilagam

day 5 in payilagam

day 4 in payilagam

day 3 in payilagam

Day 2 – Learning HTML & CSS in payilagam

About Me

day 1 piyalagam "resume"

Creating a Resume Using HTML & CSS — My Day 1 Learning at Payilagam

1. First Step — Planning

2. Creating a Grid Layout

3. Understanding vh and vw

vh — Viewport Height

vw — Viewport Width

4. box-sizing: border-box

5. Using px

6. Using margin: auto

7. HTML Shortcut — Emmet

What I Learned Today

3. Understanding `vh` and `vw`

`vh` — Viewport Height

`vw` — Viewport Width

4. `box-sizing: border-box`

5. Using `px`

6. Using `margin: auto`