HTML stands for HyperText Markup Language.

We use HTML to create the structure of a web page.

For example, think about a normal website. It can have:

• A heading

• Some paragraphs

• Images

• Buttons

• Links

• Forms

• Lists

HTML helps us tell the browser what each part of the page is.

For example:

<h1>Welcome to My Website</h1>

<p>I am learning HTML.</p>

<button>Click Me</button>

Here:

• <h1> creates a heading

• <p> creates a paragraph

• <button> creates a button

2. What is an HTML Tag?

When I first saw HTML code, I noticed that most things were written inside angle brackets < >.

For example:

<h1>
<p>
<button>

These are called HTML tags.

A tag tells the browser what type of content we are writing.

For example:

<p>Hello!</p>

Here, the browser understands that Hello! is a paragraph because we used the <p> tag.

Similarly:

<h1>My First Website</h1>

The <h1> tag tells the browser that this text is a main heading.

So, in simple words: An HTML tag is a special keyword inside < > that tells the browser what kind of content we want to display.

3. Opening Tag, Content and Closing Tag

Let's take a very simple example:

<p>I am learning HTML</p>

There are three important parts here:

<p>     I am learning HTML     </p>
 ↑              ↑                ↑
Opening        Content          Closing
  Tag                              Tag

Opening Tag

<p>

This tells the browser:

“A paragraph starts from here.”

Content

I am learning HTML

This is the actual content that will appear on the web page.

Closing Tag

</p>

This tells the browser:

“The paragraph ends here.”

The main difference I noticed between opening and closing tags is the /.

<p>  → Opening tag

</p> → Closing tag

4. What is an HTML Element?

This was one thing that confused me initially:

Is a tag and an element the same thing?

They are related, but they are not exactly the same.

Let's look at this:

<p>Hello World</p>

Here:

<p>  → Tag

</p> → Tag

But this complete thing:

<p>Hello World</p>

is an HTML element.

So we can understand it like this:

Opening Tag + Content + Closing Tag = HTML Element

For example, if I wanted to create a simple unordered list, I would write:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

This is completely fine when we are learning HTML. In fact, beginners should understand how HTML tags actually work.

But as I started writing more HTML, I noticed that I was typing the same tags again and again.

That’s when I learned about Emmet.

Emmet makes writing HTML faster by allowing us to type small abbreviations that are automatically expanded into complete HTML code.

In this blog, I’ll share what I learned about Emmet and some useful Emmet shortcuts that beginners can start using immediately.

1. What is Emmet?

In very simple words:

Emmet is like a shortcut language for writing HTML.

Instead of typing complete HTML tags manually, we can write a short abbreviation and let Emmet generate the HTML for us.

For example, instead of writing:

<h1></h1>

we can simply type:

h1

and press Tab or select the Emmet suggestion.

It expands to:

<h1></h1>

Another example:

p

becomes:

<p></p>

2. Why is Emmet Useful for HTML Beginners?

When learning HTML, we create elements such as:

<div></div>
<p></p>
<h1></h1>
<button></button>
<section></section>

Writing these manually is important in the beginning because we need to understand HTML syntax.

But once we understand the basics, repeatedly typing opening and closing tags can become time-consuming.

For example:

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

With Emmet, the same structure can be generated using:

div.container>h1+p

This is why I find Emmet useful. It does not replace HTML knowledge. It simply helps us write the HTML we already understand more quickly.

3. How Does Emmet Work Inside a Code Editor?

Many modern code editors support Emmet. I use VS Code while learning web development.

The basic workflow is:

Open HTML File
      ↓
Write Emmet Abbreviation
      ↓
Press Tab / Choose Suggestion
      ↓
Emmet Expands It
      ↓
Continue Writing HTML

For example, inside an HTML file, type:

button

Press Tab.

You should get:

<button></button>

For most basic HTML examples, we don't need to install a separate extension in VS Code because Emmet support is built in.

4. Creating Basic HTML Elements

The easiest Emmet shortcut is simply writing the name of the HTML element.

Heading

Emmet:

h1

Output:

<h1></h1>

Paragraph

Emmet:

p

Output:

<p></p>

Button

Emmet:

button

Output:

<button></button>

Section

Emmet:

section

Output:

<section></section>

5. Adding Classes with Emmet

In HTML, we often add classes to elements.

Normally, we might write:

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

With Emmet, we can write:

div.container

which expands to:

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

Here, the dot (.) represents a class.

We can also add multiple classes.

div.card.active

Output:

<div class="card active"></div>

A useful shortcut is that when we want a div, we don't even have to type div.

.container

becomes:

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

6. Adding IDs with Emmet

For an ID, Emmet uses the # symbol.

For example:

div#header

Output:

We can also combine an ID and a class:

div#header.container

Output:

An easy way I remember this is:

. → class

#→ id

7. Adding Attributes

Sometimes we need attributes such as type, href, src, or placeholder.

Emmet allows us to add attributes using square brackets [].

For example:

input[type="text"]

Output:

<input type="text">

Another example:

input[type="email"][placeholder="Enter your email"]

Output:

<input type="email" placeholder="Enter your email">

This becomes useful when creating forms.

8. Adding Text Inside an Element

We can also add text using curly braces {}.

For example:

button{Submit}

Output:

<button>Submit</button>

Similarly:

p{I am learning HTML and Emmet}

Output:

<p>I am learning HTML and Emmet</p>

So I remember:

{} → text content

9. Creating Nested Elements

HTML elements are often placed inside other elements.

For example:

ul
 └── li

In Emmet, the > symbol is used to create a child element.

ul>li

Output:

<ul>
  <li></li>
</ul>

We can go one level deeper:

div>ul>li

Output:

<div>
  <ul>
    <li></li>
  </ul>
</div>

10. Creating Sibling Elements

Sometimes elements are on the same level rather than inside one another.

For this, we use the + symbol.

For example:

h1+p

Output:

We can add more elements:

header+main+footer

Output:

So:

>→ child element

+→ sibling element

11. Repeating Elements Using Multiplication

This is one of my favourite Emmet shortcuts.

Suppose we need five list items.

Instead of writing <li> five times, we can use the * operator.

li*5

Output:

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

We can combine this with nesting:

ul>li*5

Output:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

12. Numbering Repeated Elements

Emmet can also automatically add numbers to repeated elements using $.

For example:

ul>li{Item $}*3

Output:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

This is a small feature, but it can save time when creating sample HTML content.

Quick Emmet Cheat Sheet

Here are some shortcuts that I found useful as a beginner:

Then I came across the .git folder and started wondering: What is stored inside it? How does Git remember my files? How does it know what changed?

In this article, I am going to explore the basics of how Git works internally and understand concepts like the .git folder, blobs, trees, commits, and hashes in simple terms.

How Does Git Work Internally?

Git does not simply store a copy of my project every time I make a commit. Instead, Git stores information about the content and structure of my project using objects such as blobs, trees, and commits.

Understanding the .git Folder

When we run git init inside a project, Git creates a hidden folder called .git.

git init

my-project/
│
├── index.html
├── style.css
└── .git/

The .git folder is basically the place where Git stores the information it needs to manage the repository. It contains the repository's history, configuration, references, and Git objects.

We should not normally edit or delete files inside .git manually.

For example:

After running ls -la .git , I could see a hidden .git folder in my project. This folder is created by Git when we initialize a repository. It stores the internal information Git needs to track the project and maintain its history.

.git folder ye hai:

.git/
│
├── COMMIT_EDITMSG
├── config
├── description
├── FETCH_HEAD
├── HEAD
├── hooks/
├── index
├── info/
├── logs/
├── objects/
└── refs/

1. objects/ : Git ke important objects yahin store hote hain:

objects/
   │
   ├── Blob
   ├── Tree
   └── Commit

Blob → file ka content

Tree → files/folders ka structure

Commit → project snapshot + history information

Imagine you are writing a project. Every day you make some changes. One day you accidentally delete an important file. Git helps you revert to an earlier version of your project without losing your work.

What is Git?
Git is a distributed version control system that helps developers track changes in their projects. It allows developers to save different versions of their code and collaborate efficiently with teams.

Why is Git used?

Before Git, developers had to create multiple copies of the same project to save different versions. This made it difficult to manage changes. Git solves this problem by storing the complete history of the project. It also makes teamwork much easier because everyone can work on the same project without overwriting each other's code.

Important Git Terms-

Repository:

A repository is simply the place where our project and its history are stored. You can think of it as the main folder of your project that Git manages.

Example: If I am building a portfolio website, all my HTML, CSS, JavaScript files and their change history will be stored inside the Git Repository.

Commit:

A commit is like saving the progress of your work. Whenever we complete a small task, we create a commit so that we can remember what changes were made at that time.

Example: If I complete the login page today, I can create a commit with the message "Added Login Page" Tomorrow, if something breaks, I can easily return to this saved version.

Branch:

A branch allows developers to work on new features without affecting the main project. This is useful because we can test new ideas safely before adding them to the main code.

Git Commands

git init - The command used to create a new Git repository inside our project folder. It tells Git that we want to start tracking this project.

git init

git status- Abhi project ki situation kya hai? This command shows the current state of our project. It tells us which files have been changed, added or are still untracked.

git add-Changes ko staging area me bhejna: This command moves the selected files to the staging area so they are ready to be committed.

git commit-Changes ka save point: This command saves our staged changes permanently in the Git history. It is always a good practice to write a meaningful commit message.

git diff - Maine exactly kya change kiya?: This command shows the changes that are currently in my working directory but have not been staged yet.

git diff

Example:

Pehle:

<h1>Hello</h1>

Ab:

<h1>Hello, I am Nandani</h1>

git diff tumhe batayega ki kya line add/remove hui.
After making some changes, I don't always want to commit immediately. First, I can use git diff to check exactly what I changed. This is useful when I want to review my work before staging it.

git log — Purani commits ki history:

commit abc123
Author: Nandani
Message: Add portfolio homepage

commit xyz456
Author: Nandani
Message: Create project structure

This command works like the history section of my project. It shows the commits that have been made and helps me understand how the project has changed over time.
Short version: git log --oneline

HEAD-(Mai abhi kaha hu?): HEAD is basically Git's way of pointing to where I am currently in the commit history. In normal work, it points to the latest commit on the current branch.

Commit A → Commit B → Commit C
                         ↑
                        HEAD

git branch — (Alag line me kaam karna):
Ab maan lo tumhara main project ready hai. Tumhe ek new login page banana hai. Lekin tum main project ko disturb nahi karna chahte.

git branch login-page

Ye new branch create karega.

Branches dekhne ke liye:

git branch

git clone — Existing project ko apne computer par lana: Agar GitHub par already project hai:

git clone <repository-url>

git clone creates a local copy of an existing repository on my computer

git push - Local se GitHub: Tumne locally commit kar liya. Ab GitHub par bhejna hai:

git push

git push sends my local commits to the remote repository.

git pull- GitHub se latest changes lena: Agar team member ne GitHub par changes push kiye hain:

git pull

git pull gets the latest changes from the remote repository and integrates them into my current branch.

Git is a Distributed Version Control System (DVCS).
In simple words
Git helps you track changes in your code, save versions, and work safely with other developers.
Think of Git like a history manager for your code:

→You can go back to older versions

→You can experiment without fear

→You can collaborate with a team easily

Example:
If your project breaks today, Git allows you to go back to yesterday’s working version

Why is Git Used?

Git is used because it solves common developer problems:

1. Track Code Changes

Every change is recorded. You know:

• What changed

• Who changed it

• When it changed

2. Work Without Fear

You can experiment freely. If something goes wrong, just revert.

3. Team Collaboration

Multiple developers can work on the same project without overwriting each other’s work.

4. Industry Standard

Almost every company uses Git with platforms like:

• GitHub

• GitLab

• Bitbucket

  Git Basics and Core Terminologies:

• Let’s understand the most important Git terms.

  📁 Repository (Repo)

  A repository is a folder that Git tracks.

  It contains:

  • Your project files

  • Git history

  • All commits and branches
    🌿 Branch

    A branch is a separate line of development.

    Why branches?

    • To add features safely

    • To fix bugs without affecting the main code

→ The default branch is usually called:

• main or master

• 🎯 HEAD

HEAD points to:

• Your current branch

• Your latest commit

→If you move to another branch, HEAD moves with you.

• Common Git Commands

• git init
  Initialize a new Git repository in your project folder.

• git status
  Check File Status
  Shows:

  • Modified files

  • Staged files

  • Untracked files

• git add <file name>
  Add Files to Staging Area

  or

• git add .

  Add all files

• git commit -m "Initial commit"
  Commit Changes- Write clear messages. Explain what you changed.

• git push

  git push is used to send your local commits to a remote repository
  (like GitHub, GitLab, or Bitbucket).

  Until you push, your code exists only on your laptop.

• git log

  View commit history

  Shows:

  • Commit IDs

  • Author

  • Date

  • Commit messages

  •