Master basic Git commands
Tags: webdev, beginners, tutorial, git
Published: 2022-09-28 13:37:48

In a [previous post](https://www.cristina-padilla.com/gitvsgithub.html) we saw the differences between Git & GitHub: Git is a version control system that keeps track of all changes we make in a project, while GitHub is a cloud service that allows us to host our project.

A Git project has 3 parts: working directory, staging area and repository. Let's see what they are for.

![Git project parts](https://community.codenewbie.org/remoteimages/uploads/articles/f6i20amq3gj5oa7vsqc4.png)

The **working directory** is where we are currently working (adding, modifying or removing things from our code) These are basically files which are still untracked.

The **staging area** is where we send the files to. It is like taking a photo of the files that are ready. We use the git add command to do so.

The **repository** is our local repository (computer), where we save our project with the git commit command.

If we want to save our project in GitHub (remote repository), we will need to use the git push command.


> _Practice puts brains in your muscles_, ✨Sam Snead✨


Let's see all these together with a step-by-step practical example:

## 📂 Create a GitHub repository and clone it

We will start by creating a repository (git-practice) in GitHub. Note that we have the option to add a Readme File (a file where we can explain our project more in detail) and .gitignore (a file to hide other files and keep our repository clean) Let's add a [Readme file](https://how-to.dev/the-readme-file-how-to-help-others-understand-your-project).

![Clone GitHub repository](https://community.codenewbie.org/remoteimages/uploads/articles/dv3n7fz0turqkmvqfal1.png)

We clone this repository in our computer. In order to do so we access **GiHub > Code > SSH**. We copy the key:

![Repository Key](https://community.codenewbie.org/remoteimages/uploads/articles/vt9nqjxh0nxp8oez8z3x.png)

Now we start practicing some command line. We open our Terminal and search for the folder or location where we want to clone our project. In my case, I want to clone it in an existing folder called “My projects”, so I will use the following commands:

![git clone command line](https://community.codenewbie.org/remoteimages/uploads/articles/mcrlpvp2dz1uqtjw0tym.png)

This will make a copy of our GitHub repository in our computer.

## 📑 Create some basic files

You can create some html, css and/or js files. They can be empty or you can code some basic stuff. My example:

![Hello World simple example](https://community.codenewbie.org/remoteimages/uploads/articles/mzxtg12z1o7pekf2cbga.gif)

## ▶️ Initialize Git

We access our project folder and initialize git with the **git init** command to start tracking our project:

![Git init command](https://community.codenewbie.org/remoteimages/uploads/articles/yz7vxr8smo6ykkhon31p.png)

This will create an invisible git folder in our project's folder. If you want to see it, use **Command + Shift + .**

![Git invisible folder](https://community.codenewbie.org/remoteimages/uploads/articles/txjmyw2adihapdczpk8t.png)

## 📷 Add your files to the staging area

Now we can add our files to the staging area with the **git add .** command. This command will add all files at once.

## 💾 Save changes in your local repository

Next step is saving our files in our local repository (our computer) with the **git commit -m "description of your change"** command. The terminal will display this:

![Git commit changes](https://community.codenewbie.org/remoteimages/uploads/articles/tvysa21rukggetcc9j1v.png)

## 🌐 Send your files to GitHub

Our files are now saved. However they don't show up in GitHub yet. In order to send them to GitHub, we can use the **git push origin main** command.

![Git push command](https://community.codenewbie.org/remoteimages/uploads/articles/x1fiq2p7du4jqtrevrjn.png)

Now we will see them in GitHub:

![Final changes on GitHub repository](https://community.codenewbie.org/remoteimages/uploads/articles/yp5jmpto8ekdwmk5e12g.png)

The different Git areas might be confusing but you will understand them much better when you start practicing these steps. You can find my example [here](https://github.com/Mama-simba/git-practice). Give it a try and you will master it!