Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 21 additions & 17 deletions docs/GitHub/GitHub-basics/create-github-repo.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,33 @@ 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.
---

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

### Prerequisites

- 1. You should have a Github account
- 2. Should have a basic understanding of how Git works/ and Git running in your OS.
- 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.

### How to create Github Repository

**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:** 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 url="https://github.com" bodyStyle={{padding: 0}}>
[![GitHub](./assets/1-GitHub-repo.png)](https://github.com/sanjay-kv)
</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 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.


<BrowserWindow url="https://github.com/new" bodyStyle={{padding: 0}}>
[![GitHub](./assets/4-git-gui-install.png)](https://github.com/sanjay-kv)
</BrowserWindow>

Upon creation you will get a screen like this below, the explanation of each elements is mentioned below.
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/sanjay-kv/Git-Demo" bodyStyle={{padding: 0}}>
[![GitHub](./assets/5-git-add-file.png)](https://github.com/sanjay-kv)
Expand All @@ -44,17 +48,17 @@ 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.

## Changing Readme and Adding more files.
## Changing the README and adding more files.

Im going to add my resume and add my name as heading to the ``readme.md`` file
I’m going to add my resume and include my name as a heading in the ``README.md`` file.

<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo" bodyStyle={{padding: 0}}>
[![GitHub](./assets/6-edit-file-git.png)](https://github.com/sanjay-kv)
</BrowserWindow>

### Adding Markdown Language

Below is a visual representation of the basic HTML document structure:
Below is a visual representation of a basic HTML document structure:
```html title="readme.md"
# Git-Demo
This is a demo installation via GUI
Expand All @@ -66,7 +70,7 @@ This readme contains my resume, please refer to the attached file in the repo.

### Browser Rendering

When the above HTML code is rendered in a browser, it will display the following content:
When the above HTML code is rendered in a browser, it will display the following output:

<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md">
<>
Expand All @@ -92,13 +96,13 @@ When the above HTML code is rendered in a browser, it will display the following

## Committing the changes.

Im going to add my resume and add my name as heading to the ``readme.md`` file
I'm going to add my resume and include 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}}>
[![GitHub](./assets/7-commit-the-changes.png)](https://github.com/sanjay-kv)
</BrowserWindow>

Here is the step where they need adding additional comments
This is the step where you need to add additional comments.

<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/edit/main/README.md" bodyStyle={{padding: 0}}>
[![GitHub](./assets/8-commit-message.png)](https://github.com/sanjay-kv)
Expand All @@ -112,24 +116,24 @@ https://github.com/sanjay-kv/Git-Demo

### Now let's upload your resume

Im going to add my resume and add my name as heading to the ``readme.md`` file
I'm going to add my resume and include 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}}>
[![GitHub](./assets/10-add-git-file.png)](https://github.com/sanjay-kv)
</BrowserWindow>

Here is the step where they need adding additional comments
This is the step where you need to add additional comments.

<BrowserWindow url="https://github.com/sanjay-kv/Git-Demo/upload/main" bodyStyle={{padding: 0}}>
[![GitHub](./assets/11-add-file-commit-git.png)](https://github.com/sanjay-kv)
</BrowserWindow>

Now you will be able to see the uploaded resume.
You will now be able to see the uploaded resume in your repository.

### Watch the video Tutorial

<iframe width="880" height="480" src="https://www.youtube.com/embed/XWjx-RjmhRM?list=PLrLTYhoDFx-kiuFiGQqVpYYZ56pIhUW63" title="How to create your first GitHub repository" frameborder="0" 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. 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.
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.
12 changes: 6 additions & 6 deletions docs/GitHub/GitHub-basics/first-opensource-code.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Welcome to your first open source contribution! In this tutorial, you will learn

## 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:
Open source software is code that is freely available for anyone to view, use, modify and distribute. Contributing to open source projects helps you:
- Learn from real-world code
- Build your portfolio
- Connect with the developer community
Expand All @@ -27,7 +27,7 @@ Open source software is code that is freely available for anyone to view, use, m

Before starting, make sure you have:
- A GitHub account (create one at [github.com](https://github.com))
- Basic understanding of Git and GitHub concepts
- Basic understanding of Git and GitHub concepts.
- Willingness to learn and contribute!

## The Contribution Workflow
Expand Down Expand Up @@ -56,7 +56,7 @@ Take a moment to:
- Read the README file to understand the project
- Check if there are contribution guidelines (CONTRIBUTING.md)
- Look at existing issues or pull requests
- Understand what kind of contributions are welcome
- Understand what kind of contributions are welcomed

## Step 2: Fork the Repository

Expand Down Expand Up @@ -85,7 +85,7 @@ Once the fork is complete, you'll see:
<div align="center"><small>Step 4: Fork Complete</small></div>
</BrowserWindow>

## Step 3: Edit Files Directly on GitHub
## 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.

Expand Down Expand Up @@ -126,11 +126,11 @@ Common first contributions include:

:::

## Step 4: Commit Your Changes
## 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
Expand Down
21 changes: 13 additions & 8 deletions docs/GitHub/GitHub-basics/github-repo-command-line.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,27 @@ HTML (Hypertext Markup Language) is the standard markup language for creating we

## Prerequisites

You should have a Github account 2. Should have a basic understanding of how Git works/ and Git running in your OS.
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.



### How to create Github Repository

Step 1: Go to Git hub and create a new Repository.
Step 1: Go to GitHub and create a new Repository.

<BrowserWindow url="https://github.com" bodyStyle={{padding: 0}}>
[![GitHub](./assets/1-GitHub-repo.png)](https://github.com/sanjay-kv)
</BrowserWindow>
<br />

Step 2: Specify the Name of the Project, make It public or primate, check on the readme file. Then click on Create repository on the button below.
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.


<BrowserWindow url="https://github.com/new" bodyStyle={{padding: 0}}>
[![GitHub](./assets/2-repo-create-github.png)](https://github.com/sanjay-kv)
</BrowserWindow>
Upon creation you will get a screen like this below, the explanation of each elements is mentioned below.
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"
echo "# demo-repo" >> README.md
Expand Down Expand Up @@ -76,7 +77,7 @@ When the above HTML code is rendered in a browser, it will display the following
[![GitHub](./assets/14-git-command-add.png)](https://github.com/sanjay-kv)
</BrowserWindow>

Now you can see the new file been added in your local system
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:

Expand All @@ -88,15 +89,16 @@ When the above HTML code is rendered in a browser, it will display the following

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 on save and open cmd/ terminal
Step 10: Once the work is done, click save and open cmd or Terminal

<BrowserWindow url="https://github.com/sanjay-kv/demo-repo" bodyStyle={{padding: 0}}>
[![GitHub](./assets/16-remote-repo.png)](https://github.com/sanjay-kv)
</BrowserWindow>

Step 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 adding a file in this way you may ask to enter your GitHub email id and username to proceed. The screenshot will be the same as below. and then while you enter the push command it will ask you browser prompt to sign in to Github.
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"
git config --global user.email "Enter your github Email"
Expand All @@ -112,4 +114,7 @@ git config --global user.name "Github username"

## 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.
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.
2 changes: 1 addition & 1 deletion docs/GitHub/GitHub-basics/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ description: Learn the fundamentals of Git and GitHub — forking, commits, pull

Welcome to the GitHub Basics section. This collection is designed to help beginners get comfortable with Git, GitHub workflows, and making their first open-source contributions.

Whether you're completely new or need a refresher, these guides walk you through practical steps with examples so you can start contributing confidently.
Whether you're completely new or need a refresher, these guides will walk you through practical steps with examples so you can start contributing confidently.

## What you'll learn

Expand Down
Loading
Loading