From 4eaee74faa84e55a3f581dde98f3fc78179b729a Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Mon, 2 Mar 2026 22:03:40 +0530 Subject: [PATCH] Just complited Git & GitHub docs --- absolute-beginners/backend-beginner/index.mdx | 4 + .../devops-beginner/_category_.json | 8 ++ absolute-beginners/devops-beginner/index.mdx | 1 - .../frontend-beginner/_category_.json | 8 ++ .../git-github/_category_.json | 8 ++ .../git-github/branching-merging.mdx | 86 ++++++++++++++++++ .../git-github/git-basics.mdx | 85 ++++++++++++++++++ .../git-github/git-challenge.mdx | 85 ++++++++++++++++++ .../git-github/github-setup.mdx | 87 +++++++++++++++++++ .../git-github/intro-to-vcs.mdx | 68 +++++++++++++++ .../frontend-beginner/git/index.mdx | 1 - .../frontend-beginner/github/index.mdx | 1 - .../frontend-beginner/index.mdx | 81 ----------------- absolute-beginners/index.mdx | 57 +++++++++++- 14 files changed, 495 insertions(+), 85 deletions(-) create mode 100644 absolute-beginners/devops-beginner/_category_.json delete mode 100644 absolute-beginners/devops-beginner/index.mdx create mode 100644 absolute-beginners/frontend-beginner/_category_.json create mode 100644 absolute-beginners/frontend-beginner/git-github/_category_.json create mode 100644 absolute-beginners/frontend-beginner/git-github/branching-merging.mdx create mode 100644 absolute-beginners/frontend-beginner/git-github/git-basics.mdx create mode 100644 absolute-beginners/frontend-beginner/git-github/git-challenge.mdx create mode 100644 absolute-beginners/frontend-beginner/git-github/github-setup.mdx create mode 100644 absolute-beginners/frontend-beginner/git-github/intro-to-vcs.mdx delete mode 100644 absolute-beginners/frontend-beginner/git/index.mdx delete mode 100644 absolute-beginners/frontend-beginner/github/index.mdx delete mode 100644 absolute-beginners/frontend-beginner/index.mdx diff --git a/absolute-beginners/backend-beginner/index.mdx b/absolute-beginners/backend-beginner/index.mdx index e345ed2..57c14ae 100644 --- a/absolute-beginners/backend-beginner/index.mdx +++ b/absolute-beginners/backend-beginner/index.mdx @@ -1 +1,5 @@ +--- +position: 3 +--- + \ No newline at end of file diff --git a/absolute-beginners/devops-beginner/_category_.json b/absolute-beginners/devops-beginner/_category_.json new file mode 100644 index 0000000..5e1db02 --- /dev/null +++ b/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" + } +} diff --git a/absolute-beginners/devops-beginner/index.mdx b/absolute-beginners/devops-beginner/index.mdx deleted file mode 100644 index e345ed2..0000000 --- a/absolute-beginners/devops-beginner/index.mdx +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/_category_.json b/absolute-beginners/frontend-beginner/_category_.json new file mode 100644 index 0000000..c63f29d --- /dev/null +++ b/absolute-beginners/frontend-beginner/_category_.json @@ -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." + } +} \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/git-github/_category_.json b/absolute-beginners/frontend-beginner/git-github/_category_.json new file mode 100644 index 0000000..4308e0f --- /dev/null +++ b/absolute-beginners/frontend-beginner/git-github/_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." + } +} \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/git-github/branching-merging.mdx b/absolute-beginners/frontend-beginner/git-github/branching-merging.mdx new file mode 100644 index 0000000..1258309 --- /dev/null +++ b/absolute-beginners/frontend-beginner/git-github/branching-merging.mdx @@ -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. \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/git-github/git-basics.mdx b/absolute-beginners/frontend-beginner/git-github/git-basics.mdx new file mode 100644 index 0000000..2d83160 --- /dev/null +++ b/absolute-beginners/frontend-beginner/git-github/git-basics.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. \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/git-github/git-challenge.mdx b/absolute-beginners/frontend-beginner/git-github/git-challenge.mdx new file mode 100644 index 0000000..0e4a738 --- /dev/null +++ b/absolute-beginners/frontend-beginner/git-github/git-challenge.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**. +::: \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/git-github/github-setup.mdx b/absolute-beginners/frontend-beginner/git-github/github-setup.mdx new file mode 100644 index 0000000..03031b7 --- /dev/null +++ b/absolute-beginners/frontend-beginner/git-github/github-setup.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**. \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/git-github/intro-to-vcs.mdx b/absolute-beginners/frontend-beginner/git-github/intro-to-vcs.mdx new file mode 100644 index 0000000..685b72b --- /dev/null +++ b/absolute-beginners/frontend-beginner/git-github/intro-to-vcs.mdx @@ -0,0 +1,68 @@ +--- +sidebar_position: 1 +title: "Git & GitHub: Your Developer Time Machine" +sidebar_label: "1. Intro to Git & GitHub" +description: "Understand the difference between Git (the tool) and GitHub (the platform) with interactive analogies." +--- + +Have you ever worked on a project, made a huge mistake, and wished you could just "Undo" everything back to how it was yesterday? Or have you ever tried to work on a project with a friend and ended up with files like `index-v2-final-LAST-VERSION-DONT-DELETE.html`? + +:::tip Overview +Git is an open-source, local version control system (VCS), while GitHub is a web-based platform that hosts Git repositories and provides additional collaboration and project management features. You can use Git without GitHub, but GitHub requires Git to function. +::: + +**Git** and **GitHub** are here to save your sanity. + +## The "Game Console" Analogy + +To understand these two, think of your favorite video game: + +| Feature | **Git** (The Console) | **GitHub** (The Cloud/PS Plus) | +| :--- | :--- | :--- | +| **Where it lives** | On your local computer. | On the Internet (The Cloud). | +| **What it does** | Creates "Save Points" as you play. | Stores your save points so you don't lose them. | +| **Why use it** | If you die (break your code), you restart at the last save. | You can show your "High Scores" to the world. | + +> **The Golden Rule:** Git is a **tool** you use. GitHub is a **place** where you store what the tool creates. + +## Live Interaction: The Git "Aha!" Moment + +Let's visualize how Git thinks. Imagine your project is a story you are writing. + + + + You write a paragraph. This is your Working Directory. It's not saved yet; it's just "work in progress." + + + You like that paragraph! You put it in a "Special Folder" to prepare it for saving. In Git, we call this Staging. + + + You hit "Save" and write a note: "Added Chapter 1". This is a Commit. It is now a permanent save point in history. + + + +## The 4 Words You'll Hear Every Day + +As a developer at **CodeHarborHub**, you'll hear these terms constantly. Let's demystify them: + +1. **Repository (Repo):** A fancy name for your **Project Folder**. +2. **Commit:** A "Snapshot" or **Save Point** of your code at a specific moment. +3. **Push:** Sending your local save points **up** to GitHub. +4. **Pull:** Bringing save points **down** from GitHub to your computer. + +## Why This Matters for Your Career + +Why can't we just use Google Drive or Dropbox? +* **Precision:** Git tracks exactly *which line* of code changed and *who* changed it. +* **Branching:** You can create a "Parallel Universe" to test a new feature without breaking the main website. +* **Your Resume:** Your GitHub profile is your **Digital Portfolio**. Employers look at your "Green Squares" to see how often you code! + +## Summary Checklist +* [x] I know that **Git** is the tool on my computer. +* [x] I know that **GitHub** is the website for hosting code. +* [x] I understand that a **Commit** is a save point with a message. +* [x] I am ready to stop fearing the terminal and start saving my progress! + +:::tip Fun Fact +Git was created by **Linus Torvalds** (the same guy who created Linux) in 2005. He created it because he needed a better way to manage the thousands of people contributing to the Linux kernel! +::: \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/git/index.mdx b/absolute-beginners/frontend-beginner/git/index.mdx deleted file mode 100644 index e345ed2..0000000 --- a/absolute-beginners/frontend-beginner/git/index.mdx +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/github/index.mdx b/absolute-beginners/frontend-beginner/github/index.mdx deleted file mode 100644 index e345ed2..0000000 --- a/absolute-beginners/frontend-beginner/github/index.mdx +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/index.mdx b/absolute-beginners/frontend-beginner/index.mdx deleted file mode 100644 index bbcc8d8..0000000 --- a/absolute-beginners/frontend-beginner/index.mdx +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Frontend Development Roadmap 2026 -sidebar_label: Frontend Beginner -position: 1 -description: "A step-by-step guide to becoming a frontend developer in 2026." ---- - -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. - -## The Learning Path - -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. - -```mdx-code-block -import DocCardList from '@theme/DocCardList'; - - -``` - -## 1. The Core Fundamentals (The "Big Three") - -### HTML (HyperText Markup Language) - -The skeleton of every website. You'll learn how to structure content using elements. - -* **Focus on:** Semantic HTML (using `
`, `