Skip to content

Commit 5ea7017

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #211 from codeharborhub/dev-1
Done NPM docs/tutorials
2 parents 2eb15b8 + eb1761b commit 5ea7017

8 files changed

Lines changed: 299 additions & 14 deletions

File tree

‎absolute-beginners/frontend-beginner/npm/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "NPM",
3+
"position": 5,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Learn how to manage packages, dependencies, and project metadata using the world's most popular package manager."
7+
}
8+
}

‎absolute-beginners/frontend-beginner/npm/index.mdx‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎absolute-beginners/frontend-beginner/npm/installing-deps.mdx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
sidebar_position: 3
3+
title: "Adding and Removing Packages"
4+
sidebar_label: "3. Installing Dependencies"
5+
description: "Master the npm install command and understand the difference between production and development tools."
6+
---
7+
8+
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.
9+
10+
There are two main ways to install packages, depending on **when** you need them.
11+
12+
## 1. Production Dependencies (`--save`)
13+
14+
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.
15+
16+
**The Command:**
17+
```bash
18+
npm install lodash
19+
```
20+
21+
* **What happens?** NPM downloads the code into `node_modules` and adds it to the `"dependencies"` section of your `package.json`.
22+
* **Shortcut:** You can just type `npm i lodash`.
23+
24+
## 2. Dev Dependencies (`--save-dev`)
25+
26+
These are the "Kitchen Tools." You need a knife and a pan to **cook** the meal, but the customer doesn't eat the knife!
27+
28+
"DevDeps" are tools you only use while you are coding (like a tool that auto-refreshes your browser or a code-cleaner).
29+
30+
**The Command:**
31+
32+
```bash
33+
npm install nodemon --save-dev
34+
```
35+
36+
* **Shortcut:** You can use `-D` as a shortcut: `npm i nodemon -D`.
37+
* **Look inside:** These will appear in a special `"devDependencies"` section in your `package.json`.
38+
39+
## What is this `package-lock.json` file?
40+
41+
The moment you install your first package, a new, scary-looking file called `package-lock.json` will appear.
42+
43+
**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."
44+
45+
It ensures that if 10 people are working on the same project at **CodeHarborHub**, everyone has the **exact same** version of the code.
46+
47+
## Removing a Package
48+
49+
If you decide you don't like a tool, don't just delete the folder manually. Use the "clean-up" command:
50+
51+
```bash
52+
npm uninstall lodash
53+
```
54+
55+
This safely removes the code from `node_modules` and deletes the line from your `package.json` recipe.
56+
57+
## Summary Comparison
58+
59+
| Type | Command | Where it goes | Purpose |
60+
| --- | --- | --- | --- |
61+
| **Dependency** | `npm i <name>` | `"dependencies"` | Needed for the website to run. |
62+
| **DevDependency** | `npm i <name> -D` | `"devDependencies"` | Only needed by the developer. |
63+
64+
## Summary Checklist
65+
66+
* [x] I can install a package using `npm i`.
67+
* [x] I understand that `-D` is for tools only I (the developer) use.
68+
* [x] I know that `package-lock.json` is a security lock for versions.
69+
* [x] I can use `npm uninstall` to keep my project clean.

‎absolute-beginners/frontend-beginner/npm/intro-to-npm.mdx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
sidebar_position: 1
3+
title: "What is NPM?"
4+
sidebar_label: "1. Intro to NPM"
5+
description: "A beginner-friendly introduction to the world's most popular code warehouse."
6+
---
7+
8+
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.
9+
10+
**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.
11+
12+
## Why Do We Use NPM?
13+
14+
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.
15+
16+
**With NPM, it’s a one-sentence process:**
17+
* **You:** "Hey NPM, I need a tool that handles dates."
18+
* **NPM:** "Here is a package called `date-fns`. I've put it in your project folder. Enjoy!"
19+
20+
## The Three Parts of NPM
21+
22+
NPM isn't just one thing; it’s a system with three parts that work together:
23+
24+
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.
25+
2. **The Registry:** This is the actual "Warehouse" in the cloud where all the code is stored safely.
26+
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.
27+
28+
## How Do I Get NPM?
29+
30+
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.
31+
32+
### Let's check if you have it:
33+
1. Open your **Terminal** (in VS Code, press <code>Ctrl + `</code>).
34+
2. Type this command and hit Enter:
35+
36+
```bash
37+
npm -v
38+
```
39+
3. **The Result:** If you see a version number (like `10.2.4`), you are ready to go!
40+
41+
## Key Vocabulary for Beginners
42+
43+
* **Package:** A folder containing pre-written code that solves a specific problem.
44+
* **Dependency:** A package that your project "depends" on to work.
45+
* **Registry:** The giant database where all packages live.
46+
* **Install:** The act of downloading a package into your project.
47+
48+
## Summary Checklist
49+
* [x] I understand that NPM lets me **borrow** code so I don't have to write everything from scratch.
50+
* [x] I know that the **Registry** is where the code is stored.
51+
* [x] I have verified that NPM is installed on my computer.
52+
53+
:::info Pro Tip
54+
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!
55+
:::

‎absolute-beginners/frontend-beginner/npm/npm-challenge.mdx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
sidebar_position: 4
3+
title: "Final Challenge: The Terminal Cow"
4+
sidebar_label: "4. NPM Challenge"
5+
description: "Put your NPM skills to the test by creating a project and running your first package."
6+
---
7+
8+
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**.
9+
10+
Why? Because if you can install a cow that talks, you can install **React**, **Vite**, or any other professional tool!
11+
12+
## The Mission Blueprint
13+
14+
Follow these **4 Steps** to complete your graduation:
15+
16+
### 1. The Setup
17+
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":
18+
```bash
19+
npm init -y
20+
```
21+
22+
*Check: Do you see a `package.json` file now? Good!*
23+
24+
### 2. The Installation
25+
26+
Now, let's "borrow" the Cowsay code from the warehouse.
27+
28+
```bash
29+
npm install cowsay
30+
```
31+
32+
*Check: Open your `package.json`. You should see `cowsay` listed under `"dependencies"`. Also, notice the giant `node_modules` folder that just appeared!*
33+
34+
### 3. The Execution
35+
36+
To run a package we just downloaded, we use a special command called `npx` (think of it as "NPM Execute").
37+
38+
```bash
39+
npx cowsay "CodeHarborHub is the best!"
40+
```
41+
42+
**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!
43+
44+
## Level Up: Create a Custom Script
45+
46+
Professional developers don't like typing long commands. They create **Shortcuts**.
47+
48+
1. Open your `package.json` file.
49+
2. Find the `"scripts"` section.
50+
3. Add a new line called `"moo"` like this:
51+
52+
```json {4}
53+
"scripts": {
54+
"test": "echo \"Error: no test specified\" && exit 1",
55+
"start": "node index.js",
56+
"moo": "cowsay CodeHarborHub Graduation!"
57+
},
58+
```
59+
60+
4. Now, go back to your terminal and run your shortcut:
61+
62+
```bash
63+
npm run moo
64+
```
65+
66+
## What did you just learn?
67+
68+
By completing this challenge, you have mastered the **Standard Developer Workflow**:
69+
70+
* **Init:** Created a project foundation.
71+
* **Install:** Brought in external code.
72+
* **Execute:** Ran a third-party tool.
73+
* **Script:** Created a custom automation shortcut.
74+
75+
## Graduation Checklist
76+
77+
* [x] I successfully created a `package.json` using `npm init`.
78+
* [x] I installed a package and saw it in `node_modules`.
79+
* [x] I ran a package using the `npx` command.
80+
* [x] I created a custom script and ran it with `npm run`.
81+
82+
:::success 🎉 CONGRATULATIONS!
83+
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.
84+
85+
**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!
86+
:::

‎absolute-beginners/frontend-beginner/npm/package-json.mdx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
sidebar_position: 2
3+
title: "Project's ID Card: package.json"
4+
sidebar_label: "2. package.json"
5+
description: "Learn how the package.json file acts as the brain and ID card of your project."
6+
---
7+
8+
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**.
9+
10+
Without this file, NPM doesn't know what tools your project needs to run.
11+
12+
## How to Create One
13+
14+
You don't write this file from scratch. You let NPM build it for you!
15+
16+
1. Open your terminal in a new, empty folder.
17+
2. Type the following "Magic Command":
18+
19+
```bash
20+
npm init -y
21+
```
22+
23+
:::note
24+
**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.
25+
:::
26+
27+
## Reading the ID Card
28+
29+
Once you run that command, a new file appears. Let's look inside and see what the main parts mean:
30+
31+
```json title="package.json"
32+
{
33+
"name": "my-awesome-project",
34+
"version": "1.0.0",
35+
"description": "Learning NPM at CodeHarborHub",
36+
"main": "index.js",
37+
"scripts": {
38+
"test": "echo \"Error: no test specified\" && exit 1"
39+
},
40+
"dependencies": {}
41+
}
42+
```
43+
44+
### The Key Parts:
45+
46+
* **`name`**: The name of your project (no spaces allowed!).
47+
* **`version`**: Helps you track updates (1.0.0 is the starting point).
48+
* **`scripts`**: These are **shortcuts**. Instead of typing a 50-character command, you can create a 1-word shortcut like `"start"`.
49+
* **`dependencies`**: This is the most important part. It is a list of all the "borrowed code" (packages) your project is currently using.
50+
51+
## The `node_modules` Folder (The Storage Room)
52+
53+
As soon as you start installing packages, you will see a new folder appear called `node_modules`.
54+
55+
* **What it is:** This is where the actual code you borrowed from NPM is stored.
56+
* **The Warning:** This folder can get **huge** (sometimes containing thousands of files).
57+
* **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.
58+
59+
## Analogy: The Recipe vs. The Ingredients
60+
61+
Think of it like cooking:
62+
63+
* **`package.json`** is the **Recipe**. it's just a piece of paper that lists what you need.
64+
* **`node_modules`** are the **Ingredients**. They are the actual heavy items in your kitchen.
65+
66+
**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`.
67+
68+
## Summary Checklist
69+
70+
* [x] I know that `npm init -y` creates my project's ID card.
71+
* [x] I understand that `package.json` tracks my borrowed packages.
72+
* [x] I know that `dependencies` is the list of tools I'm using.
73+
* [x] I promise never to upload the `node_modules` folder to GitHub!

‎docs/index.mdx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,11 @@ hide_title: false
77
toc_min_heading_level: 2
88
keywords: [codeharborhub, docusaurus, tutorials]
99
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."
10-
displayed_sidebar: null
1110
---
1211

13-
<head>
14-
<style>{`
15-
:root {
16-
--doc-item-container-width: 60rem;
17-
}
18-
`}</style>
19-
</head>
12+
{/*
13+
displayed_sidebar: null
14+
*/}
2015

2116
**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.
2217

@@ -48,8 +43,6 @@ We focus on delivering **real-world value** that directly impacts your career an
4843
* **Community & Open Source:** Join an active community of developers. Get support, share knowledge, and contribute to real-world open-source projects.
4944
* **Future-Proof Skills:** Our curriculum is continuously updated by experts to cover the latest frameworks, technologies, and industry best practices.
5045

51-
<AdsComponent />
52-
5346
## Start Your Learning Path
5447

5548
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.

‎src/css/custom.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
:root {
66
--ifm-color-primary: #2e93e2;
7+
--ifm-background-color: #FFFDD0; /* background color*/
78
--ifm-color-primary-dark: #29784c;
89
--ifm-color-primary-darker: #277148;
910
--ifm-color-primary-darkest: #205d3b;
@@ -49,6 +50,7 @@
4950

5051
[data-theme="dark"] {
5152
--ifm-color-primary: #48bf84;
53+
--ifm-background-color: #121212; /* background color */
5254
--ifm-color-primary-dark: #21af90;
5355
--ifm-color-primary-darker: #1fa588;
5456
--ifm-color-primary-darkest: #1a8870;
@@ -253,9 +255,9 @@ mark {
253255
-webkit-text-fill-color: transparent;
254256
}
255257

256-
/* [data-theme='dark'] #__docusaurus_skipToContent_fallback {
257-
background: linear-gradient(rgba(15, 23, 42, 0.796), rgba(15, 23, 42, 0.23));
258-
} */
258+
#__docusaurus_skipToContent_fallback {
259+
background: var(--ifm-background-color);
260+
}
259261
[data-theme="dark"] .navbar {
260262
background: rgba(15, 23, 42, 0.862);
261263
border-bottom: 1px solid #4e8da0db;

0 commit comments

Comments
 (0)