---

TH

TH

SPACEEEEEEEEEEEEEEEEEEEEEEEE

index

---

SPAcE

Day 1

SPACEE

|

SPAcECEE

Day 2

SPACEEEE

|

SPAcE

Day 3

SPACEEE

|

SPAcECE

Day 4

SPACEEE

|

SPAcE

Day 5

SPACEEE

|

SPAcE

Day 6

SPA

|

📁 Understanding File Path

A file path is just a map or address that tells the computer where a file or folder is located in the storage system.

Without the path, your computer wouldn’t know which file you mean, because there could be thousands of files with similar names in different places.

Breaking it Down
File → the actual document, picture, program, etc.
Path → the directions to reach that file inside folders/directories.

It’s like:
File = your house
Path = the full directions (street, area, city) so others can find it.

Types of File Paths?

Absolute path

An absolute path is the complete address of a file or folder in a file system.
It always starts from the root directory (like C:\ in Windows or / in Linux/Unix).
No matter where you currently are, an absolute path will always point to the same file/folder because it’s the full location.

Structure of an Absolute Path

An absolute path usually contains:

Root directory (like C:\ or /)

Folder hierarchy (directories inside directories)

File name (with extension)

📌 Example (Windows):
C:\Users\Akhil\Documents\notes.txt

Here:

C:\ → root directory (C drive)

Users → folder inside C drive

Akhil → folder inside Users

Documents → folder inside Akhil

notes.txt → the actual file

Relative path

A relative path is the path to a file or folder starting from your current working directory (CWD), instead of from the root.
It depends on where you currently are in the file system.
If you move to a different directory, the same relative path might point to a different file.

📂 Suppose this is your project structure:

project/
│── index.html
│── about.html
│── images/
│ └── logo.png

1. Same Folder

If the file is in the same folder as your HTML:


2. Inside a Subfolder

If the file is inside another folder (like images/):

3. Go Up One Level (..)
If your HTML is inside a folder but you want to access a file outside it:

project/
│── index.html
│── images/
│ └── logo.png
│── css/
└── style.css


From inside css/style.css → back to root → go into images/:
background-image: url("../images/logo.png");
4. Current Folder (./)
Explicitly pointing to current folder:

---

Boiler Plat Code 📑

---

Boilerplate code means the standard, repeated code you often have to write in many programs before you can even start doing the real logic.

It’s like the foundation of a house:

Every house needs walls, doors, windows → that’s boilerplate.

But the actual design (paint, furniture, style) is what makes your house unique → that’s your program’s logic.

---

Why do we need boiler plate though?

---

Boilerplate code means the standard, repeated code you often have to write in many programs before you can even start doing the real logic.
It’s like the foundation of a house:
Every house needs walls, doors, windows → that’s boilerplate.
But the actual design (paint, furniture, style) is what makes your house unique → that’s your program’s logic.

Now u might have many doubts about this code the first thaught would have been "UTF-8" lets explore what it means

---

UTF-8

---

UTF stands for Unicode Transformation Format.

It’s a way of encoding characters (letters, numbers, symbols, emojis, etc.) into binary (0s and 1s) so that computers can store and exchange text consistently.

---

Why do we need it?

---

Computers only understand binary (0s and 1s).

Early systems used ASCII (American Standard Code for Information Interchange).

ASCII = 128 characters → English letters, digits, symbols.

Example: A = 65, a = 97, ! = 33.

Problem: ASCII cannot handle non-English languages (like हिंदी, 中文, русский) or even emojis 😀.

So, we needed a universal character system → that’s Unicode.

---

UTF-8

---

Most widely used (over 95% of websites).

Variable length:

English letters → 1 byte (same as ASCII).

Symbols / other languages → 2–4 bytes.

Efficient for English-heavy text.

Example:

A (U+0041) → 01000001 → 1 byte

€ (U+20AC) → 11100010 10000010 10101100 → 3 bytes

😊 (U+1F60A) → 11110000 10011111 10011000 10101010 → 4 bytes

👉 UTF-8 = compact & flexible, that’s why it dominates the web.

Now lets get into one of the main tags of HTML "DIV" tag

---

What does <"div"> do?

---

<"div"> stands for division.

It is a container tag in HTML, used to group other HTML elements together.

By itself, <"div"> does nothing visually — it doesn’t add style, color, or spacing.

Its real purpose is organizing content so you can apply CSS or JavaScript to that group.

Div basically is box where u can combine mulitple tags or div itself used for many purposes

---

Class & id

---

1. Class in HTML/CSS

In HTML, the class attribute is used to give an element a name (label).

Then in CSS, you can style all elements with that class.

Multiple elements can share the same class → that’s how you apply the same style to many things.cally is box where u can combine mulitple tags or div itself used for many purposes

2. Id in HTML/CSS

The id attribute is a unique identifier for a single element.

Each id should be used only once per page.

Useful for targeting one specific element with CSS or JavaScript.

In CSS, you select ids with a hash (#).

---

watch the video if u still didn't get it 😁

---

Congrats!! u just completed day 4!!

Next

Back