diff --git a/docs/GitHub/Fun-Profile-Customizations/Anurag-Hazra's-GitHub-Readme-Cards.md b/docs/GitHub/Fun-Profile-Customizations/Anurag-Hazra's-GitHub-Readme-Cards.md
deleted file mode 100644
index 9321e692..00000000
--- a/docs/GitHub/Fun-Profile-Customizations/Anurag-Hazra's-GitHub-Readme-Cards.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# Anurag Hazra's GitHub Readme Cards
-
-This is the foundational tool for dynamic profile statistics. It uses a serverless function to generate SVGs (Scalable Vector Graphics) displaying **real-time data** pulled directly from your GitHub profile. These cards are the quickest and most popular way to upgrade your Readme.
-
-| Feature | Description |
-| :--- | :--- |
-| **Stats Card** | Shows core metrics: total stars, commits (in the last year), pull requests, and contribution count. |
-| **Language Card** | Displays your usage breakdown of **top languages** across your repositories (excluding forks). |
-
-### Setup Example (Stats & Language Cards)
-
-To use these cards, you simply embed them as images in your `README.md`. **Replace `YOUR_USERNAME` with your actual GitHub username.** The code below uses the popular `buefy` theme.
-
-## My GitHub Stats
-
-```markdowm
-[](https://github.com/anuraghazra/github-readme-stats)
-```
-
-## Top Languages
-
-```markdown
-[](https://github.com/anuraghazra/github-readme-stats)
-```
-
-### Customization: Themes and Layouts
-
-You can drastically change the appearance and content of your cards by adding parameters to the URL string (e.g., `¶m=value`).
-
-#### 🎨 Popular Themes (`&theme`)
-
-The &theme= parameter allows you to apply a full color scheme. Try one of these popular options by adding it to the API URL:
-
-- dark: Standard dark mode, high contrast.
-- buefy: Bright blue and purple scheme (used in the example above).
-- synthwave: Retro 80s neon look.
-- onedark: A popular editor theme, often used by developers.
-- solarized_light: A classic light theme option.
-
-
-#### 📐 Layout Options (`&layout`)
-
-This parameter is most commonly used for the Top Languages card to optimize space:
-
-- default: (Used on the Stats Card) A larger vertical layout with distinct borders.
-- compact: (Recommended for Language Card) Displays language bars horizontally, resulting in a much shorter, more compact card.
-
-#### Other Key Parameters
-
-| Parameter | Example Value | Description |
-| :--- | :--- | :--- |
-| `&show_icons=` | `show_icons=true` | Displays icons next to each stat label (highly recommended). |
-| `&hide=` | `hide=issues,prs` | Hides specific statistics, like issues or pull requests, if you prefer a cleaner look. |
-| `&title_color=` | `title_color=007bff` | Sets a custom hexadecimal color for the card title. |
-| `&exclude_repo=` | `exclude_repo=test-repo,docs` | Hides specific repositories from the language calculations.|
-
-⚠️ **Important Note on Language Calculations:** The Top Languages card calculates language usage from all public repos you own. To ensure the card accurately reflects your coding focus (and not just boilerplate files), it is strongly recommended to use the &exclude_repo= parameter to ignore repositories containing auto-generated documentation or simple configuration.
-
-🔗 Relevant Repo: Anurag Hazra's GitHub Readme Stats
\ No newline at end of file
diff --git a/docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md b/docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md
deleted file mode 100644
index 3da28c3d..00000000
--- a/docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# Snake Contribution Animation
-
-The Snake Contribution Animation is a visually unique and engaging way to represent your yearly activity. This feature adds a looping GIF or SVG of a "snake" chasing and consuming your contribution blocks, creating a dynamic element on your profile.
-
-### How the Snake Animation Works
-
-Unlike static image cards, the snake animation is a generated file (usually an SVG). This file must be **generated by a script and committed** back to your profile repository regularly to stay up-to-date with your latest activity. This entire process is fully automated using a **GitHub Action** that runs on a schedule.
-
----
-
-## GitHub Action Setup
-
-To automate the snake animation, you must create a YAML workflow file named **`snake.yml`** inside your profile repository's `.github/workflows/` directory.
-
-### 1. The Workflow File (`snake.yml`)
-
-Use the following content for your workflow file. This configuration uses the recommended `lowlighter/metrics` action, sets it to run daily, and ensures the necessary permissions are granted.
-
-```yaml
-name: Generate Snake Animation
-
-on:
- schedule:
- # Runs at 1 AM UTC every day
- - cron: "0 01 * * *"
- workflow_dispatch:
- # Allows manual trigger via the GitHub Actions tab
-
-jobs:
- generate:
- runs-on: ubuntu-latest
- permissions:
- contents: write # CRITICAL: This grants permission to commit the new file
-
- steps:
- - uses: actions/checkout@v4
- - uses: lowlighter/metrics@latest # Use the metrics action
-
- with:
- # REQUIRED: GitHub token (automatically provided by GitHub)
- token: ${{ secrets.GITHUB_TOKEN }}
-
- # Output configuration
- output_name: output/github-snake.svg
- user: ${{ github.repository_owner }} # Automatically detects your username
-
- # Plugin configuration for the snake
- template: snake
- base: "" # Base is disabled to focus only on the snake plugin
- plugin_isocalendar: yes
- plugin_isocalendar_duration: full-year
-```
-Once your workflow runs successfully (you can check the Actions tab on GitHub), the generated file will be saved to your repository. Embed the image in your main README.md using the path where the action saved the file:
-
-## My 2024 GitHub Activity
-
-```markdown
-
-```
-
-(Replace YOUR_USERNAME with your actual GitHub username.)
\ No newline at end of file
diff --git a/docs/GitHub/Fun-Profile-Customizations/Trophy-Case-Streaks.md b/docs/GitHub/Fun-Profile-Customizations/Trophy-Case-Streaks.md
deleted file mode 100644
index 570d500b..00000000
--- a/docs/GitHub/Fun-Profile-Customizations/Trophy-Case-Streaks.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Trophy Case and Contribution Streaks
-
-These tools complement the core GitHub Readme Stats by focusing on **gamification** and **consistency**, turning your contributions into visible achievements.
-
-### GitHub Trophy Case 🏆
-
-This service awards different virtual "trophies" based on your activity, such as total star count, number of commits, number of followers, and maintaining contribution streaks. It’s an excellent motivator for long-term engagement.
-
-**Setup Example:**
-To include the trophy case, simply embed the SVG image link in your Readme, replacing `YOUR_USERNAME`:
-
-### My Trophy Case
-
-```markdown
-[](https://github.com/ryo-ma/github-profile-trophy)
-```
-
-🔗 Relevant Repo: ryo-ma/github-profile-trophy
-
-### GitHub Streaks 🔥
-This card displays your current streak of contributions and your longest historical streak, promoting a daily habit of coding. Seeing your streak number grow can be a powerful psychological push!
-
-**Setup Example:**
-
-```markdown
-[](https://github.com/DenverCoder1/github-readme-streak-stats)
-```
-
-🔗 Relevant Repo: DenverCoder1/github-readme-streak-stats
-
-💡 Tip: To maintain a streak, remember that contributions count if they are made within a 24-hour period, based on UTC time.
\ No newline at end of file
diff --git a/docs/GitHub/Fun-Profile-Customizations/Why-Customize.md b/docs/GitHub/Fun-Profile-Customizations/Why-Customize.md
index 47962cd1..ee11552a 100644
--- a/docs/GitHub/Fun-Profile-Customizations/Why-Customize.md
+++ b/docs/GitHub/Fun-Profile-Customizations/Why-Customize.md
@@ -1,18 +1,44 @@
-# Fun GitHub Profile Customizations
+---
+title: "Fun GitHub Profile Customizations"
+hide_title: true
+footer_width: lesson
+---
+
+import {
+ SetupLesson, LessonHeader, SetupChecklist, StepTimeline, Step, Shot, UpNextCard,
+} from '@site/src/components/setupLesson';
+
+
+
+
Your GitHub profile Readme is a prime piece of digital real estate. It’s more than just a list of code repositories—it's your developer brand, your digital workshop, and your **first impression** on the global coding community. Customizing it is essential for promoting the dynamic developer culture of Recode Hive and maximizing your personal visibility.
----
+
## Why Customize?
-### 🛠️ The Essential First Step: Create Your Profile Repository
+
+
+
+
+
+
+### Step 1: 🛠️ The Essential First Step: Create Your Profile Repository
Before you can add any dynamic stats or flair, you must complete the single, most important requirement:
**Requirement:** You must create a **public GitHub repository** named *exactly* the same as your GitHub username (e.g., if your username is `recode`, the repo must be `recode/recode`). When you create this special repository, GitHub will automatically use its `README.md` file as the content for your public profile page.
-### Why Personalization Pays Off
+
+
+
+
+### Step 2: Why Personalization Pays Off
Once your profile repo is set up, customization offers tangible benefits that go far beyond aesthetics:
@@ -22,4 +48,12 @@ Once your profile repo is set up, customization offers tangible benefits that go
- 3. **Showcase Your Identity and Skills:** Customization allows you to highlight projects that matter most to you, whether it's a specific Recode Hive project or a new language you're mastering. Your profile becomes a curated **showcase of your specific expertise** and personality.
-- 4. **Professional Polish and Detail:** A well-structured, customized profile demonstrates **attention to detail, technical flair, and ownership**. These soft skills are highly valued in any professional development setting.
\ No newline at end of file
+- 4. **Professional Polish and Detail:** A well-structured, customized profile demonstrates **attention to detail, technical flair, and ownership**. These soft skills are highly valued in any professional development setting.
+
+
+
+
+
+
+
+
diff --git a/docs/GitHub/GitHub-basics/create-github-repo.md b/docs/GitHub/GitHub-basics/create-github-repo.md
index 47221393..72c1b19e 100644
--- a/docs/GitHub/GitHub-basics/create-github-repo.md
+++ b/docs/GitHub/GitHub-basics/create-github-repo.md
@@ -4,136 +4,257 @@ title: Create GitHub Repo (GUI)
sidebar_label: Create GitHub Repo (GUI)
sidebar_position: 1
tags: [GitHub, GitHub-development, document-structure, GitHub repo,]
-description: In this tutorial, you will learn about the how to create a GitHub repo by Online GUI interface.
+description: In this tutorial, you will learn how to create a GitHub repository from the web interface, edit its README, commit your changes and upload a file.
+hide_title: true
+footer_width: lesson
---
-In the previous post, we learned about commit, fork and clone. In this post, we are going to take a deep dive into the terminology by creating a GitHub Repository from scratch.
-To create and host a project, the repository is a place where you add all your program code files and other documentation.
+import {
+ SetupLesson, LessonHeader, SetupChecklist, StepTimeline, Step, Shot, UpNextCard,
+} from '@site/src/components/setupLesson';
+import {
+ rootClass, RepoArt, FlowChips, PrereqCards, Prereq, VisibilityToggle, TourCards, MarkdownTabs, DemoRepo, VideoCard,
+} from '@site/src/components/createRepoLesson';
-### Prerequisites
+
-- 1. You must have a GitHub account.
-- 2. You must also have a basic understanding of how Git works and ensure Git is installed and running on your operating system.
+} options={}>
-### How to create Github Repository
+In the previous post, we learned about commit, fork and clone. In this post, we are going to take a deep dive into the terminology by creating a GitHub repository from scratch. To create and host a project, the repository is the place where you add all your program code files and other documentation.
-**Step 1:** Go to the GitHub website. By default, you will be on the Home page as shown below. Click on the ``+`` icon in the top-right corner, and from the dropdown, select ``New Repository``.
+
-
- [](https://github.com/sanjay-kv)
-
-**Step 2:** Specify the name of the project and choose whether to make it public or private. For this tutorial, we’ll make it public.
+## Prerequisites
-Once a repository is made private, the project admin must manually grant permission to other GitHub users to collaborate or view it. This is a common practice at the organizational level.
+
+
-Next, check the box to include a README file—this will automatically create a ``README.md`` file along with the repository. Finally, click on ``Create repository`` at the bottom.
+Set one up in [Setup GitHub Account →](/docs/GitHub/setup-environment/)
+
+
-
- [](https://github.com/sanjay-kv)
-
+Plus a basic idea of how Git works. See [Setup Git →](/docs/GitHub/setup-environment/setup-git-on-windows)
-Once the repository is created, you’ll see a screen like the one below. The explanation of each elements is mentioned below.
-
-
- [](https://github.com/sanjay-kv)
-
+
+
-- **``**: Declares the document type and version of HTML.
-- **``**: Root element that contains all other elements.
-- **``**: Contains metadata about the document. It includes elements like `` and ``.
-- **`<meta charset="UTF-8" />`**: Specifies the character encoding of the document.
-- **`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`**: Sets the viewport properties for responsive design.
-- **`<title>`**: Sets the title of the document (displayed in the browser tab).
-- **`<body>`**: Contains the visible content of the document.
-- **`<!-- Your content goes here -->`**: Represents a comment that is not displayed in the browser.
+<SetupChecklist title="Your progress" />
-## Changing the README and adding more files.
+## How to create a GitHub repository
-I’m going to add my resume and include my name as a heading in the ``README.md`` file.
+<StepTimeline>
- <BrowserWindow url="https://github.com/sanjay-kv/Git-Demo" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+<Step n={1}>
-### Adding Markdown Language
+### Step 1: Open New repository
-Below is a visual representation of a basic HTML document structure:
-```html title="readme.md"
-# Git-Demo
+Go to the GitHub website. By default, you will be on the Home page as shown below. Click on the `+` icon in the top-right corner, and from the dropdown, select `New repository`.
+
+<Shot pins={[{ n: 1, label: 'Click on the + icon' }, { n: 2, label: 'Click on New repository' }]}>
+<BrowserWindow url="https://github.com" bodyStyle={{padding: 0}}>
+
+[](https://github.com/new)
+
+</BrowserWindow>
+</Shot>
+
+</Step>
+
+<Step n={2}>
+
+### Step 2: Name it and choose who can see it
+
+Specify the name of the project and choose whether to make it public or private. For this tutorial, we’ll make it public.
+
+<VisibilityToggle />
+
+Next, check the box to include a README file. This will automatically create a `README.md` file along with the repository. Finally, click on `Create repository` at the bottom.
+
+<Shot
+ pins={[
+ { n: 3, label: 'Choose your profile' },
+ { n: 4, label: 'Give a repo name' },
+ { n: 5, label: 'Add a description' },
+ { n: 6, label: 'Make it public' },
+ { n: 7, label: 'Add a README file' },
+ ]}
+>
+<BrowserWindow url="https://github.com/new" bodyStyle={{padding: 0}}>
+
+[](https://github.com/new)
+
+</BrowserWindow>
+</Shot>
+
+</Step>
+
+<Step n={3}>
+
+### Step 3: Tour your new repository
+
+Once the repository is created, you’ll see a screen like the one below. The explanation of each element is below.
+
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv/Git-Demo)
+
+</BrowserWindow>
+</Shot>
+
+<TourCards
+ items={[
+ { n: 8, title: 'Your README file', text: 'The README is the front page of your repository. GitHub shows it below the file list.' },
+ { n: 9, title: 'The edit button', text: 'Click the pencil icon on the README to edit it in the browser.' },
+ { n: 10, title: 'Add file', text: 'Upload any files to the repository from here.' },
+ ]}
+/>
+
+</Step>
+
+<Step n={4}>
+
+### Step 4: Edit the README
+
+I’m going to add my resume and include my name as a heading in the `README.md` file. Click the edit icon on the README.
+
+<Shot pins={[{ n: 10, label: 'Click on the Edit icon' }]}>
+<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv/Git-Demo)
+
+</BrowserWindow>
+</Shot>
+
+#### The Markdown I added
+
+README files use Markdown, a simple way to format text. Switch to Preview to see how GitHub displays it.
+
+<MarkdownTabs
+ file="README.md"
+ code={`# Git-Demo
This is a demo installation via GUI
## Developed by Sanjay Viswanathan
-This readme contains my resume, please refer to the attached file in the repo.
-```
+This readme contains my resume, please refer to the attached file in the repo.`}
+ legend={[
+ { badge: '#', text: 'A level 1 heading. Here it is the repository name.' },
+ { badge: '##', text: 'A level 2 heading, smaller than #.' },
+ { badge: 'Plain text', text: 'A line without # is shown as a normal paragraph.' },
+ { badge: 'Blank line', text: 'Starts a new paragraph or section.' },
+ ]}
+/>
+
+When you are done, click `Commit changes` to save your edit.
+<Shot pins={[{ n: 11, label: 'Click on Commit to save the changes' }]}>
+<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv/Git-Demo/edit/main/README.md)
+
+</BrowserWindow>
+</Shot>
-### Browser Rendering
+</Step>
-When the above HTML code is rendered in a browser, it will display the following output:
+<Step n={5}>
-<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md">
- <>
- <h1>Git-Demo</h1>
- <p>This is a demo installation via GUI</p>
+### Step 5: Commit the changes
+
+This is the step where you add your commit message. A short message says what changed; the extended description can explain why.
+
+<Shot
+ pins={[
+ { n: 12, label: 'Add a short message' },
+ { n: 13, label: 'Add a detailed message' },
+ { n: 14, label: 'Commit directly to main' },
+ { n: 15, label: 'Click on Commit' },
+ { n: 16, label: 'Go to the main page after the commit' },
+ ]}
+>
+<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv/Git-Demo/edit/main/README.md)
- <h1>Developed by Sanjay Viswanathan</h1>
- <p>This readme contains my resume, please refer to the attached file in the repo.</p>
-
- </>
</BrowserWindow>
+</Shot>
-### Explanation
+Back on the repository page, you can see the result of your commit.
-- **`<!DOCTYPE html>`**: Declares the document type and version of HTML.
-- **`<html>`**: Root element that contains all other elements.
-- **`<head>`**: Contains metadata about the document.
-- **`<title>`**: Sets the title of the document (displayed in the browser tab).
-- **`<meta>`**: Provides character set and viewport information.
-- **`<body>`**: Contains the visible content of the document.
-- **`<h1>`**: Heading element with the text "Hello, World!".
-- **`<p>`**: Paragraph element with the text "Welcome to HTML learning.".
+<Shot
+ pins={[
+ { n: 17, label: 'README file got changed' },
+ { n: 18, label: 'New commit history' },
+ { n: 19, label: 'Hash key for version control' },
+ { n: 20, label: 'Your latest commit message' },
+ ]}
+>
+<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv/Git-Demo)
+
+</BrowserWindow>
+</Shot>
-## Committing the changes.
+<DemoRepo repo="sanjay-kv/Git-Demo" />
-I'm going to add my resume and include my name as heading to the ``README.md`` file.
+</Step>
- <BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+<Step n={6}>
-This is the step where you need to add additional comments.
+### Step 6: Upload your resume
- <BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+Now let’s upload my resume to the repository. Click on `Add file`, then `Upload files`.
- <BrowserWindow url="https://github.com/sanjay-kv/Git-Demo" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+<Shot pins={[{ n: 21, label: 'Click on Add file' }, { n: 22, label: 'Click on Upload' }]}>
+<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo" bodyStyle={{padding: 0}}>
-https://github.com/sanjay-kv/Git-Demo
+[](https://github.com/sanjay-kv/Git-Demo)
-### Now let's upload your resume
+</BrowserWindow>
+</Shot>
-I'm going to add my resume and include my name as heading to the ``README.md`` file.
+Drag your file in or choose it from your computer, add a commit message and click `Commit changes`.
- <BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+<Shot
+ pins={[
+ { n: 23, label: 'Upload your file from your system' },
+ { n: 24, label: 'Add a commit message' },
+ { n: 25, label: 'Click on Commit' },
+ ]}
+>
+<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/upload/main" bodyStyle={{padding: 0}}>
-This is the step where you need to add additional comments.
+[](https://github.com/sanjay-kv/Git-Demo/upload/main)
- <BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/upload/main" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+</BrowserWindow>
+</Shot>
You will now be able to see the uploaded resume in your repository.
-### Watch the video Tutorial
+</Step>
+
+</StepTimeline>
-<iframe width="880" height="480" src="https://www.youtube.com/embed/XWjx-RjmhRM?list=PLrLTYhoDFx-kiuFiGQqVpYYZ56pIhUW63" title="How to create your first GitHub repository" style={{ border: "none" }} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+## Watch the video tutorial
+
+<VideoCard
+ id="XWjx-RjmhRM"
+ list="PLrLTYhoDFx-kiuFiGQqVpYYZ56pIhUW63"
+ title="How to create your first GitHub repository"
+ channel="recode hive on YouTube"
+/>
## Conclusion
-In this tutorial, you learned about the syntax and structure of HTML. HTML syntax consists of elements, tags and attributes that define the structure and content of a web page. A HTML document follows a basic structure with elements like `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, `<meta>` and `<body>`. Understanding HTML syntax and structure is essential for creating web pages and applications.
+In this tutorial, you created a GitHub repository from the web interface, edited its README with Markdown, committed your changes and uploaded a file. In the next post, you will create a repository from the command line.
+
+<UpNextCard />
+
+</SetupLesson>
diff --git a/docs/GitHub/GitHub-basics/first-opensource-code.md b/docs/GitHub/GitHub-basics/first-opensource-code.md
index 836f8b2d..b8476869 100644
--- a/docs/GitHub/GitHub-basics/first-opensource-code.md
+++ b/docs/GitHub/GitHub-basics/first-opensource-code.md
@@ -6,14 +6,26 @@ sidebar_position: 5
tags: [git, github, open-source, contribution, pull-request, fork]
description: In this tutorial, you will learn how to make your first open source contribution on GitHub without using the command line. Learn to fork, edit, commit, and create pull requests directly through the GitHub web interface.
keywords: [git, github, open source, first contribution, pull request, fork repository, github tutorial, web-based editing, opensource contribution, beginner guide, github workflow, contributing to open source]
+hide_title: true
+footer_width: lesson
---
-# First Open Source Project – Making Your First Contribution
+import {
+ SetupLesson, LessonHeader, SetupChecklist, StepTimeline, Step, Shot, UpNextCard,
+} from '@site/src/components/setupLesson';
-## Introduction
+<SetupLesson
+ storageKey="recodehive:first-opensource-code:done"
+ steps={["Find the repository","Fork the repository","Edit on GitHub","Commit changes","Create a pull request","Wait for review"]}
+ doneMessage={"🎉 All 6 steps done. Nice work!"}
+>
+
+<LessonHeader title={"Let's Do First Opensource Project"} platform="🌐 Web">
Welcome to your first open source contribution! In this tutorial, you will learn how to contribute to an open source project directly through GitHub's web interface—no command line required! This is perfect for beginners who want to start contributing to open source projects.
+</LessonHeader>
+
## What is Open Source?
Open source software is code that is freely available for anyone to view, use, modify and distribute. Contributing to open source projects helps you:
@@ -41,16 +53,26 @@ The typical open source contribution workflow involves:
Let's walk through each step!
-## Step 1: Find the Repository
+<SetupChecklist title="Your checklist" />
+
+<StepTimeline>
+
+<Step n={1}>
+
+### Step 1: Find the Repository
Navigate to the practice repository: [https://github.com/sanjay-kv/Open-source-Practice](https://github.com/sanjay-kv/Open-source-Practice)
This is a beginner-friendly repository designed for practicing open source contributions.
+<Shot>
<BrowserWindow url="https://github.com/sanjay-kv/Open-source-Practice" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv/Open-source-Practice)
- <div style={{ textAlign: "center" }}><small>Step 1: Repository Home Page</small></div>
+
+[](https://github.com/sanjay-kv/Open-source-Practice)
+<div style={{ textAlign: "center" }}><small>Step 1: Repository Home Page</small></div>
+
</BrowserWindow>
+</Shot>
Take a moment to:
- Read the README file to understand the project
@@ -58,7 +80,11 @@ Take a moment to:
- Look at existing issues or pull requests
- Understand what kind of contributions are welcomed
-## Step 2: Fork the Repository
+</Step>
+
+<Step n={2}>
+
+### Step 2: Fork the Repository
Forking creates your own copy of the repository where you can make changes without affecting the original project.
@@ -66,43 +92,63 @@ Forking creates your own copy of the repository where you can make changes witho
2. Select your account as the destination
3. Wait for GitHub to create your fork
+<Shot>
<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub/fork" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv/Learn-GitHub/fork)
- <div style={{ textAlign: "center" }}><small>Step 2: Forking the Repository</small></div>
+
+[](https://github.com/sanjay-kv/Learn-GitHub/fork)
+<div style={{ textAlign: "center" }}><small>Step 2: Forking the Repository</small></div>
+
</BrowserWindow>
+</Shot>
+<Shot>
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
- [](https://github.com/sandemouser/Learn-GitHub)
- <div style={{ textAlign: "center" }}><small>Step 3: Fork Button Location</small></div>
+
+[](https://github.com/sandemouser/Learn-GitHub)
+<div style={{ textAlign: "center" }}><small>Step 3: Fork Button Location</small></div>
+
</BrowserWindow>
+</Shot>
Once the fork is complete, you'll see:
- Your username in the repository name
- A note saying "forked from [original-repo]"
+<Shot>
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
- [](https://github.com/sandemouser/Learn-GitHub)
- <div style={{ textAlign: "center" }}><small>Step 4: Fork Complete</small></div>
+
+[](https://github.com/sandemouser/Learn-GitHub)
+<div style={{ textAlign: "center" }}><small>Step 4: Fork Complete</small></div>
+
</BrowserWindow>
+</Shot>
+
+</Step>
-## Step 3: Edit files directly on GitHub
+<Step n={3}>
+
+### Step 3: Edit files directly on GitHub
One of the great features of GitHub is the ability to edit files directly in your browser without cloning the repository to your computer.
-### Finding the File to Edit
+#### Finding the File to Edit
1. Navigate to the file you want to edit (usually specified in the project's README)
2. Click on the file name to view it
3. Click the **pencil icon** (✏️) in the top-right corner to edit
-### Making Your Changes
+#### Making Your Changes
For this practice repository, you'll typically add your name to a contributors list:
+<Shot>
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
- [](https://github.com/sandemouser/Learn-GitHub)
- <div style={{ textAlign: "center" }}><small>Step 5: Add Your Name</small></div>
+
+[](https://github.com/sandemouser/Learn-GitHub)
+<div style={{ textAlign: "center" }}><small>Step 5: Add Your Name</small></div>
+
</BrowserWindow>
+</Shot>
Common first contributions include:
- Adding your name to a contributors list
@@ -111,10 +157,14 @@ Common first contributions include:
- Adding a translation
- Improving README formatting
+<Shot>
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
- [](https://github.com/sandemouser/Learn-GitHub)
- <div style={{ textAlign: "center" }}><small>Step 6: Changes Made</small></div>
+
+[](https://github.com/sandemouser/Learn-GitHub)
+<div style={{ textAlign: "center" }}><small>Step 6: Changes Made</small></div>
+
</BrowserWindow>
+</Shot>
:::tip Best Practices for Making Changes
@@ -126,11 +176,15 @@ Common first contributions include:
:::
-## Step 4: Commit your changes
+</Step>
+
+<Step n={4}>
+
+### Step 4: Commit your changes
After making your edits, you need to commit them. A commit is like saving a snapshot of your changes with a description.
-### Writing a good commit message
+#### Writing a good commit message
1. Scroll down to the "Commit changes" section
2. Write a clear, concise commit message describing what you changed
@@ -138,10 +192,14 @@ After making your edits, you need to commit them. A commit is like saving a snap
4. Select "Commit directly to the main branch" for simple changes
5. Click **Commit changes**
+<Shot>
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
- [](https://github.com/sandemouser/Learn-GitHub)
- <div style={{ textAlign: "center" }}><small>Step 7: Commit Changes</small></div>
+
+[](https://github.com/sandemouser/Learn-GitHub)
+<div style={{ textAlign: "center" }}><small>Step 7: Commit Changes</small></div>
+
</BrowserWindow>
+</Shot>
**Good commit message examples:**
- ✅ "Add John Doe to contributors list"
@@ -153,16 +211,24 @@ After making your edits, you need to commit them. A commit is like saving a snap
- ❌ "Changes"
- ❌ "asdfasdf"
+<Shot>
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
- [](https://github.com/sandemouser/Learn-GitHub)
- <div style={{ textAlign: "center" }}><small>Step 8: Final Commit Review</small></div>
+
+[](https://github.com/sandemouser/Learn-GitHub)
+<div style={{ textAlign: "center" }}><small>Step 8: Final Commit Review</small></div>
+
</BrowserWindow>
+</Shot>
-## Step 5: Create a Pull Request
+</Step>
+
+<Step n={5}>
+
+### Step 5: Create a Pull Request
Now that you've made changes in your fork, it's time to propose those changes to the original repository through a **Pull Request** (PR).
-### What is a Pull Request?
+#### What is a Pull Request?
A Pull Request is a way to propose changes to a repository. It allows:
- Project maintainers to review your changes
@@ -170,7 +236,7 @@ A Pull Request is a way to propose changes to a repository. It allows:
- Automated tests to run on your code
- Iterative improvements before merging
-### Steps to Create a Pull Request
+#### Steps to Create a Pull Request
1. **Navigate to the original repository** (not your fork)
2. Click on the **Pull Requests** tab
@@ -186,12 +252,16 @@ A Pull Request is a way to propose changes to a repository. It allows:
8. Add a descriptive title and detailed description
9. Click **Create pull request** again to submit
+<Shot>
<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
- [](https://github.com/sandemouser/Learn-GitHub)
- <div style={{ textAlign: "center" }}><small>Step 9: Create Pull Request</small></div>
+
+[](https://github.com/sandemouser/Learn-GitHub)
+<div style={{ textAlign: "center" }}><small>Step 9: Create Pull Request</small></div>
+
</BrowserWindow>
+</Shot>
-### Writing a Good Pull Request Description
+#### Writing a Good Pull Request Description
Your PR description should include:
- **What** changes you made
@@ -215,17 +285,17 @@ Added my name to the contributors list as per the contribution guidelines.
- [x] Read the contribution guidelines
```
-## Understanding "Compare Across Forks"
+#### Understanding "Compare Across Forks"
The **Compare across forks** feature is crucial for creating pull requests from your fork to the original repository.
-### What Does It Do?
+#### What Does It Do?
This feature allows you to compare changes between:
- Your forked repository (where you made changes)
- The original repository (where you want to contribute)
-### Why Is It Important?
+#### Why Is It Important?
The comparison view shows:
- **All commits** you've made since forking
@@ -234,7 +304,7 @@ The comparison view shows:
- **Deletions** highlighted in red
- **Conflict warnings** if there are any
-### How to Use It Effectively
+#### How to Use It Effectively
1. **Select the correct branches:**
- Base: Original repository's main branch
@@ -250,7 +320,7 @@ The comparison view shows:
- Update your fork if needed
- Resolve conflicts before creating PR
-### Benefits of Comparing
+#### Benefits of Comparing
- **Prevents mistakes** - Catch unintended changes early
- **Improves quality** - Review your work before submission
@@ -267,7 +337,11 @@ The comparison view shows:
:::
-## Step 6: Wait for Review
+</Step>
+
+<Step n={6}>
+
+### Step 6: Wait for Review
After creating your pull request:
@@ -276,6 +350,9 @@ After creating your pull request:
3. **Make requested changes** - Update your PR based on feedback
4. **Stay professional** - Be courteous and respectful
+</Step>
+
+</StepTimeline>
## Watch This Video Tutorial
@@ -315,3 +392,6 @@ Congratulations! You've learned how to make your first open source contribution
- ✅ Compare changes across forks
- ✅ Create pull requests
+<UpNextCard />
+
+</SetupLesson>
diff --git a/docs/GitHub/GitHub-basics/github-repo-command-line.md b/docs/GitHub/GitHub-basics/github-repo-command-line.md
index fd790306..1d074397 100644
--- a/docs/GitHub/GitHub-basics/github-repo-command-line.md
+++ b/docs/GitHub/GitHub-basics/github-repo-command-line.md
@@ -3,37 +3,66 @@ id: github-repo-command-line
title: Create Repo Via Command line
sidebar_label: Create Repo Via Command line
sidebar_position: 2
-tags: [html, web-development, document-structure,]
-description: In this tutorial, you will learn about the structure of an HTML document and how to create a basic HTML document.
+tags: [git, github, command-line, repository]
+description: In this tutorial, you will learn how to create a GitHub repository and push your first files to it from the command line.
+hide_title: true
+footer_width: lesson
---
-HTML (Hypertext Markup Language) is the standard markup language for creating web pages. It provides the structure and layout of the content on the web. In this tutorial, you will learn about the syntax and structure of HTML.
+import {
+ SetupLesson, LessonHeader, SetupChecklist, StepTimeline, Step, Shot, UpNextCard,
+} from '@site/src/components/setupLesson';
+
+<SetupLesson
+ storageKey="recodehive:github-repo-command-line:done"
+ steps={["Create the repository","Add and push files"]}
+ doneMessage={"🎉 All 2 steps done. Nice work!"}
+>
+
+<LessonHeader title={"Create Repo Via Command line"} platform="💻 Terminal">
+
+In this tutorial, you will learn how to create a GitHub repository and push your first files to it from the command line.
+
+</LessonHeader>
## Prerequisites
1. You should have a GitHub account.
2. You should have a basic understanding of how Git works and ensure Git is installed and running on your operating system.
+<SetupChecklist title="Your checklist" />
+
+<StepTimeline>
+<Step n={1}>
-### How to create Github Repository
+### Step 1: How to create Github Repository
-Step 1: Go to GitHub and create a new Repository.
+**1.** Go to GitHub and create a new Repository.
+
+<Shot>
+<BrowserWindow url="https://github.com" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv)
+
+</BrowserWindow>
+</Shot>
- <BrowserWindow url="https://github.com" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
<br />
-Step 2: Specify the name of your project, make it public or private, check the option to include a README file. Then click on Create repository on the button below.
+**2.** Specify the name of your project, make it public or private, check the option to include a README file. Then click on Create repository on the button below.
+
+<Shot>
+<BrowserWindow url="https://github.com/new" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv)
+</BrowserWindow>
+</Shot>
- <BrowserWindow url="https://github.com/new" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
Once the repository is created, you'll see a screen similar to the one below, the explanation for each element is provided below.
- ```html title="create a new repository on the command line"
+ ```bash title="create a new repository on the command line"
echo "# demo-repo" >> README.md
git init
git add README.md
@@ -42,79 +71,87 @@ git branch -M main
git remote add origin https://github.com/sanjay-kv/demo-repo.git
git push -u origin main
```
- <BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
-- **`<!DOCTYPE html>`**: Declares the document type and version of HTML.
-- **`<html>`**: Root element that contains all other elements.
-- **`<head>`**: Contains metadata about the document. It includes elements like `<meta>` and `<title>`.
-- **`<meta charset="UTF-8" />`**: Specifies the character encoding of the document.
-- **`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`**: Sets the viewport properties for responsive design.
-- **`<title>`**: Sets the title of the document (displayed in the browser tab).
-- **`<body>`**: Contains the visible content of the document.
-- **`<!-- Your content goes here -->`**: Represents a comment that is not displayed in the browser.
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
+[](https://github.com/sanjay-kv)
-### Browser Rendering
+</BrowserWindow>
+</Shot>
- <BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+</Step>
+<Step n={2}>
-When the above HTML code is rendered in a browser, it will display the following content:
+### Step 2: Browser Rendering
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
- <BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+[](https://github.com/sanjay-kv)
-When the above HTML code is rendered in a browser, it will display the following content:
+</BrowserWindow>
+</Shot>
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
- <BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+[](https://github.com/sanjay-kv)
+
+</BrowserWindow>
+</Shot>
+
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv)
+
+</BrowserWindow>
+</Shot>
Now you can see the new file has been added to your local system
-When the above HTML code is rendered in a browser, it will display the following content:
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv)
+</BrowserWindow>
+</Shot>
- <BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+**10.** Once the work is done, click save and open cmd or Terminal
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
-When the above HTML code is rendered in a browser, it will display the following content:
-How to push Github Repository?
-Step 10: Once the work is done, click save and open cmd or Terminal
+[](https://github.com/sanjay-kv)
- <BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+</BrowserWindow>
+</Shot>
-Step 11: Initially when I was creating the repo I used Git add * to add all files in one go.
+**11.** Initially when I was creating the repo I used Git add * to add all files in one go.
If you are committing for the first time, Git may prompt you to enter your GitHub email id and username to proceed.
The screenshot below shows an example of the prompt. After entering these details, when you run the git push command, a browser window may open asking you to sign in to GitHub.
- ```html title="create a new repository on the command line"
+ ```bash title="create a new repository on the command line"
git config --global user.email "Enter your github Email"
git config --global user.name "Github username"
```
-### Watch the video Tutorial
-
+</Step>
+</StepTimeline>
+### Watch the video Tutorial
<iframe width="880" height="480" src="https://www.youtube.com/embed/DO38CZcw5pg?list=PLrLTYhoDFx-kiuFiGQqVpYYZ56pIhUW63" title="Github create repo using command line" style={{ border: "none" }} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
## Conclusion
-In this tutorial, you learned about the syntax and structure of HTML. HTML syntax consists of elements, tags, and attributes that define the structure and content of a web page.
+In this tutorial, you created a repository on GitHub, then used Git on the command line to add a file, commit it and push it to the remote repository.
+
+<UpNextCard />
-A HTML document follows a basic structure with elements like `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, `<meta>`, and `<body>`.
- Understanding HTML syntax and structure is essential for creating web pages and applications.
\ No newline at end of file
+</SetupLesson>
diff --git a/docs/GitHub/GitHub-basics/how-to-clone-repo.md b/docs/GitHub/GitHub-basics/how-to-clone-repo.md
index 576c15b5..6595d836 100644
--- a/docs/GitHub/GitHub-basics/how-to-clone-repo.md
+++ b/docs/GitHub/GitHub-basics/how-to-clone-repo.md
@@ -6,10 +6,26 @@ sidebar_position: 3
tags: [git, github, version-control, repository]
description: In this tutorial, you will learn how to clone a GitHub repository to your local machine using Git commands.
keywords: [git, github, clone repository, git clone, version control, github tutorial, git basics, repository management, git commands]
+hide_title: true
+footer_width: lesson
---
+import {
+ SetupLesson, LessonHeader, SetupChecklist, StepTimeline, Step, Shot, UpNextCard,
+} from '@site/src/components/setupLesson';
+
+<SetupLesson
+ storageKey="recodehive:how-to-clone-repository:done"
+ steps={["Get the URL","Open the terminal","Run the clone command","Open the project"]}
+ doneMessage={"🎉 All 4 steps done. Nice work!"}
+>
+
+<LessonHeader title={"How To Clone Repository"} platform="💻 Terminal">
+
In this tutorial we will learn about how to clone a GitHub repository to your local machine.
+</LessonHeader>
+
## What is Cloning?
Cloning a repository means creating a local copy of a remote repository on your computer. This allows you to work on the project locally, make changes, and sync them back to the remote repository.
@@ -21,7 +37,11 @@ Before cloning a repository, make sure you have:
- A GitHub account (optional, for private repositories)
- The repository URL you want to clone
-## Steps to Clone a Repository
+<SetupChecklist title="Your checklist" />
+
+<StepTimeline>
+
+<Step n={1}>
### Step 1: Get the Repository URL
@@ -33,17 +53,33 @@ Before cloning a repository, make sure you have:
https://github.com/sanjay-kv/Learn-GitHub.git
```
-<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv/Learn-GitHub)
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv/Learn-GitHub)
+
</BrowserWindow>
+</Shot>
+
+</Step>
+
+<Step n={2}>
### Step 2: Open Command Line/Terminal
Open your command prompt (Windows) or terminal (Mac/Linux) and navigate to the directory where you want to clone the repository.
-<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv/Learn-GitHub)
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv/Learn-GitHub)
+
</BrowserWindow>
+</Shot>
+
+</Step>
+
+<Step n={3}>
### Step 3: Run the Clone Command
@@ -58,9 +94,17 @@ This command will:
2. Download all files and commit history
3. Set up the remote connection automatically
-<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv/Learn-GitHub)
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv/Learn-GitHub)
+
</BrowserWindow>
+</Shot>
+
+</Step>
+
+<Step n={4}>
### Step 4: Navigate to the Cloned Repository
@@ -70,6 +114,10 @@ After cloning, navigate into the newly created directory:
cd Learn-GitHub
```
+</Step>
+
+</StepTimeline>
+
## Cloning Options
### Clone with SSH
@@ -106,7 +154,10 @@ git clone -b branch-name https://github.com/sanjay-kv/Learn-GitHub.git
:::
-
## Conclusion
Cloning a repository is a fundamental Git operation that allows you to work on projects locally. By following these steps, you can easily clone any GitHub repository and start contributing to projects or working on your own code locally.
+
+<UpNextCard />
+
+</SetupLesson>
diff --git a/docs/GitHub/GitHub-basics/how-to-fork.md b/docs/GitHub/GitHub-basics/how-to-fork.md
index c1964513..70fbcd3c 100644
--- a/docs/GitHub/GitHub-basics/how-to-fork.md
+++ b/docs/GitHub/GitHub-basics/how-to-fork.md
@@ -6,10 +6,26 @@ sidebar_position: 4
tags: [git, github, fork, open-source, contribution]
description: In this tutorial, you will learn how to fork a GitHub repository and create your own copy to work on and contribute back to the original project.
keywords: [git, github, fork repository, forking, open source, contribution, pull request, github fork, collaboration, repository management]
+hide_title: true
+footer_width: lesson
---
+import {
+ SetupLesson, LessonHeader, SetupChecklist, StepTimeline, Step, Shot, UpNextCard,
+} from '@site/src/components/setupLesson';
+
+<SetupLesson
+ storageKey="recodehive:how-to-fork:done"
+ steps={["Open the repository","Click Fork","Wait for the fork","Verify your fork"]}
+ doneMessage={"🎉 All 4 steps done. Nice work!"}
+>
+
+<LessonHeader title={"How to Fork a Repository"} platform="🌐 Web">
+
In this tutorial, you will learn how to fork a GitHub repository and create your own copy of a project that you can freely experiment with and contribute back to.
+</LessonHeader>
+
## What is Forking?
Forking a repository creates a personal copy of someone else's project in your GitHub account. This allows you to:
@@ -26,7 +42,11 @@ You should fork a repository when you want to:
- Experiment with code without affecting the original
- Create your own version of a project
-## Steps to Fork a Repository
+<SetupChecklist title="Your checklist" />
+
+<StepTimeline>
+
+<Step n={1}>
### Step 1: Navigate to the Repository
@@ -38,9 +58,17 @@ Make sure you're logged into your GitHub account.
https://github.com/sanjay-kv/Learn-GitHub
```
-<BrowserWindow url="https://github.com/sanjay-kv/Open-source-Practice" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv/Open-source-Practice)
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/Open-source-Practice" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv/Open-source-Practice)
+
</BrowserWindow>
+</Shot>
+
+</Step>
+
+<Step n={2}>
### Step 2: Click the Fork Button
@@ -48,17 +76,33 @@ In the top-right corner of the repository page, you'll see a "Fork" button. Clic
GitHub will show you a screen asking where you want to fork the repository (usually to your personal account).
-<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub/fork" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv/Learn-GitHub/fork)
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/Learn-GitHub/fork" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv/Learn-GitHub/fork)
+
</BrowserWindow>
+</Shot>
+
+</Step>
+
+<Step n={3}>
### Step 3: Wait for the Fork to Complete
GitHub will create a copy of the repository under your account. This process usually takes a few seconds. Once complete, you'll be redirected to your forked repository.
-<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
- [](https://github.com/sandemouser/Learn-GitHub)
+<Shot>
+<BrowserWindow url="https://github.com/sandemouser/Learn-GitHub" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sandemouser/Learn-GitHub)
+
</BrowserWindow>
+</Shot>
+
+</Step>
+
+<Step n={4}>
### Step 4: Verify Your Fork
@@ -67,6 +111,9 @@ After forking, you should see:
- A note indicating "forked from sanjay-kv/Learn-GitHub"
- All the files and branches from the original repository
+</Step>
+
+</StepTimeline>
:::tip Best Practices for Forking and Contributing
@@ -92,7 +139,6 @@ Understanding the difference is important:
| **Connection** | Maintains link to original repo | No direct link to original repo |
| **Visibility** | Public on your GitHub profile | Only on your computer |
-
## Deleting a Fork
If you no longer need your fork:
@@ -111,3 +157,6 @@ Deleting a fork is permanent and cannot be undone. Make sure you have backed up
Forking is a powerful feature that enables collaboration and experimentation in the GitHub ecosystem. By forking repositories, you can contribute to open-source projects, learn from others' code, and create your own versions of existing projects without affecting the original.
+<UpNextCard />
+
+</SetupLesson>
diff --git a/docs/GitHub/Maintainer-guide/enable-discussion.md b/docs/GitHub/Maintainer-guide/enable-discussion.md
index 6408d82c..b6c7f88c 100644
--- a/docs/GitHub/Maintainer-guide/enable-discussion.md
+++ b/docs/GitHub/Maintainer-guide/enable-discussion.md
@@ -5,40 +5,74 @@ sidebar_label: How to Enable Discussions
sidebar_position: 4
tags: [GitHub, GitHub-development, document-structure, GitHub repo,]
description: In this tutorial, you will learn about the how to create a GitHub repo by Online GUI interface.
+hide_title: true
+footer_width: lesson
---
+import {
+ SetupLesson, LessonHeader, SetupChecklist, StepTimeline, Step, Shot, UpNextCard,
+} from '@site/src/components/setupLesson';
+
+<SetupLesson
+ storageKey="recodehive:enable-dicussion:done"
+ steps={["Get started","Edit the README","Commit changes","Upload a file"]}
+ doneMessage={"🎉 All 4 steps done. Nice work!"}
+>
+
+<LessonHeader title={"How to Enable GitHub Discussions"} platform="🌐 Web">
+
In the previous post we spoke about commit, fork, clone, in this post we gonna deep dive into the terminology by creating a GitHub Repository from scratch.
-In order to create a project and host, the repository is a place where you add all your program code files and other documentation.
+In order to create a project and host, the repository is a place where you add all your program code files and other documentation.
+
+</LessonHeader>
### Prerequisites
- 1. You must have a GitHub account.
- 2. You must also have a basic understanding of how Git works and ensure Git is installed and running on your operating system.
+<SetupChecklist title="Your checklist" />
+
+<StepTimeline>
+
+<Step n={1}>
+
+### Step 1: How to create GitHub Repository
+
+**1.** Go to the GitHub website. By default, you will be on the Home page as shown below. Click on the ``+`` icon in the top-right corner, and from the dropdown, select ``New Repository``.
+
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website" bodyStyle={{padding: 0}}>
-### How to create GitHub Repository
+[](https://github.com/recodehive/recode-website)
-**Step 1:** Go to the GitHub website. By default, you will be on the Home page as shown below. Click on the ``+`` icon in the top-right corner, and from the dropdown, select ``New Repository``.
+</BrowserWindow>
+</Shot>
- <BrowserWindow url="https://github.com/recodehive/recode-website" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website)
- </BrowserWindow>
-**Step 2:** Specify the name of the project and choose whether to make it public or private. For this tutorial, we’ll make it public.
+**2.** Specify the name of the project and choose whether to make it public or private. For this tutorial, we’ll make it public.
Once a repository is made private, the project admin must manually grant permission to other GitHub users to collaborate or view it. This is a common practice at the organizational level.
Next, check the box to include a README file—this will automatically create a ``README.md`` file along with the repository. Finally, click on ``Create repository`` at the bottom.
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/milestones)
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones)
- </BrowserWindow>
+</BrowserWindow>
+</Shot>
Once the repository is created, you’ll see a screen like the one below. The explanation of each elements is mentioned below.
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones)
- </BrowserWindow>
+
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/milestones)
+
+</BrowserWindow>
+</Shot>
- **`<!DOCTYPE html>`**: Declares the document type and version of HTML.
- **`<html>`**: Root element that contains all other elements.
@@ -49,19 +83,26 @@ Once the repository is created, you’ll see a screen like the one below. The ex
- **`<body>`**: Contains the visible content of the document.
- **`<!-- Your content goes here -->`**: Represents a comment that is not displayed in the browser.
+</Step>
-## Changing Readme and Adding more files.
+<Step n={2}>
+
+### Step 2: Changing Readme and Adding more files
I'm going to add my resume and add my name as heading to the ``README.md`` file
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones/new" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones/new)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones/new" bodyStyle={{padding: 0}}>
-### Adding Markdown Language
+[](https://github.com/recodehive/recode-website/milestones/new)
+
+</BrowserWindow>
+</Shot>
+
+#### Adding Markdown Language
Below is a visual representation of the basic HTML document structure:
-```html title="readme.md"
+```markdown title="README.md"
# Git-Demo
This is a demo installation via GUI
@@ -69,8 +110,7 @@ This is a demo installation via GUI
This readme contains my resume, please refer to the attached file in the repo.
```
-
-### Browser Rendering
+#### Browser Rendering
When the above HTML code is rendered in a browser, it will display the following content:
@@ -85,7 +125,7 @@ When the above HTML code is rendered in a browser, it will display the following
</>
</BrowserWindow>
-### Explanation
+#### Explanation
- **`<!DOCTYPE html>`**: Declares the document type and version of HTML.
- **`<html>`**: Root element that contains all other elements.
@@ -96,36 +136,57 @@ When the above HTML code is rendered in a browser, it will display the following
- **`<h1>`**: Heading element with the text "Hello, World!".
- **`<p>`**: Paragraph element with the text "Welcome to HTML learning.".
-## Committing the changes.
+</Step>
+
+<Step n={3}>
+
+### Step 3: Committing the changes
I'm going to add my resume and add my name as heading to the ``README.md`` file
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones?with_issues=no)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/milestones?with_issues=no)
+
+</BrowserWindow>
+</Shot>
This is the step where you need to add additional comments.
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones?with_issues=no)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
+[](https://github.com/recodehive/recode-website/milestones?with_issues=no)
+</BrowserWindow>
+</Shot>
https://github.com/sanjay-kv/Git-Demo
-### Now let's upload your resume
+</Step>
+
+<Step n={4}>
+
+### Step 4: Now let's upload your resume
I'm going to add my resume and add my name as heading to the ``README.md`` file
- <BrowserWindow url="https://github.com/recodehive/recode-website/issues/21" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/issues/21)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/issues/21" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/issues/21)
+
+</BrowserWindow>
+</Shot>
+Now you will be able to see the uploaded resume.
+
+</Step>
-Now you will be able to see the uploaded resume.
+</StepTimeline>
### Watch the video Tutorial
@@ -135,3 +196,7 @@ Now you will be able to see the uploaded resume.
In this tutorial, you learned about the syntax and structure of HTML. HTML syntax consists of elements, tags, and attributes that define the structure and content of a web page.
A HTML document follows a basic structure with elements like `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, `<meta>`, and `<body>`. Understanding HTML syntax and structure is essential for creating web pages and applications.
+
+<UpNextCard />
+
+</SetupLesson>
diff --git a/docs/GitHub/Maintainer-guide/github-labels.md b/docs/GitHub/Maintainer-guide/github-labels.md
index b861787c..64806aae 100644
--- a/docs/GitHub/Maintainer-guide/github-labels.md
+++ b/docs/GitHub/Maintainer-guide/github-labels.md
@@ -5,35 +5,70 @@ sidebar_label: Create Labels on GitHub
sidebar_position: 1
tags: [GitHub, GitHub-development, document-structure, GitHub repo,Github]
description: In this tutorial, you will learn about the how to create a GitHub repo by Online GUI interface.
+hide_title: true
+footer_width: lesson
---
+import {
+ SetupLesson, LessonHeader, SetupChecklist, StepTimeline, Step, Shot, UpNextCard,
+} from '@site/src/components/setupLesson';
+
+<SetupLesson
+ storageKey="recodehive:github-labels:done"
+ steps={["Get started","Edit the README","Commit changes","Upload a file"]}
+ doneMessage={"🎉 All 4 steps done. Nice work!"}
+>
+
+<LessonHeader title={"How to Create Labels on GitHub"} platform="🌐 Web">
+
In the previous post we spoke about commit, fork, clone, in this post we gonna deep dive into the terminology by creating a GitHub Repository from the Scratch.
-Inorder to create a project and host, the repository is a place where you add all your program code files and other documentation.
+Inorder to create a project and host, the repository is a place where you add all your program code files and other documentation.
+
+</LessonHeader>
### Prerequisites
- 1. You should have a Github account
- 2. Should have a basic understanding of how Git works/ and Git running in your OS.
-### How to create Github Repository
+<SetupChecklist title="Your checklist" />
+
+<StepTimeline>
+
+<Step n={1}>
+
+### Step 1: How to create Github Repository
+
+**1.** Go to GitHub page, by default you will be in the Home page as shown below, Step 1 requires you to click on the ``+`` Icon and from the drop down click on the ``New Repository``.
+
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website" bodyStyle={{padding: 0}}>
-**Step 1:** Go to GitHub page, by default you will be in the Home page as shown below, Step 1 requires you to click on the ``+`` Icon and from the drop down click on the ``New Repository``.
+[](https://github.com/recodehive/recode-website)
- <BrowserWindow url="https://github.com/recodehive/recode-website" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website)
- </BrowserWindow>
-**Step 2:** Specify the name of the Project, make It public or private, for this tutorial you will make it public, Once the repository is gone private the project admin have to give permission or manually added other GitHub user to collaborate or make it visible. This is usual application in the organisation level. The next step check on the readme file, this allows you to create a ``readme.md`` file along with the repository creation. Then click on ``Create repository`` on the button below.
+</BrowserWindow>
+</Shot>
+
+**2.** Specify the name of the Project, make It public or private, for this tutorial you will make it public, Once the repository is gone private the project admin have to give permission or manually added other GitHub user to collaborate or make it visible. This is usual application in the organisation level. The next step check on the readme file, this allows you to create a ``readme.md`` file along with the repository creation. Then click on ``Create repository`` on the button below.
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>
- <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/issues)
- </BrowserWindow>
+[](https://github.com/recodehive/recode-website/issues)
+
+</BrowserWindow>
+</Shot>
Upon creation you will get a screen like this below, the explanation of each elements is mentioned below.
- <BrowserWindow url="https://github.com/recodehive/recode-website/labels" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/labels)
- </BrowserWindow>
+
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/labels" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/labels)
+
+</BrowserWindow>
+</Shot>
- **`<!DOCTYPE html>`**: Declares the document type and version of HTML.
- **`<html>`**: Root element that contains all other elements.
@@ -44,19 +79,26 @@ Upon creation you will get a screen like this below, the explanation of each ele
- **`<body>`**: Contains the visible content of the document.
- **`<!-- Your content goes here -->`**: Represents a comment that is not displayed in the browser.
+</Step>
+
+<Step n={2}>
-## Changing Readme and Adding more files.
+### Step 2: Changing Readme and Adding more files
Im going to add my resume and add my name as heading to the ``readme.md`` file
- <BrowserWindow url="https://github.com/recodehive/recode-website/labels" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/labels)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/labels" bodyStyle={{padding: 0}}>
-### Adding Markdown Language
+[](https://github.com/recodehive/recode-website/labels)
+
+</BrowserWindow>
+</Shot>
+
+#### Adding Markdown Language
Below is a visual representation of the basic HTML document structure:
-```html title="readme.md"
+```markdown title="README.md"
# Git-Demo
This is a demo installation via GUI
@@ -64,8 +106,7 @@ This is a demo installation via GUI
This readme contains my resume, please refer to the attached file in the repo.
```
-
-### Browser Rendering
+#### Browser Rendering
When the above HTML code is rendered in a browser, it will display the following content:
@@ -80,7 +121,7 @@ When the above HTML code is rendered in a browser, it will display the following
</>
</BrowserWindow>
-### Explanation
+#### Explanation
- **`<!DOCTYPE html>`**: Declares the document type and version of HTML.
- **`<html>`**: Root element that contains all other elements.
@@ -91,35 +132,55 @@ When the above HTML code is rendered in a browser, it will display the following
- **`<h1>`**: Heading element with the text "Hello, World!".
- **`<p>`**: Paragraph element with the text "Welcome to HTML learning.".
-## Committing the changes.
+</Step>
+
+<Step n={3}>
+
+### Step 3: Committing the changes
Im going to add my resume and add my name as heading to the ``readme.md`` file
- <BrowserWindow url="https://github.com/recodehive/recode-website/labels" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/labels)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/labels" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/labels)
+
+</BrowserWindow>
+</Shot>
Here is the step where they need adding additional comments
- <BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md" bodyStyle={{padding: 0}}>
+[](https://github.com/sanjay-kv)
+</BrowserWindow>
+</Shot>
https://github.com/sanjay-kv/Git-Demo
-### Now let's upload your resume
+</Step>
+
+<Step n={4}>
+
+### Step 4: Now let's upload your resume
Im going to add my resume and add my name as heading to the ``readme.md`` file
- <BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md" bodyStyle={{padding: 0}}>
- [](https://github.com/sanjay-kv)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md" bodyStyle={{padding: 0}}>
+
+[](https://github.com/sanjay-kv)
+</BrowserWindow>
+</Shot>
+
+Now you will be able to see the uploaded resume.
+</Step>
-Now you will be able to see the uploaded resume.
+</StepTimeline>
### Watch the video Tutorial
@@ -128,3 +189,7 @@ Now you will be able to see the uploaded resume.
## Conclusion
In this tutorial, you learned about the syntax and structure of HTML. HTML syntax consists of elements, tags, and attributes that define the structure and content of a web page. An HTML document follows a basic structure with elements like `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, `<meta>`, and `<body>`. Understanding HTML syntax and structure is essential for creating web pages and applications.
+
+<UpNextCard />
+
+</SetupLesson>
diff --git a/docs/GitHub/Maintainer-guide/github-project.md b/docs/GitHub/Maintainer-guide/github-project.md
index 97ddcba9..b4c62ce0 100644
--- a/docs/GitHub/Maintainer-guide/github-project.md
+++ b/docs/GitHub/Maintainer-guide/github-project.md
@@ -5,35 +5,70 @@ sidebar_label: How to Create GitHub Projects
sidebar_position: 3
tags: [GitHub, GitHub-development, document-structure, GitHub repo,]
description: In this tutorial, you will learn about the how to create a GitHub repo by Online GUI interface.
+hide_title: true
+footer_width: lesson
---
+import {
+ SetupLesson, LessonHeader, SetupChecklist, StepTimeline, Step, Shot, UpNextCard,
+} from '@site/src/components/setupLesson';
+
+<SetupLesson
+ storageKey="recodehive:github-project:done"
+ steps={["Get started","Edit the README","Commit changes","Upload a file"]}
+ doneMessage={"🎉 All 4 steps done. Nice work!"}
+>
+
+<LessonHeader title={"How to Create GitHub Projects"} platform="🌐 Web">
+
In the previous post we spoke about commit, fork, clone, in this post we gonna deep dive into the terminology by creating a GitHub Repository from the Scratch.
-Inorder to create a project and host, the repository is a place where you add all your program code files and other documentation.
+Inorder to create a project and host, the repository is a place where you add all your program code files and other documentation.
+
+</LessonHeader>
### Prerequisites
- 1. You should have a Github account
- 2. Should have a basic understanding of how Git works/ and Git running in your OS.
-### How to create Github Repository
+<SetupChecklist title="Your checklist" />
+
+<StepTimeline>
+
+<Step n={1}>
-**Step 1:** Go to GitHub page, by default you will be in the Home page as shown below, Step 1 requires you to click on the ``+`` Icon and from the drop down click on the ``New Repository``.
+### Step 1: How to create Github Repository
+
+**1.** Go to GitHub page, by default you will be in the Home page as shown below, Step 1 requires you to click on the ``+`` Icon and from the drop down click on the ``New Repository``.
+
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website)
+
+</BrowserWindow>
+</Shot>
- <BrowserWindow url="https://github.com/recodehive/recode-website" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website)
- </BrowserWindow>
-**Step 2:** Specify the name of the Project, make It public or private, for this tutorial you will make it public, Once the repository is gone private the project admin have to give permission or manually added other GitHub user to collaborate or make it visible. This is usual application in the organisation level. The next step check on the readme file, this allows you to create a ``readme.md`` file along with the repository creation. Then click on ``Create repository`` on the button below.
+**2.** Specify the name of the Project, make It public or private, for this tutorial you will make it public, Once the repository is gone private the project admin have to give permission or manually added other GitHub user to collaborate or make it visible. This is usual application in the organisation level. The next step check on the readme file, this allows you to create a ``readme.md`` file along with the repository creation. Then click on ``Create repository`` on the button below.
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones)
- </BrowserWindow>
+[](https://github.com/recodehive/recode-website/milestones)
+
+</BrowserWindow>
+</Shot>
Upon creation you will get a screen like this below, the explanation of each elements is mentioned below.
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones)
- </BrowserWindow>
+
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/milestones)
+
+</BrowserWindow>
+</Shot>
- **`<!DOCTYPE html>`**: Declares the document type and version of HTML.
- **`<html>`**: Root element that contains all other elements.
@@ -44,19 +79,26 @@ Upon creation you will get a screen like this below, the explanation of each ele
- **`<body>`**: Contains the visible content of the document.
- **`<!-- Your content goes here -->`**: Represents a comment that is not displayed in the browser.
+</Step>
+
+<Step n={2}>
-## Changing Readme and Adding more files.
+### Step 2: Changing Readme and Adding more files
Im going to add my resume and add my name as heading to the ``readme.md`` file
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones/new" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones/new)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones/new" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/milestones/new)
+
+</BrowserWindow>
+</Shot>
-### Adding Markdown Language
+#### Adding Markdown Language
Below is a visual representation of the basic HTML document structure:
-```html title="readme.md"
+```markdown title="README.md"
# Git-Demo
This is a demo installation via GUI
@@ -64,8 +106,7 @@ This is a demo installation via GUI
This readme contains my resume, please refer to the attached file in the repo.
```
-
-### Browser Rendering
+#### Browser Rendering
When the above HTML code is rendered in a browser, it will display the following content:
@@ -80,7 +121,7 @@ When the above HTML code is rendered in a browser, it will display the following
</>
</BrowserWindow>
-### Explanation
+#### Explanation
- **`<!DOCTYPE html>`**: Declares the document type and version of HTML.
- **`<html>`**: Root element that contains all other elements.
@@ -91,43 +132,71 @@ When the above HTML code is rendered in a browser, it will display the following
- **`<h1>`**: Heading element with the text "Hello, World!".
- **`<p>`**: Paragraph element with the text "Welcome to HTML learning.".
-## Committing the changes.
+</Step>
+
+<Step n={3}>
+
+### Step 3: Committing the changes
Im going to add my resume and add my name as heading to the ``readme.md`` file
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones?with_issues=no)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/milestones?with_issues=no)
+
+</BrowserWindow>
+</Shot>
Here is the step where they need adding additional comments
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones?with_issues=no)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
+[](https://github.com/recodehive/recode-website/milestones?with_issues=no)
+</BrowserWindow>
+</Shot>
https://github.com/sanjay-kv/Git-Demo
-### Now let's upload your resume
+</Step>
+
+<Step n={4}>
+
+### Step 4: Now let's upload your resume
Im going to add my resume and add my name as heading to the ``readme.md`` file
- <BrowserWindow url="https://github.com/recodehive/recode-website/issues/21" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/issues/21)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/issues/21" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/issues/21)
- <BrowserWindow url="https://github.com/recodehive/recode-website/issues/" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/issues/)
- </BrowserWindow>
+</BrowserWindow>
+</Shot>
+
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/issues/" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/issues/)
+
+</BrowserWindow>
+</Shot>
- <BrowserWindow url="https://github.com/recodehive/recode-website/issues/" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/issues/)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/issues/" bodyStyle={{padding: 0}}>
+[](https://github.com/recodehive/recode-website/issues/)
+</BrowserWindow>
+</Shot>
+
+Now you will be able to see the uploaded resume.
+
+</Step>
-Now you will be able to see the uploaded resume.
+</StepTimeline>
### Watch the video Tutorial
@@ -136,3 +205,7 @@ Now you will be able to see the uploaded resume.
## Conclusion
In this tutorial, you learned about the syntax and structure of HTML. HTML syntax consists of elements, tags, and attributes that define the structure and content of a web page. An HTML document follows a basic structure with elements like `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, `<meta>`, and `<body>`. Understanding HTML syntax and structure is essential for creating web pages and applications.
+
+<UpNextCard />
+
+</SetupLesson>
diff --git a/docs/GitHub/Maintainer-guide/milestone.md b/docs/GitHub/Maintainer-guide/milestone.md
index e271f578..503c67fe 100644
--- a/docs/GitHub/Maintainer-guide/milestone.md
+++ b/docs/GitHub/Maintainer-guide/milestone.md
@@ -5,35 +5,70 @@ sidebar_label: Create Milestone on GitHub
sidebar_position: 2
tags: [GitHub, GitHub-development, document-structure, GitHub repo,]
description: In this tutorial, you will learn about the how to create a GitHub repo by Online GUI interface.
+hide_title: true
+footer_width: lesson
---
+import {
+ SetupLesson, LessonHeader, SetupChecklist, StepTimeline, Step, Shot, UpNextCard,
+} from '@site/src/components/setupLesson';
+
+<SetupLesson
+ storageKey="recodehive:milestone:done"
+ steps={["Get started","Edit the README","Commit changes","Upload a file"]}
+ doneMessage={"🎉 All 4 steps done. Nice work!"}
+>
+
+<LessonHeader title={"How to Create Milestone on GitHub"} platform="🌐 Web">
+
In the previous post we spoke about commit, fork, clone, in this post we gonna deep dive into the terminology by creating a GitHub Repository from the Scratch.
-Inorder to create a project and host, the repository is a place where you add all your program code files and other documentation.
+Inorder to create a project and host, the repository is a place where you add all your program code files and other documentation.
+
+</LessonHeader>
### Prerequisites
- 1. You should have a Github account
- 2. Should have a basic understanding of how Git works/ and Git running in your OS.
-### How to create Github Repository
+<SetupChecklist title="Your checklist" />
+
+<StepTimeline>
-**Step 1:** Go to GitHub page, by default you will be the Home page as shown below, Step 1 requires you to click on the ``+`` Icon and from the drop down click on the ``New Repository``.
+<Step n={1}>
- <BrowserWindow url="https://github.com/recodehive/recode-website" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website)
- </BrowserWindow>
-**Step 2:** Specify the name of the Project, make It public or private, for this tutorial you will make it public, Once the repository is gone private the project admin have to give permission or manually added other GitHub user to collaborate or make it visible. This is usual application in the organisation level. The next step check on the readme file, this allows you to create a ``readme.md`` file along with the repository creation. Then click on ``Create repository`` on the button below.
+### Step 1: How to create Github Repository
+
+**1.** Go to GitHub page, by default you will be the Home page as shown below, Step 1 requires you to click on the ``+`` Icon and from the drop down click on the ``New Repository``.
+
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website)
+
+</BrowserWindow>
+</Shot>
+**2.** Specify the name of the Project, make It public or private, for this tutorial you will make it public, Once the repository is gone private the project admin have to give permission or manually added other GitHub user to collaborate or make it visible. This is usual application in the organisation level. The next step check on the readme file, this allows you to create a ``readme.md`` file along with the repository creation. Then click on ``Create repository`` on the button below.
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/milestones)
+
+</BrowserWindow>
+</Shot>
Upon creation you will get a screen like this below, the explanation of each elements is mentioned below.
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones)
- </BrowserWindow>
+
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/milestones)
+
+</BrowserWindow>
+</Shot>
- **`<!DOCTYPE html>`**: Declares the document type and version of HTML.
- **`<html>`**: Root element that contains all other elements.
@@ -44,19 +79,26 @@ Upon creation you will get a screen like this below, the explanation of each ele
- **`<body>`**: Contains the visible content of the document.
- **`<!-- Your content goes here -->`**: Represents a comment that is not displayed in the browser.
+</Step>
-## Changing Readme and Adding more files. Change
+<Step n={2}>
+
+### Step 2: Changing Readme and Adding more files. Change
Im going to add my resume and add my name as heading to the ``readme.md`` file.
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones/new" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones/new)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones/new" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/milestones/new)
-### Adding Markdown Language
+</BrowserWindow>
+</Shot>
+
+#### Adding Markdown Language
Below is a visual representation of the basic HTML document structure:
-```html title="readme.md"
+```markdown title="README.md"
# Git-Demo
This is a demo installation via GUI
@@ -64,8 +106,7 @@ This is a demo installation via GUI
This readme contains my resume, please refer to the attached file in the repo.
```
-
-### Browser Rendering
+#### Browser Rendering
When the above HTML code is rendered in a browser, it will display the following content:
@@ -80,7 +121,7 @@ When the above HTML code is rendered in a browser, it will display the following
</>
</BrowserWindow>
-### Explanation
+#### Explanation
- **`<!DOCTYPE html>`**: Declares the document type and version of HTML.
- **`<html>`**: Root element that contains all other elements.
@@ -91,39 +132,63 @@ When the above HTML code is rendered in a browser, it will display the following
- **`<h1>`**: Heading element with the text "Hello, World!".
- **`<p>`**: Paragraph element with the text "Welcome to HTML learning.".
-## Committing the changes.
+</Step>
+
+<Step n={3}>
+
+### Step 3: Committing the changes
Im going to add my resume and add my name as heading to the ``readme.md`` file
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones?with_issues=no)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/milestones?with_issues=no)
+
+</BrowserWindow>
+</Shot>
Here is the step where they need adding additional comments
- <BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/milestones?with_issues=no)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/milestones?with_issues=no" bodyStyle={{padding: 0}}>
+[](https://github.com/recodehive/recode-website/milestones?with_issues=no)
+</BrowserWindow>
+</Shot>
https://github.com/sanjay-kv/Git-Demo
-### Now let's upload your resume
+</Step>
+
+<Step n={4}>
+
+### Step 4: Now let's upload your resume
Im going to add my resume and add my name as heading to the ``readme.md`` file.
- <BrowserWindow url="https://github.com/recodehive/recode-website/issues/21" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/issues/21)
- </BrowserWindow>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/issues/21" bodyStyle={{padding: 0}}>
+
+[](https://github.com/recodehive/recode-website/issues/21)
- <BrowserWindow url="https://github.com/recodehive/recode-website/issues/" bodyStyle={{padding: 0}}>
- [](https://github.com/recodehive/recode-website/issues/)
- </BrowserWindow>
+</BrowserWindow>
+</Shot>
+<Shot>
+<BrowserWindow url="https://github.com/recodehive/recode-website/issues/" bodyStyle={{padding: 0}}>
+[](https://github.com/recodehive/recode-website/issues/)
+
+</BrowserWindow>
+</Shot>
-Now you will be able to see the uploaded resume.
+Now you will be able to see the uploaded resume.
+
+</Step>
+
+</StepTimeline>
### Watch the video Tutorial
@@ -132,3 +197,7 @@ Now you will be able to see the uploaded resume.
## Conclusion
In this tutorial, you learned about the syntax and structure of HTML. HTML syntax consists of elements, tags, and attributes that define the structure and content of a web page. An HTML document follows a basic structure with elements like `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, `<meta>`, and `<body>`. Understanding HTML syntax and structure is essential for creating web pages and applications.
+
+<UpNextCard />
+
+</SetupLesson>
diff --git a/docs/GitHub/intro-github.mdx b/docs/GitHub/intro-github.mdx
index a5f61f8c..cc375667 100644
--- a/docs/GitHub/intro-github.mdx
+++ b/docs/GitHub/intro-github.mdx
@@ -16,11 +16,16 @@ tags:
description: In this tutorial, you will learn about GitHub, its importance, what is GitHub from Scratch, how to use GitHub, steps to start using GitHub, and more.
---
+import Head from '@docusaurus/Head';
import {
Lesson, LessonHeader, GitVsGitHub, FeatureCards, Feature, Scenario, Frame, Split, SavePoints, VcsCards, Glossary,
Tip, WhyGrid, Why, WorkflowStepper, Concepts, LiteYouTube, Takeaways, QuickCheck, UpNext,
} from '@site/src/components/githubLesson';
+<Head>
+ <meta name="robots" content="noindex" />
+</Head>
+
<Lesson>
<LessonHeader />
diff --git a/docs/GitHub/setup-environment/git-commands.mdx b/docs/GitHub/setup-environment/git-commands.mdx
index 663dd95c..4797463a 100644
--- a/docs/GitHub/setup-environment/git-commands.mdx
+++ b/docs/GitHub/setup-environment/git-commands.mdx
@@ -9,10 +9,15 @@ tags: [git, github, git-cheatsheet, commands, git-commands]
description: In this tutorial, you will learn about the basic of git and 50 important git commands.
---
+import Head from '@docusaurus/Head';
import {
GitCheatsheet, CheatsheetHeader, MostUsed, ZoneFlow, CommandExplorer, LiteVideo, UpNext,
} from '@site/src/components/gitCheatsheet';
+<Head>
+ <meta name="robots" content="noindex" />
+</Head>
+
<GitCheatsheet>
<CheatsheetHeader />
diff --git a/sidebars.ts b/sidebars.ts
index d3caa9ad..725ed9ea 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -89,9 +89,6 @@ const sidebars: SidebarsConfig = {
collapsed: true,
items: [
"GitHub/Fun-Profile-Customizations/Why-Customize",
- "GitHub/Fun-Profile-Customizations/Anurag-Hazra's-GitHub-Readme-Cards",
- "GitHub/Fun-Profile-Customizations/Trophy-Case-Streaks",
- "GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation",
],
},
],
diff --git a/src/components/createRepoLesson/CreateRepoLesson.module.css b/src/components/createRepoLesson/CreateRepoLesson.module.css
new file mode 100644
index 00000000..3f17d3e9
--- /dev/null
+++ b/src/components/createRepoLesson/CreateRepoLesson.module.css
@@ -0,0 +1,565 @@
+/* Only the "Create GitHub Repo (GUI)" page. Every rule starts from .createRepo, the root class the page passes to <SetupLesson>.
+ Colours come from the shared setup lesson variables, so light and dark mode follow the rest of the lessons. */
+
+.createRepo {
+ --amber-bg: #fff7ed;
+ --amber-line: #fed7aa;
+ --amber-text: #9a3412;
+}
+
+:global(html[data-theme='dark']) .createRepo {
+ --amber-bg: rgba(251, 146, 60, 0.1);
+ --amber-line: rgba(251, 146, 60, 0.35);
+ --amber-text: #fdba74;
+}
+
+/* ---------- Header animation ---------- */
+
+.createRepo .art {
+ position: relative;
+ width: 232px;
+ padding-bottom: 16px;
+}
+
+.createRepo .artCard {
+ padding: 11px 13px 6px;
+ border: 1px solid var(--dark-line-2);
+ border-radius: 12px;
+ background: var(--dark);
+ box-shadow: 0 14px 30px -14px rgba(15, 23, 42, 0.5);
+ color: #e6edf3;
+}
+
+.createRepo .artHead {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ margin-bottom: 7px;
+ font-size: 12px;
+}
+
+.createRepo .artHead b {
+ color: #58a6ff;
+}
+
+.createRepo .artPill {
+ padding: 0 8px;
+ border: 1px solid var(--dark-line-2);
+ border-radius: 999px;
+ font-size: 10px;
+ color: #9da7b3;
+}
+
+.createRepo .artRow {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 0;
+ border-top: 1px solid var(--dark-line);
+ font-size: 11px;
+ opacity: 0;
+ transform: translateY(5px);
+}
+
+.createRepo .art.play .artRow {
+ animation: rowIn 0.45s ease forwards;
+ animation-delay: calc(var(--i) * 0.4s);
+}
+
+.createRepo .artDot {
+ width: 9px;
+ height: 11px;
+ flex-shrink: 0;
+ border-radius: 2px;
+ background: #3b4654;
+}
+
+.createRepo .artFile {
+ font-weight: 600;
+}
+
+.createRepo .artMsg {
+ margin-left: auto;
+ font-size: 10px;
+ color: #9da7b3;
+}
+
+.createRepo .artBadge {
+ position: absolute;
+ right: -6px;
+ bottom: 0;
+ padding: 2px 11px;
+ border: 1px solid #86efac;
+ border-radius: 999px;
+ background: #ecfdf3;
+ font-size: 11.5px;
+ font-weight: 600;
+ color: #166534;
+ box-shadow: 0 6px 16px -8px rgba(22, 101, 52, 0.5);
+ opacity: 0;
+ transform: scale(0.8);
+}
+
+.createRepo .art.play .artBadge {
+ animation: badgeIn 0.4s ease forwards;
+ animation-delay: 1.5s;
+}
+
+@keyframes rowIn {
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+@keyframes badgeIn {
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .createRepo .artRow,
+ .createRepo .artBadge {
+ opacity: 1;
+ transform: none;
+ animation: none !important;
+ }
+}
+
+/* ---------- Flow chips ---------- */
+
+.createRepo .flow {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 8px;
+}
+
+.createRepo .chip {
+ padding: 5px 13px;
+ border: 1px solid var(--line);
+ border-radius: 10px;
+ background: var(--card);
+ font-size: 13.5px;
+ line-height: 1.5;
+ color: var(--text);
+}
+
+.createRepo .chipDone {
+ border-color: var(--g);
+ background: var(--g);
+ font-weight: 600;
+ color: #fff;
+}
+
+.createRepo .arr {
+ font-size: 13px;
+ color: var(--muted);
+}
+
+/* ---------- Prerequisite cards ---------- */
+
+.createRepo .prereqs {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 14px;
+ margin: 14px 0 26px;
+}
+
+.createRepo .prereq {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ padding: 14px 16px;
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ background: var(--card);
+}
+
+.createRepo .prIcon {
+ display: grid;
+ place-items: center;
+ flex-shrink: 0;
+ width: 46px;
+ height: 46px;
+ border-radius: 12px;
+ background: var(--tint);
+ font-size: 22px;
+}
+
+.createRepo .prTitle {
+ display: block;
+ font-family: var(--head);
+ font-size: 15.5px;
+ line-height: 1.35;
+ color: var(--text);
+}
+
+.createRepo .prText p {
+ margin: 2px 0 0;
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--muted);
+}
+
+.createRepo .prText a {
+ font-weight: 500;
+ color: var(--g);
+}
+
+/* ---------- Public or private ---------- */
+
+.createRepo .vis {
+ margin: 18px 0;
+ padding: 14px;
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ background: var(--soft);
+}
+
+.createRepo .visTop {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ margin-bottom: 12px;
+}
+
+.createRepo .visLabel {
+ font-family: var(--mono);
+ font-size: 11.5px;
+ letter-spacing: 0.08em;
+ color: var(--muted);
+}
+
+.createRepo .visSwitch {
+ display: inline-flex;
+ padding: 3px;
+ border-radius: 10px;
+ background: var(--chip);
+}
+
+.createRepo .visSwitch button {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 5px 14px;
+ border: 0;
+ border-radius: 8px;
+ background: transparent;
+ font: 600 13.5px var(--sans);
+ color: var(--muted);
+ cursor: pointer;
+}
+
+.createRepo .visSwitch button.visOn {
+ background: var(--card);
+ box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
+ color: var(--text);
+}
+
+.createRepo .visPanel {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ padding: 12px 16px;
+ border-radius: 10px;
+ background: var(--dark);
+ font-size: 15px;
+ line-height: 1.55;
+ color: #e6edf3;
+}
+
+.createRepo .visPanel strong {
+ color: #4ade80;
+}
+
+/* ---------- Tour cards ---------- */
+
+.createRepo .tour {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 12px;
+ margin: 14px 0;
+}
+
+.createRepo .tourCard {
+ padding: 14px;
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ background: var(--card);
+}
+
+.createRepo .tourCard strong {
+ display: block;
+ font-family: var(--head);
+ font-size: 15.5px;
+ color: var(--text);
+}
+
+.createRepo .tourCard p {
+ margin: 3px 0 0;
+ font-size: 14px;
+ line-height: 1.55;
+ color: var(--muted);
+}
+
+.createRepo .tourNum {
+ display: grid;
+ place-items: center;
+ width: 24px;
+ height: 24px;
+ margin-bottom: 8px;
+ border-radius: 999px;
+ background: var(--red);
+ font-family: var(--mono);
+ font-size: 11.5px;
+ font-weight: 700;
+ color: #fff;
+}
+
+/* ---------- Markdown tabs ---------- */
+
+.createRepo .md {
+ margin: 14px 0 18px;
+}
+
+.createRepo .mdTabs {
+ display: flex;
+ gap: 4px;
+ border-bottom: 1px solid var(--line);
+}
+
+.createRepo .mdTabs button {
+ margin-bottom: -1px;
+ padding: 8px 16px;
+ border: 0;
+ border-bottom: 2px solid transparent;
+ background: transparent;
+ font: 600 14px var(--sans);
+ color: var(--muted);
+ cursor: pointer;
+}
+
+.createRepo .mdTabs button.mdTabOn {
+ border-bottom-color: var(--g);
+ color: var(--g);
+}
+
+.createRepo .mdCode {
+ margin-top: 12px;
+ overflow: hidden;
+ border-radius: 10px;
+ background: var(--dark);
+ color: #e6edf3;
+}
+
+.createRepo .mdBar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 7px 14px;
+ border-bottom: 1px solid var(--dark-line);
+ font-family: var(--mono);
+ font-size: 12px;
+ color: #c9d1d9;
+}
+
+.createRepo .mdCopy {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 3px 10px;
+ border: 1px solid var(--dark-line-2);
+ border-radius: 7px;
+ background: transparent;
+ font: 500 12px var(--sans);
+ color: #c9d1d9;
+ cursor: pointer;
+}
+
+.createRepo .mdCopy:hover {
+ background: var(--dark-2);
+}
+
+.createRepo .mdCode pre {
+ margin: 0;
+ padding: 14px;
+ overflow-x: auto;
+ background: transparent;
+ font: 500 14px/1.7 var(--mono);
+ color: #e6edf3;
+}
+
+.createRepo .mdPreview {
+ margin-top: 12px;
+ padding: 14px 18px;
+ border: 1px solid var(--line);
+ border-radius: 10px;
+ background: var(--card);
+}
+
+.createRepo .mdPreview h2,
+.createRepo .mdPreview h3 {
+ margin: 0 0 6px;
+ padding-bottom: 5px;
+ border-bottom: 1px solid var(--divider);
+ font-family: var(--sans);
+ font-weight: 600;
+ color: var(--text);
+}
+
+.createRepo .mdPreview h2 {
+ font-size: 1.6rem;
+}
+
+.createRepo .mdPreview h3 {
+ margin-top: 14px;
+ font-size: 1.25rem;
+}
+
+.createRepo .mdPreview p {
+ margin: 0 0 8px;
+}
+
+.createRepo .legend {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 8px;
+ margin-top: 10px;
+}
+
+.createRepo .legendItem {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 12px;
+ border: 1px solid var(--line);
+ border-radius: 10px;
+ background: var(--soft);
+ font-size: 14px;
+ line-height: 1.45;
+ color: var(--body);
+}
+
+.createRepo .legendBadge {
+ flex-shrink: 0;
+ padding: 1px 8px;
+ border: 0;
+ border-radius: 6px;
+ background: var(--dark);
+ font: 600 12.5px var(--mono);
+ color: #4ade80;
+}
+
+/* ---------- Demo repository tag ---------- */
+
+.createRepo .demo {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 4px 12px;
+ margin: 12px 0;
+ padding: 9px 14px;
+ border: 1px solid var(--amber-line);
+ border-radius: 10px;
+ background: var(--amber-bg);
+ font-family: var(--mono);
+ font-size: 12.5px;
+ text-decoration: none;
+}
+
+.createRepo .demo span {
+ letter-spacing: 0.08em;
+ color: var(--muted);
+}
+
+.createRepo .demo b {
+ color: var(--amber-text);
+}
+
+.createRepo .demo:hover {
+ text-decoration: none;
+ filter: brightness(0.98);
+}
+
+/* ---------- Video card ---------- */
+
+.createRepo .video {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ width: 100%;
+ padding: 14px 16px;
+ border: 0;
+ border-radius: 14px;
+ background: linear-gradient(135deg, #14532d, #0f3d24);
+ text-align: left;
+ color: #fff;
+ cursor: pointer;
+ transition: transform 0.15s;
+}
+
+.createRepo .video:hover {
+ transform: translateY(-2px);
+}
+
+.createRepo .videoPlay {
+ display: grid;
+ place-items: center;
+ flex-shrink: 0;
+ width: 52px;
+ height: 38px;
+ border-radius: 10px;
+ background: #ef4444;
+ color: #fff;
+}
+
+.createRepo .videoText strong {
+ display: block;
+ font-family: var(--head);
+ font-size: 16.5px;
+ line-height: 1.3;
+}
+
+.createRepo .videoText small {
+ display: block;
+ font-size: 13px;
+ color: #bbf7d0;
+}
+
+.createRepo .player {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 16 / 9;
+ overflow: hidden;
+ border-radius: 14px;
+ background: #000;
+}
+
+.createRepo .player iframe {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+}
+
+/* ---------- Small screens ---------- */
+
+@media (max-width: 640px) {
+ .createRepo .prereqs,
+ .createRepo .tour,
+ .createRepo .legend {
+ grid-template-columns: 1fr;
+ }
+
+ .createRepo .art {
+ width: 100%;
+ max-width: 260px;
+ }
+}
diff --git a/src/components/createRepoLesson/blocks.tsx b/src/components/createRepoLesson/blocks.tsx
new file mode 100644
index 00000000..720ec0d2
--- /dev/null
+++ b/src/components/createRepoLesson/blocks.tsx
@@ -0,0 +1,224 @@
+import React, { useState } from 'react';
+import { Check, Copy, Play } from 'lucide-react';
+import { useInView } from '../githubLesson/hooks';
+import s from './CreateRepoLesson.module.css';
+
+type Kids = { children?: React.ReactNode };
+
+/** The root class of this page. Pass it to <SetupLesson className={...}> so the page's styles stay under it. */
+export const rootClass = s.createRepo;
+
+const ART_ROWS = [
+ { file: 'README.md', msg: 'Initial commit' },
+ { file: 'README.md', msg: 'Update README' },
+ { file: 'resume.pdf', msg: 'Uploaded resume' },
+];
+
+/** A small repository page: the files appear one by one, then "3 commits" pops in. Decorative. */
+export function RepoArt() {
+ const [ref, seen] = useInView<HTMLDivElement>(0.3);
+ return (
+ <div className={`${s.art} ${seen ? s.play : ''}`} ref={ref}>
+ <div className={s.artCard}>
+ <div className={s.artHead}>
+ <span>
+ sanjay-kv / <b>Git-Demo</b>
+ </span>
+ <span className={s.artPill}>Public</span>
+ </div>
+ {ART_ROWS.map((r, i) => (
+ <div key={r.msg} className={s.artRow} style={{ '--i': i } as React.CSSProperties}>
+ <span className={s.artDot} />
+ <span className={s.artFile}>{r.file}</span>
+ <span className={s.artMsg}>{r.msg}</span>
+ </div>
+ ))}
+ </div>
+ <span className={s.artBadge}>✓ 3 commits</span>
+ </div>
+ );
+}
+
+/** The five moves of the lesson in one row. */
+export function FlowChips({ steps = ['New repo', 'Edit README', 'Commit', 'Upload file'], done = 'Done ✓' }: { steps?: string[]; done?: string }) {
+ return (
+ <div className={s.flow} aria-label={`${steps.join(', then ')}, then done`}>
+ {steps.map((label) => (
+ <React.Fragment key={label}>
+ <span className={s.chip}>{label}</span>
+ <span className={s.arr} aria-hidden="true">→</span>
+ </React.Fragment>
+ ))}
+ <span className={`${s.chip} ${s.chipDone}`}>{done}</span>
+ </div>
+ );
+}
+
+/** A row of prerequisite cards. Put <Prereq> cards inside. */
+export function PrereqCards({ children }: Kids) {
+ return <div className={s.prereqs}>{children}</div>;
+}
+
+export function Prereq({ icon, title, children }: Kids & { icon: string; title: string }) {
+ return (
+ <div className={s.prereq}>
+ <span className={s.prIcon} aria-hidden="true">{icon}</span>
+ <div>
+ <strong className={s.prTitle}>{title}</strong>
+ <div className={s.prText}>{children}</div>
+ </div>
+ </div>
+ );
+}
+
+/** The public or private choice, as a switch with what each one means. */
+export function VisibilityToggle() {
+ const [mode, setMode] = useState<'public' | 'private'>('public');
+ const isPublic = mode === 'public';
+ return (
+ <div className={s.vis}>
+ <div className={s.visTop}>
+ <span className={s.visLabel}>PUBLIC OR PRIVATE?</span>
+ <div className={s.visSwitch} role="group" aria-label="Choose public or private">
+ <button type="button" aria-pressed={isPublic} className={isPublic ? s.visOn : ''} onClick={() => setMode('public')}>
+ <span aria-hidden="true">🌍</span> Public
+ </button>
+ <button type="button" aria-pressed={!isPublic} className={!isPublic ? s.visOn : ''} onClick={() => setMode('private')}>
+ <span aria-hidden="true">🔒</span> Private
+ </button>
+ </div>
+ </div>
+ <div className={s.visPanel} aria-live="polite">
+ {isPublic ? (
+ <>
+ <strong>Public: we use this for the tutorial</strong>
+ <span>Anyone on the internet can see the repository. You still choose who can commit to it.</span>
+ </>
+ ) : (
+ <>
+ <strong>Private: only the people you choose</strong>
+ <span>You choose who can see and commit to the repository. The project admin must grant access to other GitHub users, which is common in organizations.</span>
+ </>
+ )}
+ </div>
+ </div>
+ );
+}
+
+export type Tour = { n: number; title: string; text: string };
+
+/** Numbered cards that explain parts of a screenshot. The numbers match the ones drawn on the screenshot. */
+export function TourCards({ items }: { items: Tour[] }) {
+ return (
+ <div className={s.tour}>
+ {items.map((t) => (
+ <div key={t.n} className={s.tourCard}>
+ <span className={s.tourNum}>{t.n}</span>
+ <strong>{t.title}</strong>
+ <p>{t.text}</p>
+ </div>
+ ))}
+ </div>
+ );
+}
+
+export type Legend = { badge: string; text: string; mono?: boolean };
+
+function renderPreview(code: string) {
+ return code.split('\n').map((line, i) => {
+ if (line.startsWith('## ')) return <h3 key={i}>{line.slice(3)}</h3>;
+ if (line.startsWith('# ')) return <h2 key={i}>{line.slice(2)}</h2>;
+ if (!line.trim()) return null;
+ return <p key={i}>{line}</p>;
+ });
+}
+
+/** A Markdown file with a Code and a Preview tab, a copy button and a legend that explains the symbols. */
+export function MarkdownTabs({ file, code, legend = [] }: { file: string; code: string; legend?: Legend[] }) {
+ const [tab, setTab] = useState<'code' | 'preview'>('code');
+ const [copied, setCopied] = useState(false);
+ const copy = async () => {
+ try {
+ await navigator.clipboard.writeText(code);
+ setCopied(true);
+ window.setTimeout(() => setCopied(false), 1600);
+ } catch {
+ // The clipboard can be blocked. The code is still on screen to select.
+ }
+ };
+ return (
+ <div className={s.md}>
+ <div className={s.mdTabs} role="tablist" aria-label="Markdown and preview">
+ <button type="button" role="tab" aria-selected={tab === 'code'} className={tab === 'code' ? s.mdTabOn : ''} onClick={() => setTab('code')}>
+ {file}
+ </button>
+ <button type="button" role="tab" aria-selected={tab === 'preview'} className={tab === 'preview' ? s.mdTabOn : ''} onClick={() => setTab('preview')}>
+ Preview
+ </button>
+ </div>
+ {tab === 'code' ? (
+ <div className={s.mdCode} role="tabpanel">
+ <div className={s.mdBar}>
+ <span>{file}</span>
+ <button type="button" onClick={copy} className={s.mdCopy}>
+ {copied ? <Check size={14} aria-hidden="true" /> : <Copy size={14} aria-hidden="true" />} {copied ? 'Copied' : 'Copy'}
+ </button>
+ </div>
+ <pre>{code}</pre>
+ </div>
+ ) : (
+ <div className={s.mdPreview} role="tabpanel">{renderPreview(code)}</div>
+ )}
+ {legend.length > 0 && (
+ <div className={s.legend}>
+ {legend.map((l) => (
+ <div key={l.badge} className={s.legendItem}>
+ <code className={s.legendBadge}>{l.badge}</code>
+ <span>{l.text}</span>
+ </div>
+ ))}
+ </div>
+ )}
+ </div>
+ );
+}
+
+/** A small tag that names the repository the screenshots come from. */
+export function DemoRepo({ repo }: { repo: string }) {
+ return (
+ <a className={s.demo} href={`https://github.com/${repo}`} target="_blank" rel="noopener noreferrer">
+ <span>DEMO REPOSITORY</span>
+ <b>github.com/{repo}</b>
+ </a>
+ );
+}
+
+type VideoProps = { id: string; list?: string; title: string; channel?: string };
+
+/** A video card that loads the player only when it is clicked, so the page stays light. */
+export function VideoCard({ id, list, title, channel = 'recode hive on YouTube' }: VideoProps) {
+ const [on, setOn] = useState(false);
+ const src = `https://www.youtube-nocookie.com/embed/${id}?${list ? `list=${list}&` : ''}autoplay=1`;
+ if (on) {
+ return (
+ <div className={s.player}>
+ <iframe
+ src={src}
+ title={title}
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+ referrerPolicy="strict-origin-when-cross-origin"
+ allowFullScreen
+ />
+ </div>
+ );
+ }
+ return (
+ <button type="button" className={s.video} onClick={() => setOn(true)} aria-label={`Play video: ${title}`}>
+ <span className={s.videoPlay} aria-hidden="true"><Play size={20} fill="currentColor" /></span>
+ <span className={s.videoText}>
+ <strong>{title}</strong>
+ <small>{channel}</small>
+ </span>
+ </button>
+ );
+}
diff --git a/src/components/createRepoLesson/index.ts b/src/components/createRepoLesson/index.ts
new file mode 100644
index 00000000..7e90f203
--- /dev/null
+++ b/src/components/createRepoLesson/index.ts
@@ -0,0 +1,2 @@
+export { rootClass, RepoArt, FlowChips, PrereqCards, Prereq, VisibilityToggle, TourCards, MarkdownTabs, DemoRepo, VideoCard } from './blocks';
+export type { Tour, Legend } from './blocks';