GIT, A life-changing tool…

10 min readMar 14, 2023

In this article, we will see some basics about what Git is all about along with some basic commands that are used in Git.

Git, as a word, is an alteration of the word get, which itself was shortened from beget. The implicit reference is to illegitimate offspring, and the term is roughly synonymous with a twit, dolt, moron, or idiot. But the Git we are going to discuss here is entirely different and is one of the important tools to be known in the present world.

I came to know about Git when I started working with Web development. There came a section of the Version control system called Git. I was working with code that had various files in it including HTML, CSS, and JavaScript files. I needed to work with multiple versions of that project, so I came to know about Git which would really help me to work with multiple versions of my project and will help me to make a magnificent project with exceptional features. Git also helped me to deploy the code on GitHub, another platform that works on the basis of Git. Git helped me to push my local code to a repository which will keep my code on the Cloud.

I had to really work hard to find some articles, and videos that would have guided me on how to work with Git during my time of learning. This article will help you to learn basics of the Git easily and will help you to push your code to GitHub easily. This article will have some basic commands that will help you in your daily work. This article will only require less than 15 mins for you to learn Git from basics and apply it to your project. Let’s deep dive into the article about this lovely tool in the software industry.

What is Git?

Git is a free and open-source distributed version control system designed to handle everything from small to huge projects with speed and efficiency.

Git is easy to learn and it tracks all of the information about the projects, like what are files added to the project, and what manipulations we are making in our project over the span of time. Git stores all the information about the project’s progress in a repository. This repository stores all of the commits regarding the project along with some other information called heads.

Also, when we work in the team itself, inside a company, or in our local community, we can keep track of all the changes, track the files that are added to our project, and along with it, we can track the bugs or the errors that have occurred in our project. Commits are added so that to make it clear that the project is good to go with the changes that are made and that want to commit the changes to the main branch called the master branch.

We can then push our code to GitHub, Gitlab, or Bitbucket which provides the services with Git online to track them online and push our local code to the online cloud itself.

How to start with Git?

We have till now seen what Git is all about. Now you might be thinking about how to get started with Git? Let’s go into the flow to start Git.

To get started with Git, you need to download it to your machine. Head over to https://git-scm.com/ and download the version most compatible with your system.

You can work with Git on your command prompt, terminal window, or on Git Bash. Here I have taken a simple project with three files i.e index.html, style.css, and main.js files.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intro To Git | Aryan Garg</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>
    <h1>
        Intro To Git | Adder App
    </h1>
    <div class="container">
        <div class="row">
            <input type="text" id="input1">
            <h1>+</h1>
            <input type="text" id="input2">
        </div>
    </div>
    <div class="row1">
        <button id="calc" onclick="calc1()">Calculate The Sum</button>
        <h2>Sum Is: <span id="sum"></span></h2>
    </div>
</body>
<script type="text/javascript" src="./main.js"></script>

</html>

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #12c2e9; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #f64f59,
    #c471ed,
    #12c2e9
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #f64f59,
    #c471ed,
    #12c2e9
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1 {
  text-align: center;
  margin-top: 30px;
}

div.container {
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

div.container div.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

div.container div.row input {
  height: 80px;
  width: 80px;
  margin: 10px;
  text-align: center;
  font-size: 50px;
}

div.row1 button {
  padding: 10px 15px;
  outline: none;
  border: 2px solid white;
  background-color: #f64f59;
  color: aliceblue;
  cursor: pointer;
}

div.row1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

main.js

let input1 = document.getElementById('input1');
let input2 = document.getElementById('input2');
let sum = document.getElementById('sum');
let calc = document.getElementById('calc');

function calc1(){
    sum.innerText= parseInt(input1.value) + parseInt(input2.value);
}

Now, this is the code that my local system has in its directory and I want it to be pushed onto GitHub in my repository. So now let’s go into the basic commands that will help us to push our code to GitHub.

Initializing our Git Repository

Everything in our project will now be tracked by Git. So for it, we need to first initialize our Git repository. Go inside the main folder of our project and then run the below-mentioned command to initialize the project folder as a Git repository.

git init

This will create the hidden git folder with the .git extension as you can see in the screenshot of the project explorer down.

Committing the files and the changes

Now the repository has been initialized, now we should be committing our changes to the cloud. For it, we need first to add all the files that are required in order to be tracked by Git. To keep track of when or who added the new feature, you have to add changes to an index and when satisfied with the new lines, you commit the changes from the index to the main branch. To add files we can follow two commands depending on our need, if we need to add a single file, we can run the command:

git add <file_name>

or we can add all the files by running the command:

git add .

When satisfied with adding a couple of changes to your index, it’s time to commit our changes to the master branch. To ensure we have the correct files on the stage, use the below command to check what files are on the stage.

git status

The files that appear in Green color are in the staged manner and the files that are in red color are in the project itself but are not added. The Git bash of your system will look as defined below:

You will be prompted to enter your personal details such as your name and email and they will be configured by Git. Git will guide you about all these things so I didn’t dive deep by including them. To commit the changes to the master branch, use the following command:

git commit -m "<Message You want to write>"

The -m flag specifies that what follows is the commit message. This is a custom message that is attached to let you or other developers know what was added to that commit.

How to check Commit History?

We might need to add multiple things to our project itself, delete many things, and update our project again and again before pushing the code to GitHub or pushing the code of the project to the production phase. It might also be possible that it has been enough time since we worked on the project and now we want to revisit the project to see what was the project was all about or what is the working of the project. So Git provides us the facility to check our history of the project by running the below command:

git log

What is Git Branching?

Well, we have now discussed various concepts in Git. But in many cases when we work on a project, we apply a thing and then we’re not sure if it’ll work or will be accepted. We can branch off our main tree by creating a new branch and working on that branch instead. Think of it how a tree has branches, but when you branch off from the main branch, however, you can be satisfied with the experimental features and decide to merge the two branches.

To see the branch on which you are currently, run the below-mentioned command:

git branch

You can create as many branches as you like, to create a branch, use the following command:

git branch <branchname>

To view the list of branches the project has, use the following command:

git branch --list

To shift to another branch, Git provides us with another command given below:

git checkout <branchname>

After applying all the commands, our Git Bash will look somewhat similar to what the below image depicts:

How to push your code to GitHub?

The code is now on our local machine, but to push the code to our GitHub so that our code can be in the form of a shareable manner, we need to go and connect our local machine with our GitHub account. After connecting, we need to visit our GitHub account and then create a Repository in our account. We need to choose what type of repository it will. For this project, we are making a public repository so that everyone can access our repository. GitHub also provides us to create a private repository if we don’t want our code to be accessible to anyone. Give a name to the repository and click the Create repository button.

After creating our repository, again our focus shifts to Git Bash or the command line terminal so that we push our local code to the GitHub repository.

To link your remote git repository to your online repository on GitHub, GitLab, or Bitbucket, you will need to attach an origin to your remote git project to specify the origin will be hosted online. You’ll be using the below command:

git remote add origin https://github.com/<username>/<repositoryname>.git

Now to push your code to the repository we made, use the below command:

git push -u origin master

This will push your app to the master branch. Your Git Bash will look similar to the below image:

Our code in the project is now added and we can see our files on our GitHub repository:

We can also add a README.md file to display more information about the working of the project, some rules about the project, or what we have used in the construction of this project:

After adding it, our Repository will look like this:

The Repository can be found at: https://github.com/code08-ind/Intro_To_Git

Now to pull the code from a different machine, you’ll need to initialize an empty git repository and then use the following command to pull the repo:

git pull https://github.com/<username>/<repositoryname>.git

By following this technique by using Git, we can work anywhere and on any machine and we don’t need to always carry our Machine everywhere we can also work remotely.

With this, we come to the end of this article. Here in this article, we have discussed some of the basic commands related to Git. These are very useful functionalities in developers day to day lives. Git has really added a value of its own in Developer’s Work life. That was all from my side for this article.

I am ARYAN GARG, a Fourth-year student of Information Technology pursuing my B.E/B.Tech from Dr. B.R. Ambedkar National Institute Of Technology, Jalandhar, Punjab, India.

You Can Connect With Me On Various Platforms For Further Discussions. My Profile links are given below :

LinkedIn — https://www.linkedin.com/in/aryan-garg-661552198/
Instagram — https://www.instagram.com/aryan_garg_08/
Facebook — https://www.facebook.com/aryan.garg.9022662/
GitHub — https://github.com/code08-ind
Personal Portfolio Web Site — https://code08-ind.github.io/Portfolio_08/

You can also contact me at my email: gargaryan82000@gmail.com.

Keep Coding, and Keep Developing!!!

Thanks For reading this article and blog on Git. Please like and share and comment below to express your views and I would love to hear from you about the changes I can make in my next blog. Shower Your Love !!!