diff --git a/absolute-beginners/frontend-beginner/npm/_category_.json b/absolute-beginners/frontend-beginner/npm/_category_.json new file mode 100644 index 0000000..8f09248 --- /dev/null +++ b/absolute-beginners/frontend-beginner/npm/_category_.json @@ -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." + } +} \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/npm/index.mdx b/absolute-beginners/frontend-beginner/npm/index.mdx deleted file mode 100644 index e345ed2..0000000 --- a/absolute-beginners/frontend-beginner/npm/index.mdx +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/npm/installing-deps.mdx b/absolute-beginners/frontend-beginner/npm/installing-deps.mdx new file mode 100644 index 0000000..2de0071 --- /dev/null +++ b/absolute-beginners/frontend-beginner/npm/installing-deps.mdx @@ -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 ` | `"dependencies"` | Needed for the website to run. | +| **DevDependency** | `npm i -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. \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/npm/intro-to-npm.mdx b/absolute-beginners/frontend-beginner/npm/intro-to-npm.mdx new file mode 100644 index 0000000..e7bf152 --- /dev/null +++ b/absolute-beginners/frontend-beginner/npm/intro-to-npm.mdx @@ -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 Ctrl + `). +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! +::: \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/npm/npm-challenge.mdx b/absolute-beginners/frontend-beginner/npm/npm-challenge.mdx new file mode 100644 index 0000000..2fb9467 --- /dev/null +++ b/absolute-beginners/frontend-beginner/npm/npm-challenge.mdx @@ -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! +::: \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/npm/package-json.mdx b/absolute-beginners/frontend-beginner/npm/package-json.mdx new file mode 100644 index 0000000..b3b06ef --- /dev/null +++ b/absolute-beginners/frontend-beginner/npm/package-json.mdx @@ -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! \ No newline at end of file diff --git a/docs/index.mdx b/docs/index.mdx index 29ad1cb..ab23bd0 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -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 --- - - - +{/* +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. - - ## 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. diff --git a/src/css/custom.css b/src/css/custom.css index 049123f..8909811 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -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;