codeharborhub · ajay-dhangar · Mar 3, 2026 · Mar 3, 2026
@@ -0,0 +1,8 @@
+{
+  "label": "NPM",
+  "position": 5,
+  "link": {
+    "type": "generated-index",
+    "description": "Learn how to manage packages, dependencies, and project metadata using the world's most popular package manager."
+  }
+}
@@ -0,0 +1,69 @@
+---
+sidebar_position: 3
+title: "Adding and Removing Packages"
+sidebar_label: "3. Installing Dependencies"
+description: "Master the npm install command and understand the difference between production and development tools."
+---
+
+When you find a cool tool on the [NPM website](https://www.npmjs.com), you need to "install" it to use it in your code. 
+
+There are two main ways to install packages, depending on **when** you need them.
+
+## 1. Production Dependencies (`--save`)
+
+These are the "Main Ingredients." Your website **needs** these to function for the user. If you are building a calculator, the math library you use is a production dependency.
+
+**The Command:**
+```bash
+npm install lodash
+```
+
+* **What happens?** NPM downloads the code into `node_modules` and adds it to the `"dependencies"` section of your `package.json`.
+* **Shortcut:** You can just type `npm i lodash`.
+
+## 2. Dev Dependencies (`--save-dev`)
+
+These are the "Kitchen Tools." You need a knife and a pan to **cook** the meal, but the customer doesn't eat the knife!
+
+"DevDeps" are tools you only use while you are coding (like a tool that auto-refreshes your browser or a code-cleaner).
+
+**The Command:**
+
+```bash
+npm install nodemon --save-dev
+```
+
+* **Shortcut:** You can use `-D` as a shortcut: `npm i nodemon -D`.
+* **Look inside:** These will appear in a special `"devDependencies"` section in your `package.json`.
+
+## What is this `package-lock.json` file?
+
+The moment you install your first package, a new, scary-looking file called `package-lock.json` will appear.
+
+**Don't delete it!** Think of it as a **Security Seal**. While `package.json` says "I need a math library," the `package-lock.json` says "I need **exactly** version 4.17.21 of the math library with this specific security ID."
+
+It ensures that if 10 people are working on the same project at **CodeHarborHub**, everyone has the **exact same** version of the code.
+
+## Removing a Package
+
+If you decide you don't like a tool, don't just delete the folder manually. Use the "clean-up" command:
+
+```bash
+npm uninstall lodash
+```
+
+This safely removes the code from `node_modules` and deletes the line from your `package.json` recipe.
+
+## Summary Comparison
+
+| Type | Command | Where it goes | Purpose |
+| --- | --- | --- | --- |
+| **Dependency** | `npm i <name>` | `"dependencies"` | Needed for the website to run. |
+| **DevDependency** | `npm i <name> -D` | `"devDependencies"` | Only needed by the developer. |
+
+## Summary Checklist
+
+* [x] I can install a package using `npm i`.
+* [x] I understand that `-D` is for tools only I (the developer) use.
+* [x] I know that `package-lock.json` is a security lock for versions.
+* [x] I can use `npm uninstall` to keep my project clean.
@@ -0,0 +1,55 @@
+---
+sidebar_position: 1
+title: "What is NPM?"
+sidebar_label: "1. Intro to NPM"
+description: "A beginner-friendly introduction to the world's most popular code warehouse."
+---
+
+Imagine you are building a Lego castle. You *could* carve every single brick out of raw plastic yourself, but that would take years! Instead, you go to the store and buy a "Castle Kit" that already has the bricks, the windows, and the doors ready to snap together.
+
+**NPM (Node Package Manager)** is that store for developers. It is a massive online warehouse filled with over 2 million "Kits" (we call them **Packages**) that you can download and use in your own projects for free.
+
+## Why Do We Use NPM?
+
+In the early days of the web, if you wanted a "Slide-out Menu" or a "Date Picker," you had to write every single line of code from scratch.
+
+**With NPM, it’s a one-sentence process:**
+* **You:** "Hey NPM, I need a tool that handles dates."
+* **NPM:** "Here is a package called `date-fns`. I've put it in your project folder. Enjoy!"
+
+## The Three Parts of NPM
+
+NPM isn't just one thing; it’s a system with three parts that work together:
+
+1.  **The Website ([npmjs.com](https://www.npmjs.com)):** This is the "Catalog." You go here to search for tools, read reviews, and see how to use them.
+2.  **The Registry:** This is the actual "Warehouse" in the cloud where all the code is stored safely.
+3.  **The CLI (Command Line Interface):** This is the "Delivery Truck." You type commands in your terminal to bring code from the warehouse to your computer.
+
+## How Do I Get NPM?
+
+NPM comes automatically when you install **Node.js**. Think of Node.js as the engine and NPM as the toolbox that comes in the trunk.
+
+### Let's check if you have it:
+1.  Open your **Terminal** (in VS Code, press <code>Ctrl + `</code>).
+2.  Type this command and hit Enter:
+
+    ```bash
+    npm -v
+    ```
+3.  **The Result:** If you see a version number (like `10.2.4`), you are ready to go!
+
+## Key Vocabulary for Beginners
+
+* **Package:** A folder containing pre-written code that solves a specific problem.
+* **Dependency:** A package that your project "depends" on to work.
+* **Registry:** The giant database where all packages live.
+* **Install:** The act of downloading a package into your project.
+
+## Summary Checklist
+* [x] I understand that NPM lets me **borrow** code so I don't have to write everything from scratch.
+* [x] I know that the **Registry** is where the code is stored.
+* [x] I have verified that NPM is installed on my computer.
+
+:::info Pro Tip
+At **CodeHarborHub**, we use NPM to install powerful tools like **React**, **Tailwind CSS**, and **Vite**. Learning NPM is the "key" that unlocks professional web development!
+:::
@@ -0,0 +1,86 @@
+---
+sidebar_position: 4
+title: "Final Challenge: The Terminal Cow"
+sidebar_label: "4. NPM Challenge"
+description: "Put your NPM skills to the test by creating a project and running your first package."
+---
+
+It’s time to use your "Developer Warehouse" (NPM) to add a fun feature to your computer. We are going to install a package called **Cowsay**. 
+
+Why? Because if you can install a cow that talks, you can install **React**, **Vite**, or any other professional tool!
+
+## The Mission Blueprint
+
+Follow these **4 Steps** to complete your graduation:
+
+### 1. The Setup
+Create a brand new folder on your computer named `my-npm-adventure`. Open your terminal (or VS Code) inside that folder and initialize your "Recipe File":
+```bash
+npm init -y
+```
+
+*Check: Do you see a `package.json` file now? Good!*
+
+### 2. The Installation
+
+Now, let's "borrow" the Cowsay code from the warehouse.
+
+```bash
+npm install cowsay
+```
+
+*Check: Open your `package.json`. You should see `cowsay` listed under `"dependencies"`. Also, notice the giant `node_modules` folder that just appeared!*
+
+### 3. The Execution
+
+To run a package we just downloaded, we use a special command called `npx` (think of it as "NPM Execute").
+
+```bash
+npx cowsay "CodeHarborHub is the best!"
+```
+
+**Look at your terminal!** A cow should appear, speaking the words you typed. You didn't write the code to draw that cow; you used the power of NPM!
+
+## Level Up: Create a Custom Script
+
+Professional developers don't like typing long commands. They create **Shortcuts**.
+
+1. Open your `package.json` file.
+2. Find the `"scripts"` section.
+3. Add a new line called `"moo"` like this:
+
+```json {4}
+"scripts": {
+  "test": "echo \"Error: no test specified\" && exit 1",
+  "start": "node index.js",
+  "moo": "cowsay CodeHarborHub Graduation!"
+},
+```
+
+4. Now, go back to your terminal and run your shortcut:
+
+```bash
+npm run moo
+```
+
+## What did you just learn?
+
+By completing this challenge, you have mastered the **Standard Developer Workflow**:
+
+* **Init:** Created a project foundation.
+* **Install:** Brought in external code.
+* **Execute:** Ran a third-party tool.
+* **Script:** Created a custom automation shortcut.
+
+## Graduation Checklist
+
+* [x] I successfully created a `package.json` using `npm init`.
+* [x] I installed a package and saw it in `node_modules`.
+* [x] I ran a package using the `npx` command.
+* [x] I created a custom script and ran it with `npm run`.
+
+:::success 🎉 CONGRATULATIONS!
+You have officially completed the **NPM Basics** module. You are no longer just a "Coder"—you are a "Developer" who knows how to use the global ecosystem of software.
+
+**What's Next?** You are now fully prepared for the **Intermediate Frontend** track, where we will use NPM to install **React** and build modern, high-speed web applications!
+:::
@@ -0,0 +1,73 @@
+---
+sidebar_position: 2
+title: "Project's ID Card: package.json"
+sidebar_label: "2. package.json"
+description: "Learn how the package.json file acts as the brain and ID card of your project."
+---
+
+Every professional JavaScript project has a file named `package.json` sitting in its root folder. If your project was a person, this file would be its **ID Card** and its **Backpack Inventory**.
+
+Without this file, NPM doesn't know what tools your project needs to run.
+
+## How to Create One
+
+You don't write this file from scratch. You let NPM build it for you! 
+
+1. Open your terminal in a new, empty folder.
+2. Type the following "Magic Command":
+
+    ```bash
+    npm init -y
+    ```
+
+:::note
+**What does `-y` do?** It stands for "Yes." It tells NPM to skip all the boring questions and just create a standard ID card for you instantly.
+:::
+
+## Reading the ID Card
+
+Once you run that command, a new file appears. Let's look inside and see what the main parts mean:
+
+```json title="package.json"
+{
+  "name": "my-awesome-project",
+  "version": "1.0.0",
+  "description": "Learning NPM at CodeHarborHub",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {}
+}
+```
+
+### The Key Parts:
+
+* **`name`**: The name of your project (no spaces allowed!).
+* **`version`**: Helps you track updates (1.0.0 is the starting point).
+* **`scripts`**: These are **shortcuts**. Instead of typing a 50-character command, you can create a 1-word shortcut like `"start"`.
+* **`dependencies`**: This is the most important part. It is a list of all the "borrowed code" (packages) your project is currently using.
+
+## The `node_modules` Folder (The Storage Room)
+
+As soon as you start installing packages, you will see a new folder appear called `node_modules`.
+
+* **What it is:** This is where the actual code you borrowed from NPM is stored.
+* **The Warning:** This folder can get **huge** (sometimes containing thousands of files).
+* **The Pro Rule:** Never edit anything inside `node_modules`. If you delete it by accident, don't panic! Just type `npm install`, and NPM will read your `package.json` and download everything back for you.
+
+## Analogy: The Recipe vs. The Ingredients
+
+Think of it like cooking:
+
+* **`package.json`** is the **Recipe**. it's just a piece of paper that lists what you need.
+* **`node_modules`** are the **Ingredients**. They are the actual heavy items in your kitchen.
+
+**Why is this cool?** When you share your code on GitHub, you **only** share the recipe (`package.json`). You don't share the heavy ingredients. When a friend downloads your project, they just "cook" it by running `npm install`.
+
+## Summary Checklist
+
+* [x] I know that `npm init -y` creates my project's ID card.
+* [x] I understand that `package.json` tracks my borrowed packages.
+* [x] I know that `dependencies` is the list of tools I'm using.
+* [x] I promise never to upload the `node_modules` folder to GitHub!
@@ -7,16 +7,11 @@ hide_title: false
 toc_min_heading_level: 2
 keywords: [codeharborhub, docusaurus, tutorials]
 description: "Launch or advance your tech career with CodeHarborHub's free, project-based tutorials. Master HTML, CSS, JavaScript, React, Node.js, Python, AI, and more."
-displayed_sidebar: null
 ---
 
-<head>
-  <style>{`
-    :root {
-      --doc-item-container-width: 60rem;
-    }
-  `}</style>
-</head>
+{/* 
+displayed_sidebar: null 
+*/}
 
 **CodeHarborHub** is your free, open-source resource for mastering modern technology. Whether you’re a **beginner aiming to land your first tech job** or a **professional looking to master the latest frameworks**, we provide the comprehensive, project-based tutorials you need to succeed.
 
@@ -48,8 +43,6 @@ We focus on delivering **real-world value** that directly impacts your career an
 * **Community & Open Source:** Join an active community of developers. Get support, share knowledge, and contribute to real-world open-source projects.
 * **Future-Proof Skills:** Our curriculum is continuously updated by experts to cover the latest frameworks, technologies, and industry best practices.
 
-<AdsComponent />
-
 ## Start Your Learning Path
 
 Select a technology below to dive into our structured tutorials. Each path is designed to take you from the fundamentals to building complete, robust applications.

@@ -4,6 +4,7 @@
 
 :root {
   --ifm-color-primary: #2e93e2;
+  --ifm-background-color: #FFFDD0; /* background color*/
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;
   --ifm-color-primary-darkest: #205d3b;
@@ -49,6 +50,7 @@
 
 [data-theme="dark"] {
   --ifm-color-primary: #48bf84;
+  --ifm-background-color: #121212; /* background color */
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
   --ifm-color-primary-darkest: #1a8870;
@@ -253,9 +255,9 @@ mark {
   -webkit-text-fill-color: transparent;
 }
 
-/* [data-theme='dark'] #__docusaurus_skipToContent_fallback {
-  background: linear-gradient(rgba(15, 23, 42, 0.796), rgba(15, 23, 42, 0.23));
-} */
+#__docusaurus_skipToContent_fallback {
+  background: var(--ifm-background-color);
+}
 [data-theme="dark"] .navbar {
   background: rgba(15, 23, 42, 0.862);
   border-bottom: 1px solid #4e8da0db;