Forem: Ezhil Abinaya K

Git & GitLab Basics

Ezhil Abinaya K — Mon, 25 May 2026 10:36:04 +0000

Git
Git is a Distributed Version Control System (DVCS) used to track changes in source code during software development.

It tracks code history.
It allows rollback to previous versions.
It Supports collaboration.
It Works offline. GitLab GitLab is a web-based Git repository management tool. Features:
Remote repository hosting.
CI/CD pipelines.
Team collaboration.
Issue tracking. It is Used to store and manage Git projects remotely. Version Control System VCS is a system that records changes made to files over time. Types of VCS: Local VCS: It Stored in local system only. Example: manual backups. Centralized VCS (CVCS): It has one central server. All users connect to it. Distributed VCS (DVCS): Every user has full copy of repository. Example: Git. Branching Branching means creating a separate line of development.
Develop new features.
Fix bugs.
Avoid affecting main code. Types of Branches: 1.Main/Master Branch: Production-ready code. 2.Feature Branch:Used for new features. 3.Bugfix Branch: Used for fixing bugs. 4.Develop Branch:Integration branch for testing. Types of Interfaces
CLI (Command Line Interface):Uses terminal commands. 2.GUI (Graphical User Interface):Visual tools with buttons. Important Git Commands git status: Shows current state of working directory. git add:Moves files to staging area. git commit:Saves snapshot of changes with message. git push:Sends local commits to remote repository.

git status
git add filename
git commit -m "Initial commit"
git push origin main

span tag, vw/vh, %, px

Ezhil Abinaya K — Mon, 25 May 2026 10:14:18 +0000

Span Tag
The span tag is used to style a small part of text without breaking line. It is an inline element.

<span>text</span>
<p>I am learning <span style="color:red;">HTML</span> today.</p>

Only "HTML" becomes red color.
px, %, vw, vh (CSS Units)
These are used to set size, width, height, spacing.
px (Pixel):
Fixed size unit.

div {
  width: 200px;
}

200px = fixed size.
Does NOT change for screen size.
% (Percentage):
Relative to parent element.

div {
  width: 50%;
}

Takes 50% of parent width.
vw (Viewport Width):
Relative to screen width.

div {
  width: 50vw;
}

1vw = 1% of screen width.
50vw = half of screen width.
vh (Viewport Height):
Relative to screen height.

div {
  height: 100vh;
}

100vh = full screen height.

Input Types, Attributes, Self-Closing Tags, Hover Effect

Ezhil Abinaya K — Mon, 25 May 2026 09:51:51 +0000

Input Types in HTML
HTML input types define what kind of data a user can enter in a form.
Common Input Types:
Text, Password, Email, Number, date, Time, Checkbox, File, Submit, Color, Range

Input Attributes
Attributes give extra features to input elements.
Example:
placeholder → Hint text inside input
required → Makes field mandatory
readonly → Cannot edit
disabled → Cannot use field
value → Default value
maxlength → Limit characters
min, max → Number limits
Self Closing (Standalone) Tags
These tags do NOT need closing tags.
Examples <br> <hr> <img> <input> <link> <meta>

<img src ="image.jpg"alt="sample image">

Alt tag
The alt attribute is used inside the img to describe the image.alt means alternative text. If the imagedoes not load, this text will be shown instead.
Hover
Hover means when you move mouse over an element, style changes.

button:hover {
  background-color: blue;
  color: white;
}

Hover is used in:

Buttons
Navigation menus
Links
Cards
Images

Exploring HTML Tables in Web Development

Ezhil Abinaya K — Mon, 25 May 2026 08:22:19 +0000

HTML Tables
HTML tables are used to organize data into rows and columns in a structured format. They are commonly used for displaying information like student details, marks, schedules, and reports.
Common Table Tags

HTML tables help display data clearly and make webpage content more organized and easy to understand.Learning HTML table tags helped me understand how structured data is displayed in webpages while improving my frontend development skills step by step

Flexbox, Grid & Semantic Tags

Ezhil Abinaya K — Mon, 25 May 2026 08:04:28 +0000

div tag
The div tag is a block-level element used to group and organize content in HTML. It is used when we want to create sections or structure a webpage. It helps developers design layouts and apply CSS styles easily. The content inside the div tag can be styled using CSS.
Semantic Tags
Semantic tags describe the meaning of the content clearly. It improves readability. Gives better SEO. It helps screen readers understand the webpage.
Example

display: grid
Grid is a CSS layout system used to arrange elements in rows and columns.

It divides the container into 2 columns using fractions. So the second column becomes twice as wide as the first.
Flexbox
Flexbox is a CSS layout model used for flexible alignment and spacing. It helps align items easily and makes responsive design simpler.

Understanding Basic HTML & CSS Concepts for Beginners

Ezhil Abinaya K — Mon, 25 May 2026 07:42:47 +0000

While learning Full Stack Web Development, I explored some important HTML and CSS concepts that help in building clean and responsive websites.
Global Selector (*)
The global selector is used to apply styles to all elements in a webpage.
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
It helps maintain consistent spacing and layout throughout the website.
**Anchor Tag *
The anchor tag is used to create links in HTML.

href stands for Hypertext Reference.
Margin vs Padding
Both are used for spacing, but they work differently.
Margin: Space outside the element.
Padding: Space inside the element.
Box Sizing: Border Box
box-sizing: border-box makes width and height include padding and border.This helps avoid layout issues and makes responsive design easier.
Types of Elements
1.Block Level Element:Block elements take the full width available and always start on a new line.
Example:

2.Inline Element: Inline elements take only the required width and stay in the same line.
Example:

nav tag

Types of Lists
1.Ordered List: An ordered list displays items in a numbered format.
2.Unordered List: An unordered list displays items using bullet points.

HTML Basics for Beginners – Markup Language, Elements and Types of CSS

Ezhil Abinaya K — Fri, 22 May 2026 15:25:38 +0000

Introduction
In this blog, I will share some basic HTML and CSS concepts that every beginner should know. These are important interview questions for frontend development.
What is Markup Language?
Markup language is used to describe the structure of content using tags and symbols.
Example:
HTML is a markup language used to create web pages.
Tags like

,

, and

help the browser understand how to display content.
What is an HTML Element?
An HTML element contains:
• Opening tag
• Content
• Closing tag
Example:

Hello

This complete structure is called an HTML element.
Difference Between Tag and Element
Tag:
• Only the keyword inside angle brackets
Example:

Element:
• Complete structure including opening tag, content, and closing tag
Example:

Hello

Types of CSS
There are 3 types of CSS:

Inline CSS CSS is written inside the HTML element using the style attribute. Example:
Hello
Internal CSS CSS is written inside the tag in the HTML file.</li> <li>External CSS CSS is written in a separate .css file and linked using the <link> tag. <strong>Conclusion</strong> These are some important beginner concepts in HTML and CSS. Understanding these basics helps in building web pages and preparing for frontend interviews.</li> </ol>