codeharborhub · ajay-dhangar · Feb 24, 2026 · Feb 24, 2026
@@ -1,6 +1,7 @@
 ---
 title: Frontend Development Roadmap 2026
 sidebar_label: Frontend Beginner
+position: 1
 description: "A step-by-step guide to becoming a frontend developer in 2026."
 ---
 
@@ -10,16 +11,10 @@ Welcome to **CodeHarborHub**! This guide is designed to take you from "Hello Wor
 
 Here is the bird's-eye view of your journey. Don't worry about the jargon yet; we’ll break it down piece by piece.
 
-```mermaid
-graph TD
-    A[HTML] --> B[CSS]
-    B --> C[JavaScript]
-    C --> D[Git & GitHub]
-    D --> E[npm & Tooling]
-    E --> F[React]
-    F --> G[Tailwind CSS]
-    G --> H[Vitest]
+```mdx-code-block
+import DocCardList from '@theme/DocCardList';
 
+<DocCardList />
 ```
 
 ## 1. The Core Fundamentals (The "Big Three")

@@ -0,0 +1,8 @@
+{
+  "label": "JavaScript",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "Getting started with JavaScript. This is the start of the most exciting part of the frontend journey. If HTML is the structure and CSS is the skin, JavaScript is the brain."
+  }
+}
@@ -0,0 +1,125 @@
+---
+sidebar_position: 1
+title: "Hello JavaScript!"
+sidebar_label: Intro to JavaScript
+description: "The ultimate beginner's guide to starting your programming journey."
+---
+
+Think of your favorite website. When you click a "Like" button and the heart turns red, or when you type in a search bar and suggestions pop up that is **JavaScript** in action.
+
+### The Big Three: A Simple Analogy
+
+If building a website is like building a house:
+1.  **HTML** is the **Structure** (The walls, doors, and windows).
+2.  **CSS** is the **Decoration** (The paint, wallpaper, and furniture).
+3.  **JavaScript** is the **Electricity & Plumbing** (The lights that turn on when you flip a switch and the water that flows when you turn a tap).
+
+## What is JavaScript, Exactly?
+
+JavaScript is a **Programming Language**. It allows you to tell the browser (Chrome, Safari, Edge) to do specific tasks. It is the most popular language in the world because it is the only language that runs natively in every web browser.
+
+### What can you do with it?
+
+* **Make things move:** Create animations or sliders.
+* **Handle Data:** Calculate a math problem or process a form.
+* **Update Content:** Change text or images without refreshing the page.
+* **Listen:** "Wait" for the user to click, scroll, or type.
+
+## Where Do We Write JavaScript?
+
+You don't need fancy software to start. You just need a text editor and a browser. There are three ways to add JS to your site:
+
+### 1. The Console (The Secret Playground)
+
+Every browser has a hidden "Console" for developers to test code. 
+* **Try it:** Right-click this page -> **Inspect** -> Click the **Console** tab.
+* Type `alert("Hello World");` and hit Enter. 
+
+### 2. Internal (The Script Tag)
+
+You can write code directly inside your HTML file using the `<script>` tag.
+
+```html
+<script>
+  console.log("This code runs inside the HTML file!");
+</script>
+```
+
+### 3. External (The Professional Way)
+
+Just like CSS, we keep our JavaScript in its own file (e.g., `script.js`). This keeps our project clean.
+
+> Create a file named `script.js` and link it at the very bottom of your HTML, just before the closing `</body>` tag.
+
+**In your HTML (at the very bottom of the body):**
+
+```html title="index.html"
+<body>
+    <h1>Welcome to JS!</h1>
+
+    <script src="script.js"></script>
+</body>
+```
+
+## Your First Tool: The Console
+
+Before we build complex apps, we need a way to "talk" to the computer. We use the **Console**. Think of it as a private chat room between you and your code.
+
+<LiteYouTubeEmbed
+  id="BMFbW9giTuw"
+  params="autoplay=1&autohide=1&showinfo=0&rel=0"
+  title="How To Run JavaScript In Google Chrome | Chrome Developer Tools"
+  poster="maxresdefault"
+  webp
+/>
+
+### Try This Right Now:
+
+1. Open any website (like https://www.google.com).
+2. Right-click and select **Inspect**.
+3. Click the **Console** tab at the top.
+4. Type this exactly and hit Enter: `alert("I am a JavaScript Developer!");`
+
+**What happened?** You just commanded the browser to take an action!
+
+## Interactive Playground
+
+Experiment with the code below. Try changing the text inside the quotes in the JS tab and see what happens when you click the button.
+
+<CodePenEmbed
+title="Your First JS Interaction"
+penId="RNGwVxm"
+/>
+
+
+## The "Logic" of Programming
+
+Learning JavaScript is like learning a **Recipe**. You have:
+
+1. **Storage:** Storing ingredients (Variables).
+2. **Instructions:** What to do with them (Functions).
+3. **Choices:** What to do if something happens (If/Else statements).
+
+## How JavaScript "Thinks"
+
+Programming is just giving a list of instructions to a computer.
+
+When you write JS, you are creating a "Recipe" for the browser to follow:
+
+1. **Find** the button on the page.
+2. **Listen** for a click.
+3. **Run** a specific action when that click happens.
+
+## Summary Checklist
+
+* [x] I understand that JS adds **interactivity** (behavior).
+* [x] I know that `script.js` is the standard file name for JS.
+* [x] I learned how to open the **Browser Console**.
+* [x] I triggered my first `alert()`.
+* [x] I know how to find the **Developer Console**.
+* [x] I know that `<script src="...">` links an external file.
+* [x] I successfully ran an `alert()` or `console.log()`.
+
+:::tip Did You Know?
+JavaScript was created in just **10 days** back in 1995! Today, it is the most popular programming language in the world, used by 98% of all websites.
+:::
@@ -0,0 +1,79 @@
+---
+sidebar_position: 2
+title: "Variables: Giving JS a Memory"
+sidebar_label: Variables
+description: "Learn how to store and manage data using let and const."
+---
+
+Imagine you are moving into a new house. You have a lot of stuff, so you put your things into **boxes** and write **labels** on them (like "Kitchen Supplies" or "Books"). 
+
+In JavaScript, a **Variable** is just a box with a label that holds a piece of information.
+
+## How to Create a Variable
+
+To create a variable, we use a keyword, give it a name, and assign a value to it using the `=` sign.
+
+```javascript
+let playerName = "Ajay";
+let playerScore = 100;
+
+```
+
+### The Three Parts of a Variable:
+
+1. **The Keyword:** (`let` or `const`) This tells the computer you are creating a new "box."
+2. **The Label (Name):** This is how you will refer to the data later.
+3. **The Value:** The actual data you are storing inside the box.
+
+## `let` vs `const` (The Golden Rule)
+
+In modern JavaScript (2026), we use two main keywords. Choosing the right one is very important!
+
+### 1. `let` (The Changeable Box)
+
+Use `let` when the information inside the box **will change** later (like a score in a game or a timer).
+
+```javascript
+let score = 0;
+score = 10; // This is allowed!
+```
+
+### 2. `const` (The Locked Box)
+
+Short for "Constant." Use `const` for information that **should never change** (like your birthday or a fixed setting).
+*Pro Tip: If you aren't sure, use `const` first!*
+
+```javascript
+const birthYear = 2000;
+birthYear = 2005; // ❌ ERROR! You can't change a constant.
+```
+
+## Interactive Playground
+
+Let's see how variables work in real-time. In this CodePen, we have a "Counter" app. One variable keeps track of the number!
+
+<CodePenEmbed
+title="JS Variables Counter"
+penId="dPpyRGb"
+/>
+
+### Challenge Tasks:
+
+1. In the JS tab, look for `let count = 0;`. Change the `0` to `100`. Notice the starting number changes!
+2. Try changing the keyword `let` to `const`. Click the "Increase" button. Does it still work? (Hint: Check your console for an error!)
+
+## Naming Rules (The "Dos and Don'ts")
+
+You can't just name your variables anything. JavaScript has a few rules:
+
+* **Do** use **camelCase**: Start with a small letter, and every new word starts with a Capital (e.g., `userProfilePicture`).
+* **Do** use descriptive names: `let price = 10;` is better than `let p = 10;`.
+* **Don't** start with a number: `let 1stPlace = "Gold";` will break your code.
+* **Don't** use spaces: `let user name = "Ajay";` is not allowed.
+
+## Summary Checklist
+
+* [x] I understand that a variable is a **container** for data.
+* [x] I know that `let` is for values that change.
+* [x] I know that `const` is for values that stay the same.
+* [x] I practiced naming variables using **camelCase**.