Explaining Version Control Systems using Git and GitHub

This article is the second part of Week of Web(#WOW). If you don’t know what #WOW is here’s a card to it.

Week of Web: A hands-on tutorial to become a full stack web developer in a week

In this article, we will learn what are version control systems and set up Git and GitHub to implement proper versioning of our Todo list application.

So watch’ya waiting for? Let’s Begin!

Are Git and GitHub the same?

On a scale of maybe to absolutely, I would say,

“ Absolutely no!”

There is a common misconception that Git and GitHub are the same, maybe due to the similarities they share in their name but yeah we cant say car and carpet are the same just because this xD

What is Git?

Git is a distributed version control system for tracking changes in your code during development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. Git is installed and maintained on your local system rather than the cloud.

In layman’s term, it helps store histories of your code and creates a version each time. This capability could be further used to compare the changes between a version created by your friend and you and then merge the changes you like or even keep both over a local system.

What is GitHub?

GitHub is designed as a Git repository hosting service. GitHub is an exclusively cloud-based platform and is used along with git to extend the local collaboration to the cloud. This helps us share code with others, give them the power to make revisions.

So let’s say your friend lives very far away from you and its impossible to create a make a local network between just you two. Well, GitHub is there to make your day much easier. GitHub takes all the capabilities of git to the cloud and then you and your friend could collaborate to create different versions of code and then merge all the changes over the internet (to be specific, over the cloud).

You may find people using the words Git and GitHub interchangeably but now you know what the difference is ;)

Alright, enough theory now let’s get our hands dirty

Setting up Git to avoid entering email id and password many times

Open Git Bash and type the following replacing all the details in the angular brackets<>

For example

In the line

git config — global user.email <email>

replace <email> with the same email id you used for signing up on GitHub.

Setting up Git and GitHub to work together

Step 1: Create a repository on GitHub

Head over to GitHub and create a new repository using the New button on the top left side of the screen. Then give a name to your repository and check “Add a README file” and “Add .gitignore”. In the .gitignore template dropdown select “Node”.

With this, you are all set, now click on Create Repository.

You will see a screen like this. GitHub created a .gitignore file and a README.md file for us.

Now click on Code and copy the HTTPS link by using the button beside it.

Step 2: Clone the repository to your local system using git

Now open the folder on your system where you want to create a folder with all the code we will create later to build our Todo list app.

Right-click and click on open Git Bash here.

And now type

git clone <the HTTPS link you copied in Step 1>

This will download a folder with the same name as your repository name with all the files you created during creating a repository on GitHub. (Remember the .gitignore file and README.md file)

This will also automatically configure your folder in the system to recognise which GitHub repository it is pointing to on the cloud.

That’s a lot things in one command, right?

Understanding Visual Studio Code

Now open VS Code.

You will see a screen like this.

Step 1: Opening a Folder inside VS Code

Now click on file on the top left side of your screen and click on open folder. You can also use the shortcut binding ctrl+K and then immediately ctrl+O.

Now select the folder you just created in the previous section.

Step 2: Opening a file inside VS Code

VS Code will open a new window with the sidebar containing all the folder contents. Click on the README.md file and you will see it open all the code written in it on the right side.

Step 3: Opening Git Bash inside VS Code

VS Code comes with Integrated Terminal that means you can open git bash inside VS Code directly. Just click on terminal on the top left side of your screen and click on New Terminal.

This will open a command prompt on the bottom of the screen and your screen will look like this.

The problem is we don’t need command prompt we need to use git bash instead. To fix this click on cmd dropdown window and then click on select default shell.

It will open a dropdown on the top side and let you select the default terminal. Select Git Bash here.

Now open New Terminal again like we did at the beginning of step 3 and Voila Git Bash is open inside VS Code.

Trick: You can hide or show terminal by using the shortcut binding ctrl+` (The key right above your tab key on your keyboard, it is known as backtick)

Making changes in our local system and uploading them on GitHub using Git

Now that we know how to use VS Code lets make changes to our README.md file. Let’s type a description for now.

.md stands for markdown language. It is another markup language like HTML to create documents.

Type a description for your repository. For example, I have used this to describe my repository.

Now save the file by pressing Ctrl+S.

We have made a change in our repository locally. But now we have to inform git about the changes we made here. To do so we type the following commands

Step 1: The status command

To check the status of whether there are any changes which since the previous time git created a commit (In layman’s term a history), we use

git status

On entering this command git informs us that the file README.md file has a few changes that aren’t ready to be considered when we create a history next time. (Technically, we call this process of adding file path to consider for next commit as staging)

Step 2: The add command

To stage all the files that went through changes, we use

git add --all

This will make all the changed files ready for making a commit.

It doesn’t display any output but to view whether it worked we can use the status command again.

You will see git informs us that README.md file is staged.

Step 3: The commit command

Now let’s create a history(sounds so cool right? xD). To do this we use

git commit -m "Updated README.md"

This command will create a history of your code with the message “Updated README.md”. It may ask you to enter your password.

To see whether it worked we can use the status command again

Now git tells us that the working tree is clean, which means the history has been created.

If you notice git also informs us that our branch is one commit ahead. This means that the history has been created on our system but we haven’t uploaded this history to GitHub. Now let’s upload this history on GitHub so that all our other friends are also aware of the changes we made.

Step 4: The push command

This command will upload our history to GitHub.

git push

Now if you go back to GitHub and check your repository all the changes will available there as well as we uploaded it using git.

And all the histories we created will be available in the commits section. I will show you all the versions of the code as we proceed through this series.

Photo by JOSHUA COLEMAN on Unsplash

And that’s it you now know how to use Git and GitHub to keep versions of your code. We also went through the various sections of Visual Studio Code.

In the next article, we will learn about the basics of Frontend development and discuss how a website is built to show users the desired content.

This is Vinayak Tekade from Coder’s Capsule in collaboration with Developer Student Clubs Amrita School of Engineering Bengaluru signing off.

Follow me on LinkedIn and Twitter.

Looking forward to learn, teach and grow together. Check us out on Instagram for more similar content.