Git and GitHub tutorial for beginners

by Gunnar Mallon
Git and GitHub for beginners
Time to read: 13 minutes.
Posted: July 21, 2022 | Updated: July 24, 2022

If you are serious about programming or a casual coder on the side, without a doubt you'll have come across Git and GitHub. Both of these tools that you should know how to use if you are going to collaborate with others, share your projects, land a programming job, or simple want to make sure that you can track changes to your code.

This tutorial will introduce you to Git as a system and GitHub as a platform where you Git repositories reside. Whether you're a beginner developer or a seasoned pro who needs a refresher, this tutorial is for you.

I have made sure that the examples are easy to follow and understand. We will be building a web page using Git as version control system but no prior HTML or CSS knowledge is needed.

Pre-requisites

In order to follow this tutorial, you will need the following:

  • A command line interface (Command Prompt on PC, Terminal on Mac)
  • A text editor of your choice (I'll use VS Code, but Notepad, TextEdit, Atom will work just as well)
  • A GitHub account (we'll cover this later on)

What is Git?

Git is a popular version control system. It helps you to keep track of code changes and is used to collaborate on code.

With Git you can manage projects in repositories, make local "clones" of your projects and work on them on your own machine, control and track changes to your project, allow for work on different parts and versions of your code at the same time, grab the latest copy of the project to your local machine, "push" updates that you have made back into the git repository.

Working with Git

You first initialize Git into a folder, making it a repository. Git now creates a hidden folder to keep track of changes in that folder. When a file is changed, added, or deleted, it is considered modified. You can then select the modified files that you want to "stage".

Finally, staged files are "committed" to the repository, which prompts Git to store a permanent snapshot of these files. This way, Git allows you to see the full history of every commit. You can revert back to any previous commit.

It's important to note that Git does not store a separate copy of every file in every commit, but keeps track only of the changes made in each commit!

Why Git?

Over 70% of developers use Git, and it is the industry standard in the programming world. If you want to become a professional developer, you will need to be able to use Git. Developers can work together from anywhere in the work and they can see the full history of the project, allowing them to revert to earlier versions of a project.

How to install Git

To install Git, head over to the offical website https://www.git-scm.com/. There you will find versions for Windows, Mac, and Linux.

Download Git

Simply download the version for your type of operating system and follow the instructions.

To check that everything has installed correctly, open a command line (Terminal on Mac, Command Prompt on Windows) and enter the following command:

git --version

If Git installed correctly, you will get output showing a version number like: git version X.Y.

Git version

Great! If you see a version number output from the git --version command, you are all set up and ready to use Git.

In case that you got an error and did not see a version number, please re-install Git from the file that you downloaded and make sure to follow all of the steps as indicated.

How to configure Git

Before we get started creating our own repositories and contributing to projects, we need to configure Git. This lets Git know who you are. It is important for version control systems, as each Git commit uses this information.

git config --global user.name "Gunnar Mallon"
git config --global user.email "hello@codekitchen.dev"`

Just make sure to change the user name and email to your own. You will probably also want to use this when registering with GitHub later on.

Note: Use global to set the username and email for every repository on your computer. If you want to set the username/e-mail for just the current repository, you can remove the global.

How to Create and Initialize a Git project

Ok, so now that we're all set up and ready to get started with Git, we will need to open the command prompt (Terminal on Mac).

To create our website, which we will use Git for, we need to start by creating a directory and entering it. Use these command to do just that:

mkdir my-website
cd my-website

The command mkdir makes a new directory, while cd changes the current working directory.

Now that you're in the correct working directory with Git installed on your system, we can start by initializing Git!

Note: If you already have a folder/directory you would like to use for Git, navigate to it in command line, or open it in your file explorer, right-click and select "Git Bash here".

Initializing Git

Once you have navigated to the correct folder, you can intialize Git on that folder:

git init

The command will produce output telling you that an empty Git repository was created.

Git init output

You have just created your first Git repository. Hurray!!

Note: Git now knows that it should watch the folder that you initiated it on. Git creates a hidden folder to keep track of changes.

Getting started on our website project

Now that you have initialized your Git repository (repo for shot), we can start adding and editing files. And that is just what we are going to do next.

The repo is still empty. If you look at the content of the my-website folder, it's empty. So, let's create our first file.

To do this, open your favourite text editor. For this tutorial, I will be using VS Code, but any text editor, such as TextEdit++, Atom, Sublime, or Notepad will do.

Open your text editor and copy the following code into a file called index.html.

index.html
markup
<!DOCTYPE html>
<html>
<head>
<title>I'm learning Git</title>
</head>
<body>
<h1>Git is great!</h1>
<p>This is the first file in my new Git repo.</p>
</body>
</html>

Make sure to save the file.

Great! Now we have a first version of our first file for the website that we are building. If you do not understand the code, don't worry. All that we have done is create a website that has the title I'm learning Git and contains a big heading Git is great! and a paragraph with text in it.

Now it's time to commit this file to your repo so that Git knows to track this file and any changes to it.

Before we do anything, we list the content of the directory, to make sure that we're in the right place.

To check what the status of our git repo is, we can execute the command git status. Do that now. You should see the following output:

Git status

Now Git is aware of the file index.html but hasn't added it to our repo yet.

Files in your Git repository folder can be in one of two states:

  • Tracked - files that Git knows about and are added to the repository
  • Untracked - files that are in your working directory, but not added to the repository.

When you first add files to an empty repository, they are all untracked. To get Git to track them, you need to stage them, or add them to the staging environment.

Staging

One of the core functions of Git is the concepts of the Staging Environment, and the Commit.

As you are working, you may be adding, editing and deleting files. But whenever you hit a milestone or finish a part of the work, you should add the files to a Staging Environment.

Staged files are files that are ready to be committed to the repository you are working on.

For now, we are done with index.html. So you can add it to the Staging Environment.

git add index.html

The file should now be staged. Let check the status of the repository again. Remember you can check the status of your repository with git status.

Git status after add

You can see that index.html has now been added to the Staging Environment.

Adding more than one file

You can also stage more than one file at a time. Let's add 2 more files to our working folder. Use the text editor again and create a file called README.md that describes the repository. I recommend that you do this for all repositories.

README.md
markdown
# hello-world
Hello World repository for Git tutorial. This is an example
repository for the Git tutorial on the Code Kitchen.
This repository is built step by step in the tutorial.

Now let's add some basic styling to our html code. Again, if you do not understand the syntax or content of the file, do not worry. It's all about adding a nicer look to the website.

Create a file called style.css to your working directory and copy the following text into it.

style.css
css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

While we are at it, let's add the new style sheet to our index.html file.

index.html
markup
<!DOCTYPE html>
<html>
<head>
<title>I'm learning Git</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Git is great!</h1>
<p>This is the first file in my new Git repo.</p>
</body>
</html>

You can check the status of your repository again at this point. Remember, you use the command git status. What do you expect it to show?

The next step is to add both of the new files and the changes in index.html to the Staging Environment. To do this, we'll simply add all files to the Staging Environment

git add --all

Using --all instead of individual filenames will stage all changes (new, modified, and deleted files).

Git add multiple files

Now all 3 files are added to the Staging Environment, and we are ready for out first commit!

How exciting :)

Note: The shorthand command for `git add --all` is `git add -A`.

Git Commit

So far we have been creating and editing files and adding them to the Staging Environment. Now it's time to commit these files and changes to the Git repo. You are now ready to move from stage to commit.

Adding commits keeps track of our progress and changes as we work. Git considers each commit change point or "save point". It is a point in the project you can go back to if you find a bug, or want to make a change. Think of them as "saves" in video games.

When we commit, we should always include a message to let other developers or our future selves know what has changed in your code for this commit. By adding clear messages to each commit, it is easy for yourself to see what has changed and when.

The commit command takes a parameter -m followed by the commit message.

git commit -m "message"

Try to commit your project by running the git commit command and adding a meaningful message.

Git commit message

In the output above you can see that the commit command performs the commit, and the -m "message" adds a message.

The Staging Environment has been committed to our repo, with the message: "Add first release of website".

Hurray!

Note: A convention in Git is to use direct commands in your messages, as you are instructing Git to do something. So you would say "Add" instead of "Added".

Git fast commit

When you make small changes that you want to push to your repo directly, you can skip the staging process and use the commit command straight away.

To do this you use the -a flag in your commit instruction. This will staging phase and directly commit all untracked and modified files.

So, let's do this right away.

Open the index.html file in your text editor and add the following line below the paragraph tag. Make sure to save your work.

index.html
markup
<!DOCTYPE html>
<html>
<head>
<title>I'm learning Git</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Git is great!</h1>
<p>This is the first file in my new Git repo.</p>
<p>We have just added another line of text.</p>
</body>
</html>

Now that we have changed one of our tracked files, Git will have noticed this. You can check this using the git status command. Try it and see if the output is what you expected.

You should see that index.html is now modified and that Git is suggesting ways to update your repo.

To skip the staging phase, we saw that you can use the -a modifier. You should still provide a message to your commit.

git commit -a -m "message"

Git fast commit

And there you go. We have now made two commits to our repository, once using the Staging Environment and another time without.

Note: Warning! Skipping the staging environment is not generally recommended. This can sometimes make you include unwanted changes.

Git commit log

It is sometimes useful to look at the history of commits. This might be to see which stages have been worked on or to look at the commit messages of past commit instructions.

Git provides us with a very useful command to do just that.

git log

Try running this command and have a look at the output.

Git log output

There is a lot of information there. Most importantly it shows you which user committed changes to your project and the corresponding commit message.

In the output above you can see that I (this should read your name on your machine) committed changes on July 21 at 06:18:37 (I work early) with the messages Add a new line to the website.

When you work on a bigger project with many collaborators, you could then go and talk to the author of the commit about the changes in case that you have any questions.

Git Branch

Working with Git Branches

In Git, a branch is a new/separate version of the main repository.

Let's say that you have a large project, and you need to update the design on it.

How would that work without and with Git?

Without Git:

  • Make copies of all the relevant files to avoid impacting the live version
  • Start working with the design and find that code depend on code in other files, that also need to be changed!
  • Make copies of the dependant files as well. Making sure that every file dependency references the correct file name
  • EMERGENCY! Ther eis an unrelated error somewhere else in the project that needs to be fixed ASAP.
  • Save all your files, making a note of the names of the copies you were working on.
  • Work on the unrelated error and update the code to fix it.
  • Go back to the design, and finish the work there
  • Copy the code or rename the files, so that the updated design is on the live version
  • (2 weeks later, you realize that the unrelated error was not fixed in the new design version because you copied the files before the fix)
  • Panic!

With Git:

  • With a new branch called new-design, edit the code directly without impacting the main branch.
  • EMERGENCY! There is an unrelated error somewhere else in the project that needs to be fixed ASAP.
  • Create a new branch from the main project called small-error-fix
  • Fix the unrelated error and merge (we will get to that) the small-error-fix brnach with the main branch.
  • You go back to the new-design branch and finish the work there.
  • Merge (don't worry about this yet!) the new-design branch with main (getting alerted to the small error fix that you were missing).

Branches allow you to work on different parts of a project without impacting the main branch.

When the work is complete, a branch can be merged with the main project.

You can even switch between branches and work on different projects without them interfering with each other.

Branching in Git is very lightweight and fast!

New Git Branch

Let's add some new features to our index.html page.

We are working on our local repository, and we do not want to disturb or possible wreck the main project.

To make sure that we can work on the project, without interfering with the main code, we create a new branch. To create a new branch called my-website-images, run the following command:

git branch my-website-images

You have just created a branch called "my-website-images".

Let's confirm that we have created a new branch, but running the git branch command without a branch name.

git branch

You should get the following output, showing a list of all the branches in your repository.

Git branch list

We can see the new branch with the name "my-website-images", but the * beside main specifies that we are currently on that branch.

To switch active branch we need to check it out. For this we use the git checkout command. To move from the current branch to another one, we need to specify the name of the branch that we would like to switch to.

git checkout my-website-images

Try running the command. If all went well, you should get a message that you've switched branch to "my-website-images".

Now we have moved our current workspace from the main branch (also known as master branch), to the new branch.

Open your favourite text editor and let's make some changes to our project.

For this example, you will need to add an image (cute-kitten.jpg) to the working folder and add a line of code in the index.html file:

You can download the image file here. Just make sure to save it to your working folder.

Now, update your index.html file to add the line including the img tag.

index.html
markup
<!DOCTYPE html>
<html>
<head>
<title>I'm learning Git</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Git is great!</h1>
<div>
<img
src="cute-kitten.jpg"
alt="Cute Kitten"
style="width: 100%; max-width: 36rem"
/>
</div>
<p>This is the first file in my new Git repo.</p>
<p>We have just added another line of text.</p>
</body>
</html>

Ok, so we have made changes to a file and added a new file to the working directory (same directory as the main branch).

Now check the status of the current branch with git status.

Git status after branch changes

So let's go through what happens here:

  • There are changes to our index.html, but the file is not staged for commit.
  • cute-kitten.jpg is not tracked.

So we need to add both files to the Staging Environment for this branch.

git add --all

Using --all instead of individual filenames will stage all changes (new, modified, and deleted) files.

Check the status of the branch.

Git status after add to branch

We are happy with our changes. So we will commit them to the branch.

git commit -m "Add an image to the website"

Git branch commit

We now have a new branch, that is different from the master branch.

Note: Using the -b option on checkout will create a new branch, and move to it, if it does not exist.

Switching between branches

Now let's see just how quick and easy it is to work with different branches, and how well it works.

We are currently on the branch my-website-images. We added an image to this branch, so let's list the files in the current directory.

Directory listing of new branch

We can see the new file cute-kitten.jpg, and if we open the html file, we can see the code has been altered to include an img tag. All as it should be.

Now, let's see what happens when we change branch back to main.

git checkout main

Remember, the new image and the changes to index.html are not part of this breanch. Let's list the files in the current directory again:

Directory listing of main branch

cute-kitten.jpg is no longer there! And if we openindex.html, we can see the code reverted to what it was before the alteration.

See how easy it is to work with branches? And how this allows you to work on different things at the same time?

Emergency Branch

Now imagine that we are not yet done with my-website-images, but we need to fix an error on main. This happens a lot on real-world projects btw.

I don't want to mess with master directly, and I do not want to mess with my-website-images, since it is not done yet.

So we create a new branch to deal with the emergency.

git checkout -b emergency-fix

Remember that using the -b flag creates the branch and moves to it if it does not exist yet.

Now we have created a new branch from main, because we ran git checkout while we were on the main main branch. We can safely fix the error without disturbing the other branches.

Let's fix our imaginary error in index.html

index.html
markup
<!DOCTYPE html>
<html>
<head>
<title>I'm learning Git</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Git is great!</h1>
<p>This is the first file in my new Git repo.</p>
<p>This line is here to show how merging works :)</p>
</body>
</html>

We have made changes in this file, and we need to get those changes to the master branch. But before we do this, let's check the status of our repo, and commit the changes that we have made to the emergency branch.

git status
git add index.html
git commit -m "update index.html with emergency fix"

Now we have a fix ready for the main branch, and we simply need to merge the two branches.

Git Branch Merge

Merge Branches

We have the emergency fix ready, so let's mergfe the main and emergency-fix branches.

First, we need to change to the main branch.

git checkout main

Now we merge the current branch (main) with emergency-fix using the git merge command.

git merge emergency-fix

Git fast forward

Since the emergency-fix branch came directly from main, and no other changes had been made to main while we were working, Git sees this as a continuation of main. So it can "Fast-forward", just pointing both main and emergency-fix to the same commit.

As main and emergency-fix are essentially the same now, we can delete emergency-fix, as it is no longer needed, using the git branch command with the -d flag.

git branch -d emergency-fix

Merge conflict

Now we can move over to my-website-images and keep working. Add another image file (little-man.jpg) and change index.html, so it shows it.

Don't forget to switch branch to my-website-images first.

git checkout my-website-images

Update index.html with the code below.

index.html
markup
<!DOCTYPE html>
<html>
<head>
<title>I'm learning Git</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Git is great!</h1>
<div>
<img
src="cute-kitten.jpg"
alt="Cute Kitten"
style="width: 100%; max-width: 36rem"
/>
</div>
<p>This is the first file in my new Git repo.</p>
<p>We have just added another line of text.</p>
<div>
<img
src="little-man.jpg"
alt="Little man"
style="width: 100%; max-width: 36rem"
/>
</div>
</body>
</html>

Now, we are done with our work here and can stage and commit for this branch.

git add --all
git commit -m "add new image"

Git commit new image

Now are ready to merge my-website-images into main. But note that index.html has been changd in both branches. What will happen to the changes we recently made in main?

git checkout main
git merge my-website-images

Git auto merge failed

The merge failed, as there is conflict between the version for index.html. Let us check the status.

Git conflict start

This confirms that there is a conflict in the index.html, but the image files are ready and staged to be committed.

So we need to fix that conflict. Open the file in your editor:

Git conflict

We can see the differences between the versions and edit it like we want.

Git conflict resolved

Now we can stage index.html and check the status:

Git project done

The conflict has been fixed, and we can use git commit to conclude the merge.

git commit -m "merge with my-website-images after fixing conflicts"

And delete the my-website-images branch:

git branch -d my-website-images

Now you have a better understanding of how branches and merging works. Time to start working with a remote repository!

Made with 💗 by Code Kitchen