Git and GitHub Free Tutorial (Quickest Guide)

It’s a complete Git and GitHub free tutorial (If you don’t know about them, this guide is going to be very helpful for you). 

You don’t need to get every single documented concept about Git & GitHub, all you need is to learn about the initial and major steps.

They are just tools, which are pretty amazing for managing the versions of project.

Git & GitHub both are separate, many people got confused. But, don’t worry you will see too many quick and easy to understand concepts in this guide.

Problems that you face without Git and GitHub: 

  • We can not manage versions of our project by creating a lot of folders within our system for a single project.  Example: Project Version 1, Project Version 2, Project Version 3 and so on…
  • We can not share the access directly from our computer to our friends who are working on the same project, each time we need to send them with bunch of folders and files on google drive to download, use and modify and send you back.It’s a very lengthy process right?
  • What about if your hard drive burned out and your projects within-it also gone away. The worst thing is you don’t have even backup of projects. What you will do?

Solutions with Git & GitHub:

Git allows us to manage the versions of our project. It is very useful and on demand skill. Git also track the history of the changes where, when, who and why you made. Sounds Great right? In general, git stores or host the versions of project within our hard drive. From where we can backup our project history.

But, what about the problems we noticed above? What if our hard drive of system burned out? What if we want to collaborate with other friends or developers? Well, in this case GitHub came into being. GitHub is just like hosting to store our versions of projects.

Technical terms used in Git and GitHub:

Working Directory:

The directory on which you are working on. It is within your local machine in which you are creating your code within a project. You can say it as a project folder, in which you initialize the Git.


In simple words, it is a place where your history of projects stored. It could be in your hard drive or the GitHub.


You can say it like a queue, we drop the modified files here for push.

Push: (commit)

A method to send the files from working directory to repository.


A method to fetch the record from repository to our working directory.

Let’s do some quick examples step by step:

In order to use git, you will need to download and install it into your computer.

Here is the link: Download Git

After completion of installation, go to search bar in your system  and search for git bash. Click on it.

Search for GitHub

Must do step (Do it only once after clean installation of git), you don’t need to do every time.

Type below commands:

git config –global ‘yourname’
git config –global –replace-all ‘youremail’

Now go to your project folder or create one. I just created a file within my working directory (project folder) with the name index.html (Just for testing purpose, I have also added some html code inside it).

Created folder, named it as gitprac also created index.html file inside it.

Here begins the show time:

Go to your working directory or project folder (right click and select git bash).

Right Click and select git bash.

Example: Newly Created Repository

Command # 1:

In case of new creation of repository, you will need to first initialize it.

git init

Now,  you will see hidden folder inside your project folder (.git). This folder is called repository (where your project track history will store, that is what I was talking about above).

Note: If you want to check the hidden folder, you can do a quick google search ‘How to show hidden folder in windows or mac’.

Git Repository folder within your directory

Command # 2:

After initialization, the second step is check the status (It is not mandatory, a quick check how many files are modified or needed to commit).

git status

Command # 3:

After checking the status, you will need to add the modified files into staging area (We have already discussed about it, above). -A represent all files or you can replace -A with your desired file which you want to add on staging.

git add -A  or git add index.html

Command #4:

Now, our files are on staging area. All we need to do is to transfer staged files to the repository. In order to do that, we will need to add following command: (-m ‘Just a test’, it is just a message)

git commit -m ‘Just a test’

That’s all. Now, the next step is to test what we actually got.

Note: At the moment, we are only on our machine (We stored our project files within our system hard drive. Later on, we will need to push it to the GitHub)

I’m deleting my html code and completely blank it with no code at all. In fact I am deleting my index.html file.

For now, there is no data within my project folder right? except the .git folder which is hidden and in .git folder our code history is stored.

Note: If we will also delete .git folder , we will not be able to roll back our code(This is only in case without use of GitHub hosting)

We can roll back our deleted file by using following command:

Command # 5:

git checkout — .

And boom our files has been restored.

If you want to see the second example (In which we will clone the repository  from GitHub and many other stuff) with the GitHub just subscribe to the newsletter, because I am going to update this guide (Git and GitHub Free tutorial) too many times.

Here is your guide about roadmap of front end development 

Add Comment