Merge pull request #210 from codeharborhub/dev-1

Just complited Git & GitHub docs

Author: ajay-dhangar

absolute-beginners/backend-beginner/index.mdx

@@ -1 +1,5 @@
+---
+position: 3
+---
+
 <ComingSoon />

absolute-beginners/devops-beginner/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "DevOps Beginner",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "Welcome to CodeHarborHub! This guide is designed for learn DevOps Beginner"
+  }
+}

absolute-beginners/devops-beginner/index.mdx

@@ -0,0 +1,8 @@
+{
+  "label": "Frontend Beginner",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "Welcome to CodeHarborHub! This guide is designed to take you from Hello World to building modern, tested web applications. In 2026, frontend development is more than just making things look pretty, it's about performance, accessibility, and clean code."
+  }
+}

absolute-beginners/frontend-beginner/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Git & GitHub",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "Learn how to track your code and collaborate with others using Git and GitHub."
+  }
+}

absolute-beginners/frontend-beginner/git-github/_category_.json

@@ -0,0 +1,86 @@
+---
+sidebar_position: 4
+title: "Branching & Merging: Parallel Universes"
+sidebar_label: "4. Branching & Merging"
+description: "Learn how to work on new features safely without breaking your main project."
+---
+
+When you are working on a professional project at **CodeHarborHub**, you never want to break the "Live" version of your website. This is why we use **Branches**.
+
+## What is a Branch?
+
+By default, every Git project has a main branch (usually called `main`). 
+* **The `main` branch** is like the "Master Copy" of your project. It should always be clean and working.
+* **A Feature Branch** is a copy you pull off to the side to work on something new (like a "Contact Us" page or a new button).
+
+## The Branching Workflow
+
+### 1. Create a New Branch
+
+Before you start a new task, create a new branch. This keeps your work isolated.
+
+```bash
+git checkout -b feature-new-button
+```
+
+*The `-b` stands for "new branch". The `checkout` tells Git to move your "Time Machine" to that branch.*
+
+### 2. Do Your Work
+
+Make your changes, `add` them, and `commit` them just like normal. These saves only exist in this "Parallel Universe."
+
+### 3. Switch Back to Main
+
+Once you are happy with your work, switch back to the "Master Copy."
+
+```bash
+git checkout main
+```
+
+### 4. The Merge (The Reunion)
+
+Now, bring the changes from your feature branch into the main branch.
+
+```bash
+git merge feature-new-button
+```
+
+## Dealing with "Merge Conflicts"
+
+Sometimes, Git gets confused. If you change Line 10 on the `main` branch and also change Line 10 on your `feature` branch, Git won't know which one you want to keep. This is called a **Merge Conflict**.
+
+**Don't Panic!** When this happens, VS Code will highlight the conflicting lines in **Red** and **Blue**. You simply click:
+
+* "Accept Current Change" (Keep the old one)
+* "Accept Incoming Change" (Keep the new one)
+* "Accept Both"
+
+## The Professional "Git Flow"
+
+In the real world, developers follow this loop:
+
+1. **Pull** the latest code from the team (`git pull origin main`).
+2. **Branch** out for a new feature (`git checkout -b my-feature`).
+3. **Code** and **Commit** small changes.
+4. **Push** the branch to GitHub (`git push origin my-feature`).
+5. **Merge** it after it's been checked by others.
+
+## Interactive Challenge: The Branch Hopper
+
+Try to visualize this sequence. If you are on the `main` branch and you want to fix a typo:
+
+1. `git checkout -b fix-typo`
+2. *Fix the typo in the file.*
+3. `git add .`
+4. `git commit -m "Fixed typo in footer"`
+5. `git checkout main`
+6. `git merge fix-typo`
+
+**Why go back to `main` before merging?** Because you always merge the "New Work" **into** the "Master Copy."
+
+## Summary Checklist
+
+* [x] I know that the `main` branch should always be stable.
+* [x] I can create a new branch using `git checkout -b`.
+* [x] I can switch between branches using `git checkout`.
+* [x] I understand that a **Merge Conflict** is just a choice I need to make.

absolute-beginners/frontend-beginner/git-github/branching-merging.mdx

@@ -0,0 +1,85 @@
+---
+sidebar_position: 2
+title: "Git Basics: The Big Three Commands"
+sidebar_label: "2. Git Basics"
+description: "Master the workflow of Add, Commit, and Push to save your progress."
+---
+
+Saving code with Git is a bit different than hitting `Ctrl + S` in Word. It’s more like a **Photography Session**. 
+
+Imagine you are a photographer:
+1. **The Pose:** You arrange your subjects (Stage your files).
+2. **The Click:** You take the photo (Commit the snapshot).
+3. **The Gallery:** You upload the photo to your online portfolio (Push to GitHub).
+
+## The Three Stages of Git
+
+Before we learn the commands, you need to visualize where your code "lives" during the saving process.
+
+1.  **Working Directory:** This is your "Work Desk." Any changes you make in VS Code happen here.
+2.  **Staging Area:** This is your "Shopping Cart." You put the changes here that you are *ready* to save.
+3.  **Local Repository:** This is your "Vault." Once you commit, your changes are safely locked in the history of your computer.
+
+## The Commands You'll Use 90% of the Time
+
+Open your terminal in VS Code (Press `Ctrl + ` `) and let's walk through a save point.
+
+### Step 1: `git add` (The Selection)
+
+This tells Git: "Hey, look at these specific changes I just made."
+
+```bash
+git add index.html
+``` 
+
+:::tip 
+Use `git add .` to add **every** file you changed at once!*
+:::
+
+### Step 2: `git commit` (The Snapshot)
+
+This creates the actual "Save Point" in your timeline. You **must** add a message so you know what you did.
+
+```bash
+git commit -m "Added a cool new button to the homepage"
+```
+
+### Step 3: `git push` (The Upload)
+
+This sends your local "Vault" up to the cloud (GitHub).
+
+```bash
+git push origin main
+```
+
+## Visualizing the Flow
+
+### Interactive Lab: Git Command Simulator
+
+Think you’ve got it? Let's test your logic. If you were building a website for **CodeHarborHub**, in what order would you do these tasks?
+
+1. **Modify** the `style.css` to make the background blue.
+2. Type `git add style.css` to put it in the cart.
+3. Type `git commit -m "Changed background to blue"`.
+4. Type `git push` to show it to your team.
+
+**What happens if you skip Step 2?** Git will tell you: *"Nothing added to commit."* You can't take a photo if nobody is standing in front of the camera!
+
+### Checking the Status
+
+If you ever feel lost and don't know if you saved your work, use this "GPS" command:
+
+```bash
+git status
+```
+
+* **Red Files:** You changed them, but haven't "Added" them yet.
+* **Green Files:** They are in the "Cart" (Staged) and ready to be committed.
+* **"Nothing to commit":** You are all caught up!
+
+## Summary Checklist
+
+* [x] I know that `git add` puts files in the **Staging Area**.
+* [x] I know that `git commit` creates a permanent **Save Point**.
+* [x] I understand that `git push` sends my work to **GitHub**.
+* [x] I can use `git status` to check my progress.

absolute-beginners/frontend-beginner/git-github/git-basics.mdx

@@ -0,0 +1,85 @@
+---
+sidebar_position: 5
+title: "Challenge: Your First Contribution"
+sidebar_label: "5. Git Challenge"
+description: "Put your Git skills to the test by contributing to a real repository."
+---
+
+You’ve learned the commands, you’ve set up your SSH keys, and you’ve mastered branches. Now, it's time to use the **Professional Workflow**. 
+
+Your mission: Add your name to the **CodeHarborHub Wall of Fame** repository on GitHub.
+
+## The Mission Map: The Fork & Pull Workflow
+
+When you want to contribute to a project that isn't yours, you follow these steps:
+
+1.  **Fork:** Create your own copy of the project on GitHub.
+2.  **Clone:** Download your copy to your computer.
+3.  **Branch:** Create a "Parallel Universe" for your changes.
+4.  **Commit & Push:** Save and upload your work.
+5.  **Pull Request (PR):** Ask the owner to "Pull" your changes into the main project.
+
+## Step-by-Step Instructions
+
+### Step 1: The Fork
+
+Go to the [CodeHarborHub Wall of Fame](https://github.com/ajay-dhangar/wall-of-fame) and click the **Fork** button in the top-right corner. This creates a copy of the repo in *your* GitHub account.
+
+### Step 2: The Clone
+
+Now, bring that code to your computer. Open your terminal and type:
+```bash
+git clone git@github.com:YOUR_USERNAME/wall-of-fame.git
+```
+
+*(Replace YOUR_USERNAME with your actual GitHub username!)*
+
+### Step 3: The Feature Branch
+
+Move into the folder and create a new branch. Never work directly on `main` when contributing!
+
+```bash
+cd wall-of-fame
+git checkout -b add-my-name
+```
+
+### Step 4: The Edit
+
+Open the project in VS Code. Find the `contributors.md` file and add your name to the list:
+
+* `[Your Name](https://github.com/your-username) - Learning at CodeHarborHub!`
+
+### Step 5: The Save & Upload
+
+Use the "Big Three" commands you learned earlier:
+
+```bash
+git add contributors.md
+git commit -m "Added my name to the Wall of Fame"
+git push origin add-my-name
+```
+
+## Step 6: The Pull Request (The Final Step)
+
+Go back to the original **[Wall Of Fame](https://github.com/ajay-dhangar/wall-of-fame)** repository on GitHub. You will see a yellow bar that says **"Compare & pull request"**.
+
+1. Click that button.
+2. Write a nice message: *"Hi! I'm adding my name to the contributors list."*
+3. Click **Create Pull Request**.
+
+## What Happens Next?
+
+The maintainers of **Repo (wall-of-fame)** will review your code. If everything looks good, they will click **Merge**, and your name will officially be part of the project forever!
+
+## Graduation Checklist
+
+* [x] I successfully **Forked** a repository.
+* [x] I used a **Feature Branch** for my changes.
+* [x] I **Pushed** my changes to my GitHub account.
+* [x] I opened my very first **Pull Request**!
+
+:::success YOU ARE NOW A VERSION CONTROL PRO!
+Congratulations! You have completed the **Absolute Beginners** track. You can build with HTML, style with CSS, add brains with JavaScript, and manage it all with Git.
+
+**Where do we go from here?** You are ready for the **Intermediate Frontend** track, where we dive into **React.js**, **Tailwind CSS**, and **Advanced JavaScript**.
+:::

absolute-beginners/frontend-beginner/git-github/git-challenge.mdx

@@ -0,0 +1,87 @@
+---
+sidebar_position: 3
+title: "Connecting to the Cloud: GitHub Setup"
+sidebar_label: "3. GitHub Setup"
+description: "Learn how to create a GitHub account and connect it to your local environment."
+---
+
+Think of GitHub as your **Professional Portfolio**. It’s where your code lives, where you collaborate with others at **CodeHarborHub**, and where future employers look to see your progress.
+
+To get your computer talking to GitHub, we need to follow three main steps.
+
+## 1. Create Your Account
+
+First things first: head over to [GitHub.com](https://github.com) and sign up.
+
+* **Pick a professional username:** This will stay with you for a long time (e.g., `ajay-developer` is better than `cool-gamer-99`).
+* **Verify your email:** You won't be able to contribute until you do!
+
+## 2. Introduce Yourself to Git
+
+[Git](https://git-scm.com/install/) is installed on your computer, but it doesn't know who you are yet. We need to give it your name and email so that your "Save Points" have your signature on them.
+
+Open your **Terminal** and type these two lines (replace with your info):
+
+```bash
+git config --global user.name "Your Name"
+git config --global user.email "your-email@example.com"
+```
+
+## 3. The "Secret Handshake" (SSH Keys)
+
+GitHub needs to know that the code coming from your computer is actually from *you*. Instead of using a password every time, we use an **SSH Key**.
+
+Think of an SSH Key as a **Digital Keycard**. You keep the "Private Key" on your laptop and give the "Public Key" to GitHub. When they match, the door opens!
+
+### How to generate your Key:
+
+1. **Open your terminal** and type:
+
+```bash
+ssh-keygen -t ed25519 -C "your_email@example.com"
+```
+
+*(Press Enter for all prompts—don't worry about a password for now.)*
+
+2. **Copy the key** to your clipboard:
+
+* **Windows:** `clip < ~/.ssh/id_ed25519.pub`
+* **Mac:** `pbcopy < ~/.ssh/id_ed25519.pub`
+
+
+3. **Add to GitHub:** * Go to GitHub **Settings** -> **SSH and GPG keys** -> **New SSH Key**.
+* Paste your key and give it a name like "My Laptop".
+
+## Your First Repository (Remote Storage)
+
+Now, let's create a home for your project on GitHub!
+
+1. Click the **+** icon on GitHub and select **New repository**.
+2. Name it `my-first-project`.
+3. Keep it **Public** so others can see your hard work!
+4. Copy the URL provided (it looks like `git@github.com:username/repo.git`).
+
+### Connecting Local to Remote:
+
+In your project folder on your computer, run this command to tell Git where the "Cloud Version" lives:
+
+```bash
+git remote add origin [PASTE_YOUR_URL_HERE]
+```
+
+## Testing the Connection
+
+Let's see if the bridge is working. Try to push your first commit:
+
+```bash
+git push -u origin main
+```
+
+**Success?** Refresh your GitHub page. If you see your files there, you are officially a **Cloud-Connected Developer!**
+
+## Summary Checklist
+
+* [x] I created a GitHub account.
+* [x] I configured my `user.name` and `user.email`.
+* [x] I generated and added my **SSH Key** to GitHub.
+* [x] I linked my local folder to a **Remote Repository**.