Git & GitHub tutorial Part 1
Tags: beginners, webdev, git, programming
Published: 2023-02-04 17:28:36

You've probably already heard the terms "Git" and "GitHub".
These terms often cause confusion because they are used interchangeably although they mean two different things.

We'll go into great detail about everything git and github-related in this post.

## Git and GitHub 

- GitHub is a web-based platform that offers hosting for Git-based version control during development process.  It allows the users to manage and keep track of their projects' code and files in one place.

- Git is a piece of software that lets you track the changes made to a project over time, saves the changes and allows you to access them whenever you want. 

### Turning you project into a git project
In order for this to work you've got to have git installed and have an account on gitHub.

In the root directory of your project run the following command: 

```
git init
```
The word init stands for Initialize. This command prepares git to start monitoring the changes made to your project.

### Git workflow:
Three phases can be considered to make a Git project:

1. The working directory is where you create, modify and organize your files.

1. The staging-area is where all the modifications and the changes you've done in the working directory will be listed.

1. A Repository which is where your project is stored along with the changes you've made. These new changes will be stored as different versions of your project. 

In short, the git workflow or process is made up of editing files in the working directory then adding them to the staging area and saving your changes to a repository.

## Git commands
_"filename" is the name of your file_

|Git Commands| output |
|------------|:------:|
|`git status`| This command outputs the tracked and untracked files which are the files that git has not started tracking their changes. So this command checks the status of the changes.|
|`git add filename`, `git add .` | This commands allows git to start tracking a file by adding it to the staging area.  `git add .` adds all the modified files to the staging area|
|`git diff filename`| Checks the difference between the working directory and the staging area|
|`git commit -m "a brief meaning full message describing your changes"`| This command adds the changes from the staging area to your repository.|
|`git push`| This command pushes you code to github|
| `git log`| This commands helps you refer back to a previous version of your commits which are saved in order in the repository. to exit `git log` press q on your keyboard.|

### Git Backtracking
Git provides features that allow you to undo changes.
After committing the changes the commit you're on  is called head commit. 

|Git commands| output|
|------------|:------:|
|`git show HEAD`| This command shows what the `git log` command would display and all the file changes for this specific (HEAD) commit.|
|`git checkout HEAD filename`| will restore your file to the last commit you made |

### Git Reset 

If you've added your changes to the staging-area and have not committed the changes yet and you mistakenly deleted a line or a word from a file that was added to the staging-area you can use a command to reset the file in the staging area to go back to the way it was in the HEAD commit which is your most recent commit.

In other words this command unstages the file from the staging area.

```
git reset HEAD filename
```
If you've done a mistake and would like to go back to the moment just before you did it you this command allows you to do just that.

enter `git log` in your terminal and you will see  the SHA of your commits which looks like this:

```
commit 7a4825b15fb979a0940e235af7fb7da78e586f2fa052a334a939577f9743e405
```
The SHA is the number you see which is a unique and is a hash number that refer to the commited files and directories.

So to fix a certain mistake we made we run the command below with the first 7 letters of the SHA

```
git rest commit_SHA
```
In our case it would be

```
git reset 7a4825b
```