diff --git a/docs/css/03-border-and-border-radius/03-border-and-border-radius.md b/docs/css/03-border-and-border-radius/03-border-and-border-radius.md
index a1809da8..aa31d552 100644
--- a/docs/css/03-border-and-border-radius/03-border-and-border-radius.md
+++ b/docs/css/03-border-and-border-radius/03-border-and-border-radius.md
@@ -1,9 +1,3 @@
----
-title: Border and Border Radius
-description: "Border and Border Radius"
-hide_table_of_contents: true
----
-
 ## Border
 
 A border is a decorative or structural element that can be added to HTML elements to visually separate them from other elements. It is a line that surrounds the content of an element and can be customized in terms of color, width, and style.
@@ -36,7 +30,7 @@ The code you provided is used to style the border of an HTML element. It has thr
 
 **There are four types of border styles you can use:**
 
-1. **`solid` :** Creates a continuous line.👉**********\_\_\_**********
+1. **`solid` :** Creates a continuous line.👉****\*\*****\_\_\_****\*\*****
 
 2. **`double` :** Creates two parallel lines. 👉 **====**
 
diff --git a/docs/css/05-box-model/05-box-model.md b/docs/css/05-box-model/05-box-model.md
index c35aecc1..dfe03cd5 100644
--- a/docs/css/05-box-model/05-box-model.md
+++ b/docs/css/05-box-model/05-box-model.md
@@ -4,28 +4,83 @@ description: "Box Model"
 hide_table_of_contents: true
 ---
 
-# Box Model
+# 📦 CSS Box Model
 
-The CSS Box Model is a fundamental concept that describes how elements on a webpage are rendered and how their dimensions are calculated. It consists of four layers: content, padding, margin, and border. In this guide, we'll explore the concepts of padding and margin, and provide examples to illustrate their usage.
+The CSS Box Model is a basic concept in web design.  
+It explains how every HTML element is displayed as a rectangular box and how its size is calculated.
 
-**Box Model Compoments**
+Every box has four main parts:
 
-- **content**: it specifies the data to be inserted, content is used to take space in output, without any content it will not show output.
+- Content
+- Padding
+- Border
+- Margin
 
-- **height**: specifies the height of the box.
+These parts together decide the total size of an element.
 
-- **width**: specifies the width of the box.
+---
 
-- **margin**: margin is used to leave space from the outside the box.
+## 🗃️ Box Model With Detail Description
 
-- **padding**: Specifies the inner spacing from the box border.
+<img src="/css/13/output1.png" alt="output-1" width="600px"/>
 
-- **border**: specifies the border size and colours.
+---
 
-**🗃️BOX MODEL WITH DETAIL DESCRIPTION:**
+## 🔹 Box Model Components
 
-<img src="/css/13/output1.png" alt="output-1" width="600px"/>
+### 1) Content
+
+- This is the actual data inside the element (text, image, etc.).
+- The content area takes space on the webpage.
+- If there is no content and no height/width is given, the element may not be visible.
+
+---
+
+### 2) Width
+
+- Defines how wide the content area is.
+- Example: `width: 200px;`
+
+---
+
+### 3) Height
+
+- Defines how tall the content area is.
+- Example: `height: 100px;`
+
+---
+
+### 4) Padding
+
+- Padding is the space inside the box, between the content and the border.
+- It increases the space around the content.
+- Example: `padding: 20px;`
+
+---
+
+### 5) Border
+
+- Border surrounds the padding and content.
+- You can control its size, style, and color.
+- Example: `border: 2px solid black;`
+
+---
+
+### 6) Margin
+
+- Margin is the space outside the box.
+- It creates distance between this element and other elements.
+- Example: `margin: 30px;`
+
+---
+
+## 📌 Summary
+
+When you style a box using CSS:
+
+- Content stays inside.
+- Padding gives inner spacing.
+- Border surrounds padding.
+- Margin creates outer spacing.
 
-:::note
-You can enhance the look of this box model using **CSS **.  
-:::
+These properties help improve the design and layout of a webpage.
diff --git a/docs/css/06-box-shadow/box-shadow.md b/docs/css/06-box-shadow/box-shadow.md
index 0e4ba826..de520660 100644
--- a/docs/css/06-box-shadow/box-shadow.md
+++ b/docs/css/06-box-shadow/box-shadow.md
@@ -4,29 +4,77 @@ description: Box Shadow
 hide_table_of_contents: true
 ---
 
+# 🌑 Box Shadow
+
 ## Box-Shadow
 
-The `box-shadow` property is used to add one or more shadows to an element. It allows you to create visually appealing effects, such as giving the illusion of depth or highlighting elements.
+The `box-shadow` property adds shadow effects around an element.  
+It helps create depth and improves the visual look of elements on a webpage.
+
+---
 
-**The syntax for the box-shadow property is as follows:**
+## Syntax:
 
-           h-shadow v-shadow  blur spread  color
-              |       |      |      |       |
+```
+
+box-shadow: h-shadow v-shadow blur spread color;
+
+```
+
+### Example:
+
+```
 
 box-shadow: 5px 5px 5px 2px #808080;
 
-- **`h-shadow`** : The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, and a negative value puts the shadow on the left side.
-- **`v-shadow`** : The vertical offset of the shadow. A positive value puts the shadow below the box, and a negative value puts the shadow above.
+```
+
+---
+
+## Meaning of Each Value
+
+### h-shadow
+
+- Horizontal shadow position.
+- Positive value → Shadow moves right.
+- Negative value → Shadow moves left.
+
+---
+
+### v-shadow
+
+- Vertical shadow position.
+- Positive value → Shadow moves down.
+- Negative value → Shadow moves up.
+
+---
+
+### blur
+
+- Controls how blurry the shadow is.
+- Higher value = more blur.
+- `0` means sharp shadow.
+
+---
+
+### spread
 
-- **`blur`** : The blur radius. The higher the value, the more blurred the shadow will be.
+- Controls the size of the shadow.
+- Positive value → Shadow becomes bigger.
+- Negative value → Shadow becomes smaller.
 
-- **`spread`** : The spread radius. A positive value increases the size of the shadow, and a negative value decreases the size.
+---
 
-- **`color`** : The color of the shadow.
+### color
 
-**In the third example you provided, you want to add a box shadow to an image. Here's the code:**
+- Defines the color of the shadow.
+- You can use color name, HEX, or RGB values.
 
-**Code :**
+---
+
+# 🖼️ Image Shadow Example
+
+## Code :
 
 ```html
 <!DOCTYPE html>
@@ -54,15 +102,37 @@ box-shadow: 5px 5px 5px 2px #808080;
 </html>
 ```
 
-**Output :**
+---
+
+## Output :
 
 <img src="/css/07/screenshot4.png" alt="screenshot4" width="600px"/>
 
-In this example, there is an image element with the class `img-tiger`. The CSS styles defined for the class `img-tiger` specify that the image should have a height of `300px`, a border-radius of `50px`, and a margin of `30px`. The `box-shadow` property is used to add a shadow to the image. The values `2px 2px 5px 10px` define the horizontal offset, vertical offset, blur radius, and spread radius of the shadow, respectively. The color of the shadow is specified as `rgb(138, 136, 136)`.
+---
+
+## Explanation
 
-When you view this HTML page in a browser, the image will have a box shadow applied to it according to the styles defined by the `.img-tiger` class. When you move your mouse over the image, the border-radius will change to 20px with a transition effect, as defined by the `.img-tiger:hover` selector.
+- The image height is set to `300px`.
+- `border-radius: 50px;` gives rounded corners.
+- `margin: 30px;` creates space outside the image.
+- `box-shadow: 2px 2px 5px 10px rgb(138,136,136);` adds a shadow:
 
-**Code :**
+  - `2px` → moves shadow right
+  - `2px` → moves shadow down
+  - `5px` → blur radius
+  - `10px` → spread size
+  - `rgb(138,136,136)` → gray color
+
+When you move the mouse over the image:
+
+- The border radius changes from `50px` to `20px`.
+- `transition: 2s;` makes the change smooth in 2 seconds.
+
+---
+
+# 🔘 Button Shadow Example
+
+## Code :
 
 ```html
 <!DOCTYPE html>
@@ -74,6 +144,7 @@ When you view this HTML page in a browser, the image will have a box shadow appl
         background-color: aquamarine;
         border-radius: 20px;
       }
+
       .btn:hover {
         box-shadow: 1px 1px 2px 2px gray;
       }
@@ -86,9 +157,24 @@ When you view this HTML page in a browser, the image will have a box shadow appl
 </html>
 ```
 
-**Output :**
+---
+
+## Output :
 
 <img src="/css/07/screenshot2.png" alt="screenshot2" width="600px"/>
 
-In this example, A button element with the class `"btn"` and the text `"Click Here"`. The `".btn"` class sets the button's background color to aquamarine and gives it rounded corners with a border-radius of 20 pixels.
-The `".btn:hover"` selector applies styles when the button is hovered over. It adds a gray box-shadow of 1 pixel horizontal and vertical offset, with a 2-pixel blur radius, creating a subtle `shadow` effect when the button is hovered.
+---
+
+## Explanation
+
+- The button background color is `aquamarine`.
+- `border-radius: 20px;` makes the button corners rounded.
+
+When you hover over the button:
+
+- A gray shadow appears.
+- `1px 1px` moves shadow slightly right and down.
+- `2px` blur makes it slightly soft.
+- `2px` spread increases shadow size slightly.
+
+This creates a simple shadow effect when the user moves the mouse over the button.
diff --git a/docs/css/11-color-theory/11-color-theory.md b/docs/css/11-color-theory/11-color-theory.md
index cd668013..27c7005b 100644
--- a/docs/css/11-color-theory/11-color-theory.md
+++ b/docs/css/11-color-theory/11-color-theory.md
@@ -4,22 +4,23 @@ description: Color Theory
 hide_table_of_contents: true
 ---
 
-## Colors in CSS
+## 🎨 Colors in CSS
+
+Colors play an important role in web design. They improve appearance, readability, and user experience.
+
+There are different ways to add CSS colors:
 
-There are different ways to add css colors.
 ```html
-1. Color name
-2. Hexadecimal color
-3. rgb
-4. rgba
-5. hsl
+1. Color name 2. Hexadecimal color 3. rgb 4. rgba 5. hsl
 ```
 
-### 1. Color name
+---
+
+## 1️⃣ Color Name
 
 CSS provides predefined color names that you can use directly.
 
-**Example :**
+### Example :
 
 ```html
 <!DOCTYPE html>
@@ -39,19 +40,37 @@ CSS provides predefined color names that you can use directly.
 </html>
 ```
 
-**Output :**
+### Output :
 
 <img src="/css/11/output1.png" alt="output-5" width="600px"/>
 
-**Example explanation :**
+### Example Explanation :
+
+In the above example:
+
+- The button background color is set to **red**.
+- The text color is set to **white**.
+
+Color names are simple and easy to use.
+
+---
+
+## 2️⃣ Hexadecimal Colors
+
+Hexadecimal colors start with a `#` symbol followed by six characters.
 
-In the above example, set the background color to "red" or the text color to "white".
+Each pair represents:
 
-### 2.Hexadecimal colors:
+- Red (RR)
+- Green (GG)
+- Blue (BB)
 
-Hexadecimal colors start with a pound sign (#) followed by six characters representing red, green, and blue (RGB) values. Each pair of characters represents a value from 00 (minimum) to FF (maximum).
+Each value ranges from:
 
-**Example :**
+- `00` (minimum)
+- `FF` (maximum)
+
+### Example :
 
 ```html
 <!DOCTYPE html>
@@ -72,28 +91,38 @@ Hexadecimal colors start with a pound sign (#) followed by six characters repres
 </html>
 ```
 
-
-**Output :**
+### Output :
 
 <img src="/css/11/output1.png" alt="output-5" width="600px"/>
 
-**Example explanation :**
+### Example Explanation :
+
+- `#FF0000` represents red.
+- `#FFFFFF` represents white.
+
+Hex colors allow more precise color control.
+
+---
 
-In the above example, sets the background color to red (#FF0000) and the text color to white (#FFFFFF).
+## 3️⃣ RGB
 
-### 3.rgb
+RGB stands for:
+
+Red, Green, Blue
+
+Each value ranges from 0 to 255.
 
 ```js
-rgb(red,  green, blue)
-     |      |      |
-     0      0      0
-     to     to     to
-     255    255    255
+rgb(red, green, blue);
 ```
 
-RGB colors allow you to specify the intensity of red, green, and blue using decimal values ranging from 0 to 255. You can use the rgb() function for this.
+```js
+rgb(0, 0, 0) → Black
+rgb(255, 0, 0) → Red
+rgb(255, 255, 255) → White
+```
 
-**Example :**
+### Example :
 
 ```html
 <!DOCTYPE html>
@@ -114,23 +143,35 @@ RGB colors allow you to specify the intensity of red, green, and blue using deci
 </html>
 ```
 
-**Output :**
+### Output :
 
 <img src="/css/11/output1.png" alt="output-5" width="600px"/>
 
-**Example explanation :**
+### Example Explanation :
 
-In the above example, sets the background color to red (255, 0, 0) and the text color to white (255, 255, 255).
+- `rgb(255, 0, 0)` sets the background color to red.
+- `rgb(255, 255, 255)` sets the text color to white.
 
-### 4.rgba
+RGB allows you to control color intensity using numbers.
+
+---
+
+## 4️⃣ RGBA
+
+RGBA is similar to RGB but includes an extra value called **alpha**.
+
+Alpha controls transparency.
 
 ```js
-rgba(red,  green, blue, alpha)
+rgba(red, green, blue, alpha);
 ```
 
-RGBA colors are similar to RGB, but with an additional alpha channel representing capacity. The alpha value ranges from 0 (transparent) to 1 (opaque). Use the rgba() function to specify these colors.
+Alpha value range:
+
+- `0` → Fully transparent
+- `1` → Fully opaque
 
-**Example :**
+### Example :
 
 ```html
 <!DOCTYPE html>
@@ -140,6 +181,7 @@ RGBA colors are similar to RGB, but with an additional alpha channel representin
     <style>
       .btn {
         background-color: rgba(0, 0, 0, 0);
+        color: black;
       }
     </style>
   </head>
@@ -150,19 +192,36 @@ RGBA colors are similar to RGB, but with an additional alpha channel representin
 </html>
 ```
 
-**Output :**
+### Output :
 
 <img src="/css/11/output2.png" alt="output-5" width="600px"/>
 
-**Example explanation :**
+### Example Explanation :
 
-In the above example, the background color is black with full transparency (0), making it completely invisible.
+- `rgba(0, 0, 0, 0)` means black color with 0 opacity.
+- Since alpha is 0, the background becomes fully transparent (invisible).
 
-### 5. hsl
+RGBA is useful when you need transparency effects.
 
-HSL colors define hue, saturation, and lightness. Hue represents a color on the color wheel, saturation determines the intensity and lightness controls the brightness. Use the hsl() function to specify these colors.
+---
 
-**Example :**
+## 5️⃣ HSL
+
+HSL stands for:
+
+- Hue
+- Saturation
+- Lightness
+
+```js
+hsl(hue, saturation, lightness);
+```
+
+- Hue → 0 to 360 degrees (type of color)
+- Saturation → 0% to 100% (color intensity)
+- Lightness → 0% to 100% (brightness)
+
+### Example :
 
 ```html
 <!DOCTYPE html>
@@ -172,6 +231,7 @@ HSL colors define hue, saturation, and lightness. Hue represents a color on the
     <style>
       .btn {
         background-color: hsl(0, 100%, 50%);
+        color: white;
       }
     </style>
   </head>
@@ -181,17 +241,34 @@ HSL colors define hue, saturation, and lightness. Hue represents a color on the
   </body>
 </html>
 ```
-**Output :**
+
+### Output :
 
 <img src="/css/11/output3.png" alt="output-5" width="600px"/>
 
-**Example explanation :**
+### Example Explanation :
+
+- Hue = 0 → Red
+- Saturation = 100% → Full intensity
+- Lightness = 50% → Normal brightness
+
+This creates pure red color.
+
+---
+
+## 🎨 Color Picker Tools
+
+You can use online tools to select colors easily.
 
-In the above example, sets the background color to pure red (0 degrees), with 100% saturation and 50% lightness.
+- **Color Hunt**
+  [https://colorhunt.co](https://colorhunt.co)
 
-### You can refer to the following websites to choose colors:
+- **HTML Color Codes**
+  [https://htmlcolorcodes.com/color-picker/](https://htmlcolorcodes.com/color-picker/)
 
-1. [colorhunt](https://colorhunt.co)
-   <br/>
+These websites help you:
 
-2. [colorcoder](https://htmlcolorcodes.com/color-picker/)
\ No newline at end of file
+- Generate color palettes
+- Pick matching colors
+- Copy HEX, RGB, or HSL codes
+- Design better UI interfaces
diff --git a/docs/html/15-project-folder-structure-and-path-navigation/15-project-folder-structure-and-path-navigation.md b/docs/html/15-project-folder-structure-and-path-navigation/15-project-folder-structure-and-path-navigation.md
new file mode 100644
index 00000000..4ae0e209
--- /dev/null
+++ b/docs/html/15-project-folder-structure-and-path-navigation/15-project-folder-structure-and-path-navigation.md
@@ -0,0 +1,236 @@
+# Project Folder Structure and Path Navigation
+
+This guide explains **how to organize project files** and **how to navigate folders using HTML paths**. Understanding these basics is essential for beginners to correctly **link web pages** and **display images** without errors.
+
+---
+
+## 1. What Is Folder Navigation in HTML?
+
+Folder navigation means telling the browser **where a file is located** using a _path_.
+
+Paths are mainly used in:
+
+- `<a>` tag → to link one page to another
+- `<img>` tag → to display images
+
+If the path is incorrect, links will not open and images will not appear.
+
+---
+
+## 2. Standard Project Folder Structure
+
+A clean and beginner-friendly project structure looks like this:
+
+```
+project/
+│
+├── index.html        # Main (Home) page
+├── about.html        # Another main-level page
+│
+├── pages/            # Folder for extra pages
+│   └── contact.html
+│
+└── images/           # Folder for images
+    └── logo.png
+```
+
+### Why This Structure Is Important
+
+- Keeps files organized
+- Makes paths easy to understand
+- Prevents confusion as the project grows
+
+---
+
+## 3. Project Rules and Naming Conventions
+
+### a) `index.html` Is the Root File
+
+- `index.html` is the **starting point** of your website
+- Browsers automatically open `index.html` when a folder or site is loaded
+
+Example:
+
+```
+example.com → loads index.html automatically
+```
+
+---
+
+### b) Use Centralized Folders
+
+- **Images:** Store _all_ images inside the `images/` folder
+- **Pages:** Store all extra HTML pages inside the `pages/` folder
+
+This keeps your project clean and professional.
+
+---
+
+### c) Case Sensitivity Matters
+
+File and folder names must match **exactly**.
+
+Incorrect
+
+```html
+<img src="./Images/logo.png" />
+```
+
+Correct
+
+```html
+<img src="./images/logo.png" />
+```
+
+> Tip: Always use **lowercase names** for files and folders.
+
+---
+
+## 4. Path Navigation Symbols (Very Important)
+
+| Symbol    | Meaning            | Explanation                                            |
+| --------- | ------------------ | ------------------------------------------------------ |
+| `./`      | Current folder     | Refers to the folder where the current file is located |
+| `folder/` | Go inside a folder | Moves into a sub-folder                                |
+| `../`     | One folder back    | Moves to the parent folder                             |
+| `../../`  | Two folders back   | Moves up two folder levels                             |
+
+---
+
+## 5. Practical Examples
+
+## Example 1: Linking Files in the Same Folder
+
+### File: `index.html`
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Home Page</title>
+  </head>
+  <body>
+    <h1>Welcome to Home Page</h1>
+
+    <p>This page links to another file in the same folder.</p>
+
+    <a href="./about.html">Go to About Page</a>
+  </body>
+</html>
+```
+
+---
+
+### File: `about.html`
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>About Page</title>
+  </head>
+  <body>
+    <h1>About Page</h1>
+
+    <p>This file is in the same folder as index.html.</p>
+
+    <a href="./index.html">Back to Home</a>
+  </body>
+</html>
+```
+
+---
+
+## Example 2: Linking a File Inside a Folder
+
+### File: `index.html`
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Home Page</title>
+  </head>
+  <body>
+    <h1>Home Page</h1>
+
+    <p>Click below to open Contact page inside pages folder.</p>
+
+    <a href="./pages/contact.html">Contact Us</a>
+  </body>
+</html>
+```
+
+---
+
+## Example 3: Moving One Folder Back (`../`)
+
+### File: `pages/contact.html`
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Contact Page</title>
+  </head>
+  <body>
+    <h1>Contact Page</h1>
+
+    <p>This file is inside the pages folder.</p>
+
+    <!-- Link back to index.html -->
+    <a href="../index.html">Go to Home</a>
+
+    <br /><br />
+
+    <!-- Load image from images folder -->
+    <img src="../images/logo.png" alt="Website Logo" width="200" />
+  </body>
+</html>
+```
+
+---
+
+## Example 4: Moving Two Folders Back (`../../`)
+
+### File Location
+
+`project/folder1/folder2/demo.html`
+
+### File: `demo.html`
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Demo Page</title>
+  </head>
+  <body>
+    <h1>Demo Page</h1>
+
+    <p>This file is two folders deep.</p>
+
+    <a href="../../index.html">Go to Home</a>
+  </body>
+</html>
+```
+
+---
+
+## 6. Common Mistakes & Best Practices
+
+Small mistakes in paths are very common for beginners. Use the table below to avoid them.
+
+| Problem         | Incorrect Example     | Correct Example      |
+| --------------- | --------------------- | -------------------- |
+| Extra slashes   | `pages//contact.html` | `pages/contact.html` |
+| Missing `../`   | `images/logo.png`     | `../images/logo.png` |
+| Wrong case      | `./Images/Logo.PNG`   | `./images/logo.png`  |
+| Spaces in names | `my images/pic.jpg`   | `my-images/pic.jpg`  |
+
+Happy Coding!
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..f0c213ca
--- /dev/null
+++ b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Div Tag</title>
+  </head>
+  <body>
+    <div>
+      <h2>Pizza</h2>
+      <p>Pizza is a delicious Italian food.</p>
+    </div>
+
+    <div>
+      <h2>Biryani</h2>
+      <p>Biryani is a spicy Indian rice dish.</p>
+    </div>
+  </body>
+</html>