day 1 piyalagam "resume"

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