Fixed All issues

Author: ajay-dhangar

absolute-beginners/full-stack/css/box-model.mdx

@@ -64,7 +64,7 @@ Use these for more control:
 
 ## 4. The "Box-Sizing" Problem
 
-By default, if you give a box a width of `200px` and then add `20px` of padding, the box actually becomes **240px** wide ($200 + 20 \text{ left} + 20 \text{ right}$). This often breaks layouts!
+By default, if you give a box a width of `200px` and then add `20px` of padding, the box actually becomes **240px** wide (200 + 20 \text{ left} + 20 \text{ right}). This often breaks layouts!
 
 ### The Fix: `border-box`
 

absolute-beginners/full-stack/css/grid.mdx

@@ -91,8 +91,8 @@ Here is how you build a professional website structure in just a few lines of CS
 }
 
 header { grid-column: 1 / 3; }
-nav    { grid-row: 2 / 3; }
-main   { grid-row: 2 / 3; }
+nav    { grid-column: 1 / 2; grid-row: 2 / 3; }
+main   { grid-column: 2 / 3; grid-row: 2 / 3; }
 footer { grid-column: 1 / 3; }
 ```
 

absolute-beginners/full-stack/html/forms.mdx

@@ -76,7 +76,7 @@ graph LR
 <label>Choose a City:</label>
 <select name="city">
   <option value="indore">Indore</option>
-  <option value="mhopal">Bhopal</option>
+  <option value="bhopal">Bhopal</option>
   <option value="mumbai">Mumbai</option>
 </select>
 ```

absolute-beginners/full-stack/internet-basics/browsers.mdx

@@ -88,7 +88,7 @@ The browser combines the DOM and the CSSOM into a **Render Tree**.
 </TabItem>
 <TabItem value="layout" label="4. Layout (Reflow)">
 
-Now the browser knows *what* to show, it needs to know **where** to show it. The **Layout** stage calculates the exact exact coordinates and size (width, height) of every element on the screen.
+Now the browser knows *what* to show, it needs to know **where** to show it. The **Layout** stage calculates the exact coordinates and size (width, height) of every element on the screen.
 
 *This stage is re-run (called a **Reflow**) whenever you resize the window or change an element's size with JavaScript.*
 

absolute-beginners/full-stack/javascript/_category_.json

@@ -0,0 +1,9 @@
+{
+  "label": "JavaScript",
+  "position": 5,
+  "link": {
+    "type": "generated-index",
+    "title": "JavaScript: The Logic of the Web",
+    "description": "JavaScript is the programming language that brings your web pages to life. While HTML provides structure and CSS provides style, JavaScript adds the brain—allowing you to create interactive features, handle data, and build complex applications."
+  }
+}

absolute-beginners/full-stack/javascript/functions.mdx

@@ -1 +1,104 @@
-<ComingSoon />
+---
+title: "JavaScript Functions"
+sidebar_label: "3. Functions"
+sidebar_position: 3
+description: "Learn how to write reusable blocks of code to make your programs efficient."
+---
+
+Imagine you are a chef. Instead of writing down the steps to bake a cake every single time someone orders one, you just write the recipe once and give it a name: **"BakeCake"**. Whenever you need a cake, you just follow that named recipe.
+
+In JavaScript, a **Function** is a reusable block of code designed to perform a particular task.
+
+## 1. How to Define a Function
+
+Creating a function is like building a machine. It has three main parts:
+
+1.  **Declaration:** Using the `function` keyword.
+2.  **Name:** A descriptive name (using camelCase).
+3.  **Parameters:** Values you "feed" into the machine (inside the parentheses `()`).
+4.  **Body:** The actual code inside the curly braces `{}`.
+
+```javascript
+function sayHello(name) {
+    console.log("Hello " + name + "! Welcome to CodeHarborHub.");
+}
+```
+
+## 2. Calling (Using) a Function
+
+Defining a function doesn't run the code inside. To use the machine, you must **"Call"** it by using its name followed by parentheses.
+
+```javascript
+// Calling the function
+sayHello("Ajay"); 
+// Output: Hello Ajay! Welcome to CodeHarborHub.
+
+sayHello("Student");
+// Output: Hello Student! Welcome to CodeHarborHub.
+```
+
+## 3. Return Values
+
+Sometimes, you don't just want a function to print a message; you want it to **give you something back** (like a calculator giving you the result of a sum). We use the `return` keyword for this.
+
+```javascript
+function addNumbers(a, b) {
+    return a + b; // Sends the result back to whoever called it
+}
+
+let result = addNumbers(5, 10);
+console.log(result); // Output: 15
+```
+
+:::warning The Return Rule
+Once a function hits a `return` statement, it stops immediately. Any code written *after* the return inside that function will be ignored.
+:::
+
+## 4. Parameters vs. Arguments
+
+These terms are often confused, but the difference is simple:
+
+* **Parameters:** The "placeholders" listed in the function definition (e.g., `a` and `b`).
+* **Arguments:** The "real values" you pass to the function when you call it (e.g., `5` and `10`).
+
+## 5. Arrow Functions (The Modern Way)
+
+In modern JavaScript (ES6+), developers use a shorter syntax called **Arrow Functions**. It's the "cool" way to write functions at **CodeHarborHub**.
+
+<Tabs>
+  <TabItem value="traditional" label="Traditional" default>
+    ```js
+    function multiply(x, y) {
+        return x * y;
+    }
+    ```
+  </TabItem>
+  <TabItem value="arrow" label="Arrow Function">
+    ```js
+    const multiply = (x, y) => x * y;
+    ```
+
+    <em>(If it's just one line, you don't even need the "return" keyword!)</em>
+
+  </TabItem>
+</Tabs>
+
+## Practice: The "Tip Calculator"
+
+Try building this reusable tool in your `script.js`:
+
+```javascript
+function calculateTip(billAmount, tipPercentage) {
+    let tip = billAmount * (tipPercentage / 100);
+    let total = billAmount + tip;
+    return "Your total bill is: " + total;
+}
+
+// Testing our machine
+console.log(calculateTip(100, 15)); // Output: Your total bill is: 115
+console.log(calculateTip(250, 10)); // Output: Your total bill is: 275
+```
+
+:::info Keep it Simple
+A good function should do **one thing** and do it well. If your function is doing 5 different tasks, it's better to break it into 5 smaller functions!
+:::

absolute-beginners/full-stack/javascript/introduction.mdx

@@ -1 +1,83 @@
-<ComingSoon />
+---
+title: "Introduction to JavaScript"
+sidebar_label: "1. Introduction"
+sidebar_position: 1
+description: "Learn what JavaScript is and how it adds interactivity to your websites."
+---
+
+If HTML is the **skeleton** and CSS is the **skin**, then **JavaScript (JS)** is the **brain**. 
+
+JavaScript is what makes a website *do* things. It handles what happens when you click a button, how data is saved, and how information updates without refreshing the whole page.
+
+## 1. The Three Layers of a Web Page
+
+To be a Full-Stack developer, you must understand how these three work together:
+
+1.  **HTML (Structure):** "There is a button here."
+2.  **CSS (Style):** "The button is blue and rounded."
+3.  **JavaScript (Logic):** "When the button is clicked, show a 'Thank You' message."
+
+## 2. Where Does JavaScript Live?
+
+Like CSS, you can add JavaScript to your project in different ways. At **CodeHarborHub**, we always recommend the **External** method to keep your "brain" separate from your "body."
+
+<Tabs>
+  <TabItem value="external" label="External (Recommended)" default>
+    Create a file named <code>script.js</code>.
+    <br/>
+    <strong>In your HTML (at the bottom of &lt;body&gt;):</strong> `script src="script.js"></script>`
+  </TabItem>
+  <TabItem value="internal" label="Internal">
+    Write code inside `<script>` tags.
+    <br/>
+    <strong>In your HTML:</strong> `<script> alert('Hello!'); </script>`
+  </TabItem>
+</Tabs>
+
+## 3. Your First Commands
+
+JavaScript is a language of instructions. Here are the three most common ways to see if your "brain" is working:
+
+1.  **`console.log()`**: Prints a message in the browser's hidden "Developer Console." This is for developers to test things.
+2.  **`alert()`**: Pops up a message box for the user.
+3.  **`prompt()`**: Asks the user to type something in.
+
+```javascript
+console.log("Welcome to CodeHarborHub!");
+alert("Warning: Learning JS is addictive!");
+```
+
+## 4. The Developer Console
+
+Every browser has a secret tool for developers. 
+1. Right-click any website.
+2. Click **Inspect**.
+3. Click the **Console** tab.
+
+You can actually type JavaScript directly into this console and it will run instantly!
+
+## Let's Try It!
+
+1. Open your project folder.
+2. Create a file named `index.html` and a file named `script.js`.
+3. Link them in your HTML:
+   ```html title="index.html"
+   <body>
+     <h1>My JS Test</h1>
+     <script src="script.js"></script>
+   </body>
+   ```
+4. In `script.js`, type:
+   ```javascript title="script.js"
+   alert("JavaScript is connected!");
+   console.log("I am a future Full-Stack Developer.");
+   ```
+5. Open your HTML in the browser. If the popup appears, you've just written your first script!
+
+:::tip Why learn JS?
+JavaScript is the most popular programming language in the world. Once you learn it for the web, you can use it to build mobile apps, desktop software, and even control robots!
+:::
+
+:::info Placement
+Always put your `<script>` tag at the very **bottom** of your `<body>`. This ensures your HTML (the skeleton) loads before the JavaScript (the brain) starts trying to control it.
+:::

absolute-beginners/full-stack/javascript/variables.mdx

@@ -1 +1,94 @@
-<ComingSoon />
+---
+title: "JavaScript Variables"
+sidebar_label: "2. Variables"
+sidebar_position: 2
+description: "Learn how to store and manage data using let and const in JavaScript."
+---
+
+In programming, a **Variable** is a container for storing data values. Imagine you are moving into a new house; you put your things into boxes and put a label on each box so you know what's inside. 
+
+Variables work exactly like that!
+
+## 1. How to Create a Variable
+
+To create (or "declare") a variable in JavaScript, we follow a simple pattern:
+
+```javascript
+let name = "Ajay";
+```
+
+* **`let`**: The keyword that tells the computer we are creating a variable.
+* **`name`**: The unique name of the box (the label).
+* **`=`**: The assignment operator (it puts the value into the box).
+* **`"Ajay"`**: The actual data being stored.
+
+## 2. `let` vs `const`
+
+In modern JavaScript, we have two main ways to create variables. The choice depends on whether the value will change later.
+
+<Tabs>
+  <TabItem value="let" label="let (Changeable)" default>
+    Use `let` when the value of the variable <strong>will change</strong> later in your program.
+    
+    ```js
+    let score = 0;
+    score = 10; // This is allowed!
+    ```
+
+  </TabItem>
+  <TabItem value="const" label="const (Constant)">
+    Use `const` when the value <strong>should never change</strong>. It stands for "Constant."
+    
+    ```js
+    const birthYear = 2000;
+    birthYear = 2005; // ❌ ERROR! You cannot change a constant.
+    ```
+  </TabItem>
+</Tabs>
+
+## 3. Rules for Naming Variables
+
+You can't just name your variables anything. JavaScript has a few strict rules:
+
+1.  **No Spaces:** Use `userAge`, not `user age`.
+2.  **Camel Case:** In JS, we start the first word with a lowercase letter and every word after with a Capital (e.g., `isUserLoggedIn`).
+3.  **Start with Letters:** Names cannot start with a number.
+4.  **Meaningful Names:** Don't use `let x = "Apple"`. Instead, use `let fruit = "Apple"`. It makes your code easier to read!
+
+## 4. Using Variables
+
+Once you store a value, you can use the variable name instead of the value itself.
+
+```javascript
+let city = "Mandsaur";
+console.log("I live in " + city); 
+// Output: I live in Mandsaur
+
+city = "Indore";
+console.log("Now I live in " + city);
+// Output: Now I live in Indore
+```
+
+## Let's Practice: The Greeting Script
+
+Try writing this in your `script.js`:
+
+1. Create a variable called `developerName` and store your name in it.
+2. Create a variable called `totalProjects` and store a number (like `5`).
+3. Use `console.log` to print a message combining both.
+
+```javascript
+const developerName = "A Master"; // Using const because your name doesn't change often
+let totalProjects = 3;            // Using let because you will build more!
+
+console.log("Hello, my name is " + developerName);
+console.log("I have built " + totalProjects + " projects.");
+```
+
+:::info Always Default to Const
+Most professional developers use `const` for everything by default. They only switch to `let` if they realize they absolutely *need* to change the value later. This prevents bugs!
+:::
+
+:::warning Note on `var`
+You might see some older tutorials using the keyword `var`. At **CodeHarborHub**, we avoid `var` because it is old and can cause strange bugs in your code. Stick to `let` and `const`!
+:::