A Mini Tutorial to Learn a Few Git Version Control Basics

Get started with more ease and less hassle.

If you are trying to learn some basic Git version control for your professional or personal projects for the first time and facing difficulties, you’re not alone. Git is a little confusing at first plain and simple.

But does it have to be confusing?

When I first sat down to learn git version control for use in web development projects, I felt stifled, confused, and couldn’t execute. The terminology wasn’t clicking for me and I needed a break from the documentation.

Only when I started plugging in commands in the terminal and stopped reading technical explanations did I start gaining some traction in understanding. I condensed this terminal mashing approach into a little guide outlined here.

It’s fun to string together and mash git commands into the terminal to version control a fake project. Watch your confidence grow. Then, you’re free to intuitively learn how the commands connect with no fear of blowing up your project or worrying about blasts of red terminal error text.

In this simple guide, you’ll write a few minimal lines of HTML and CSS, then start executing a sequence of Git command lines in your terminal to familiarize yourself with using them in a project.

This way, you don’t have to read a ton of documentation immediately and you can just get comfortable with writing git in the command terminal.

We’ll assume you have Git installed as a first step. Lets jump in.

1. Open your IDE (I use VS Code).
2. Start a new HTML/CSS project (Note: you’ll need your HTML and linked CSS file in your project folder).
3. Add a paragraph tag pair into your html and write in some text (example below).

View of my IDE with a sample project file collection loaded. You only need the index.html and styles.css sheet

4. In your CSS file, write a paragraph selector with a few declarations. I also put a body tag with a zeroed out margin and padding but this is optional.

Paragraph selector with a few declarations in the CSS sheet Also shown is an optional Body selector with margin and padding declarations.

5. Open your terminal if you haven’t done so already.

6. Write git init and hit enter(This initializes your first repository).

7.Change one of your selector values. I decide to change my paragraph width from 100% to 80%.

8. Write git add . or write git add — all and hit enter. This step outlines two options you can choose from which achieve the same result. This is a way to add all applicable files to the repository staging area. The dash shown above is actually two consecutive dashes-see picture below for a more clear example).

9. Write git Commit -m “Your message here” This will save the changes to your repository. Customize the message to carefully summarize your changes for a more intuitive use.

So far we’ve made changes and committed(saved) them in the repository. So far, you’ve only made changes on your main branch. Next, we will create branches with changes and recombine them with the original.

10. Write git branch in the terminal and hit enter. This will display all of the branches you have so far. The asterisk by the master (main) shows you have one branch, just your original main branch.

The master (main) branch is displayed as a reference

11. Write git branch Branch_Name_Here in the terminal. You can name it whatever you want.

12. Next, write git branch again. Now, you should see your new branch as an option. Note the asterisk is still on Master. That’s because we haven’t switched to our new branch yet. Let’s do that next.

13. Write git checkout Branch_Name_Here in the terminal. You just executed a switch to your new branch.

14. Next, write git branch again. Your original master branch and newly created branch are displayed as options. Note the asterisk is now on your new branch.

15. Now that you’re on your new branch, make a change to the CSS styles. I added a background-color based on a variable which you don’t have to mimic. Any change will do.

Adding in a background-color on the paragraph tag in the new branch

16. Next write git add — all or git add . to add the changes in your new branch to the staging area.

17. Next write git commit -m “Add your change summary here” You’ve now successfully saved changes on your new branch.

Side note: see how it lets you know how many insertions and deletions were made?

18. Now we’ve changed the new branch and we are on the new branch, let’s switch back to the original master branch. Write git checkout master

Note that the code has reverted back to the main branch version

19. Now, let’s bring the changes from our new branch into our master branch with a merge command. Write git merge Branch_Name_Here

20. Now take a look at the code. Notice the changes you made on the new branch are now reflected on your main branch? You can write git branch and confirm you are in fact still on the master branch.

Notice the changes made on the new branch are now part of your master branch?

21. Lets wrap this up and delete the extra branch. Write git branch -d Branch_Name_Here

22. Now check how many branches you have. Write git branch You will notice that only the master branch remains.

Congratulations, this should give you a basic working knowledge of simple git commands to implement in your next project.

Good luck with your programming efforts!