DEV Community: Vasanthakumari N

Git Commands – Step-by-Step Guide

Vasanthakumari N — Thu, 12 Nov 2026 11:57:36 +0000

Git is a version control system used to track changes in files and manage project code. It helps developers save their work and upload code to platforms like GitLab and GitHub.

Step 1: Check Git Status

git status

Purpose: Checks the current status of your project.

It shows:

Modified files
New untracked files
Staged files
Current branch name

Step 2: Add Files to Staging Area

git add.

Purpose: Adds all modified and new files to the staging area.

The . represents all files and folders in the current project.

Step 3: Remove a File from the Staging Area

git restore --staged resume.html

Purpose: Removes resume.html from the staging area without deleting the actual file or its changes.

Step 4: Commit Changes

git commit -m "to learn git"

Purpose: Saves the staged changes in the local Git repository.

commit – Saves changes.
-m – Adds a message describing the changes.
"to learn git" – Commit message.

Step 5: Configure Git Username and Email

If Git asks you to configure your identity, execute:

git config --global user.name "Your Name"
git config --global user.email "your-email@gmail.com"

Purpose: Sets your username and email address globally for Git commits.

To check the configured details:

git config --global user_email
git config --global user_name

After configuring, commit your changes:

git commit -m "to learn git"

Step 6: View Commit History

git log

Purpose: Displays the commit history of the repository.

It shows:

Commit ID (SHA)
Author name
Date and time
Commit message

Step 7: Check File Differences

git diff

Purpose: Displays the differences between your modified files and the last committed version.

Lines starting with - indicate removed content.
Lines starting with + indicate added content.

Step 8: Push Code to GitLab

git push

Purpose: Uploads your committed changes from the local repository to the remote GitLab repository.
If this is the first push to a branch, use:

git push -u origin main

origin – Remote repository name.
main – Branch name.
-u – Sets the upstream branch for future pushes.

Step 9: Fix Access Denied / Authentication Error

Sometimes, when executing git push, you may get errors such as:
if getting error like access denied

Open your GitLab account.
Click your profile picture.
Select Edit profile / Preferences.
Open Access → Personal Access Tokens.
Click Add new token.
Enter a token name.
Select an expiry date.
Select the required permission:
- write_repository
- read_repository
Generate the token.
Copy and save the token securely. Important Never share your personal access token with anyone.

git remote set-url origin https://<userName>:<token>@<project path>

Step 11: Push Using Personal Access Token

git push

HTML & CSS

Vasanthakumari N — Thu, 12 Nov 2026 11:29:58 +0000

Difference between tag and element?

HTML Tags are the starting and ending parts of an HTML element. They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags.
Example: In this example is the starting tag and is the ending tag <b> </b>
The HTML element consists of both the opening and closing tags as well as what’s inside those tags. It normally consists of some structure that’s used to define the respective tags.
Example: In this example is the starting tag and is the ending tag but with content inside it.
<b>This is the content.</b>

Semantic Tags

Html5 semantic tags provide meaningful tags that clearly describe their purpose, improving readability ,accessibility ans SEO for both humans and browsers.

Attributes

The HTML element consists of both the opening and closing tags as well as what’s inside those tags. It normally consists of some structure that’s used to define the respective tags.

Example: In this example is the starting tag and is the ending tag but with content inside it.

<b>This is the content.</b>

Ex: header,nav,section,article,main,footer

Difference between px,%,vh/vw?

Pixel

Fixed length
best for borders and icons.

Percentage(%)

Relative to parent element
Good for Responsive layouts

vh/vw

relative to viewport's height
Good for Full screen backgrounds

Self Closing tags

Self-closing tags are HTML elements that do not require a separate closing tag because they cannot contain child elements.
They are also called void elements in HTML.
Ex:<img>,<br>,<input>,<link>,<hr>

References

Html & Css

Vasanthakumari N — Thu, 12 Nov 2026 11:10:38 +0000

What is Markup Language?

A markup language is one that is designed for defining and presenting text. HTML (HyperText Markup Language), is an example of a markup language.

Within a text file such as an HTML file, elements are marked up using tags which explain the purpose of that part of the content.

<html>
<head>
<title>Pootfolio</title>
<body>
<h1>Payilagam</h1>
</body>
</html>

Types of markup language

HTML
XHTML
XML
SVG

latest version of html and css

Latest HTML: HTML Living Standard (WHATWG)
Latest CSS: CSS Snapshot 2026

Types of Css

Inline CSS CSS is written directly inside an HTML element using the style attribute.

<h1 style="color: red;">Hello World</h1>

2.Internal CSS
CSS is written inside the <style> tag in the HTML document's <head>section.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

3.External CSS
CSS is written in a separate .css file and linked to the HTML file.

index.html

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello World</h1>
</body>

style.css

h1 {
    color: green;
}

Box Sizing?

The CSS box-sizing property defines how the total width and height of an element are calculated, specifically whether padding and borders are added to or included inside the dimensions.

There are two commonly used values:

content-box (Default)
Width and height apply only to the content.
Padding and border are added to the total size.

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;
}

Total width: 200 + 40 + 10 = 250px.

border-box
Width and height include content, padding, and border.
The total width remains 200px.

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;
}

Total width: 200px

CSS Global Selector (*)

The Global Selector, also called the Universal Selector, is represented by an asterisk (*).

It selects all HTML elements on a webpage and applies the specified CSS styles.
Syntax

* {
    margin: 0;
    padding: 0;
}

References