Learn Git in an afternoon (Beginners) 😎🐱‍💻
Tags: github, git, beginners, code
Published: 2021-10-27 02:33:26

Do you want to be able to have the control of your code and have a trustworthy and easy to make history of it?📚 If yes, this quick tutorial **is for you!**. First of all, we have to know some concepts:

{%- details Git -%}
## Git
Acording to [Git scm](https://git-scm.com/). Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

![Git logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy9vx19znngvgxhj0kpu.png)
 
**Git is easy to learn** and has a tiny footprint with lightning fast performance.

{%- enddetails -%}{%- details Github -%}
## Github
Is a platform where you can put your code in a cloud **git repository** completely free and where other developers could see your code and contribute or use it.

![Github logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvoo4wdp66oqddqh7qio.png)

Github is **very useful** and **is used by a lot of developers in the world**. This tool could allow you to improve as developer and be atractive to software companies.

We won't learn about Github in this tutorial, but if you want to learn it, check this:

{% post jafb321/learn-github-git-in-an-afternoon-beginners-20de %}

{%- enddetails -%}

## How to install Git
First of all, we need to [download Git](https://git-scm.com/) and install it in our pc 💻. The install process is easy, you only need to open the installer and leave default options (if you want), then click *next, next, install* up to finish the installation

## How to use Git
Git doesn't has a graphic user interface, so we have to use the terminal (cmd, powershell, bash, etc). Don't worry, the use of git is very intuitive and colorfuly ✨.

Here are the basics about Git, I'll try to explain each one in the easier way possible

{%- details Create a repository 🛠 -%}
First thing that you need to do, is create a repository, for this you have to **open your terminal and find/create the folder where your project is**.

![Code folder example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ag3uqw4q3urucici0axt.png)

Now, we have to type in the terminal this:
```git init```
You'll get something like this:

![Git init example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5xfh0d7ireyg54423t9.png)

And the job is done! we have our git repository initialized 💪🏻, Go to the later steps.

{%- enddetails -%}{% details Add your files to the repository 🛒 %}

In Git, you have to specify what files will be added on your repository. To know what files can be added you can type:
```git status```
And get something like this:
![Git status example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0u6cms5xitdj0m8iwwl.png)
 

The command shows the status of all project files, In this case the red ones are untracked files, that means these files will be ignored by git, unless we add them to the repository, for this, we can type:
<code>git add app.js</code>
and 
<code>git add index.html</code>


**_useful tip_** 🤓
_There is a way to add all untracked/modified files to the repo. in one line, you just have to type a dot instead of the file name:_
<code>git add .</code> 

Now, we have our files added to the project, so if we run a **_git status_** again we'll have:

![git status with added files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wx1z3jt98d6h9j6b5vaw.png)

But, what does mean this? Well, as we can see, the green color filenames with "new file:" tag indicates that these files have been added succesfully to the repo. 
So, we can start to use these files and make our history of changes and other interesting things. 
For that, continue with the next step 👇🏻. 

{% enddetails %}

{% details Commit our changes 🧪 %}
In the last step, we added the files to the repository. When we add some file, the file is handled by git, but it isn't part of the history of changes, for this we need to "commit" our changes.
 
For commit the pending changes (in this case, the added files), we can type a command like the following:
<code>git commit -m "Initial files"</code> 

In this command, the structure is the following:
- <code>git commit</code> : Indicates that you'll commit the pending changes (all green files getted on "git status" will be committed).
- <code>-m "Initial files"</code> : These are optional, but is strongly recommended put it because the text between quotes is the message, and servers to set the reason/sense/description of the commit. Good commit descriptions allows you (and others) understand better your code 🤔.
This commit message should have the _what? and why?_ of your code changes.

We type "Inital files" because we are adding the <code>app.js</code> and <code>index.html</code> for first time, and its are the first files in our project.

After entering that last command we'll get:
(When you enter this command first time, git will ask you for an username and email, this is for author register only)

![Commit initial files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8j2ifvo0xhcmiuuyvt8y.png)

Now, if we type again <code>git status</code>, we'll get:

![Clean git status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtjkryhg6g1lwtrylujd.png)

That means we have done the **commit** successfully and the repository doesn't have pending changes.


Now, since we have made our first commit, it means that we can see it in the repository history, for this we just have to type:
<code>git log</code>

![repository log/history](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzyih1xowipw37vobnil.png)

There, you could see all commits made in this repository (we'll see <code>git log</code> command more detailed in the other step).

Now, we'll modify the file <code>app.js</code>

![file modify example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm9f6vakx870klamg1qe.png)

If we modify some file, git will detect the changes automatically (the file must have been added with <code>git add</code> before).

Now, we can type <code>git status</code> again to see the changes:

![See changed files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqm96y6k755ezkn95rjd.png)

The important thing here, is the red label <code>modified: app.js</code>. The difference between this result and the first git status is the "modified:" instead of "new:" tag.

This is beacause we have already added and commited the <code>app.js</code> file for first time, but now we have made modifications, then we need to add and commit again this changed file 👇🏼 

Now we can commit this new change typing:
<code>
git add app.js
git commit -m "change welcome text" 
</code>
or
<code>
git commit app.js -m "change welcome text"
</code>

Both work fine, but if you want to add more files in one commit you should use <code>git add</code> way.

Now, we can type <code>git log</code> again to see the new history:

![commits log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qorp9z6n1hax3s6k9elp.png)

In the next step, we'll see more details about git log command, it will be a short section.

{% enddetails %}{% details Repository history 📚 %}
Here, we'll see some tips for <code>git log</code> command, and I'll try to explain a couple of important things about it.

### git log structure:

![Git log components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl44s6ju2mfsvfj6fhph.png)
- **Red mark**: Commit ID

  This is auto-generated for git and identify a specific commit

- **Yellow mark**: Commit message

  Is the text wich we putted in <code>git commit -m "message"</code>

- **Blue mark**: _HEAD -> branch_

  This can sound confusing, but indicates in wich "branch" of the repo we are, don't worry, you don't need to know this for now,  will be nice in the future, but not for the basics 🤠

Useful Tip 💡:
You can type <code>git log --oneline</code> and you'll get a better and more readable output of your commit history:

![git log in one line](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn3cmyxiw06r72ceqpwl.png)

Now we have a more simple log, (note that ID is reduced to it's 7 last characters).

{% enddetails %} 
 
---

<a href='https://ko-fi.com/L3L53EXUA' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

There are a lot of other interesting things that you can do with git, but this tutorial is more focused on the basics, so feel free to practice and learning more about it!

I'll write more useful posts about Git, Github and stuff. So follow me if you want to learn 📌

![Git meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqi2jvqjmule6q5pnguz.gif)
(If you want to understand the meme, don't forget follow me to learn about git branches, gitignore, merge, remote, github, etc 🎈)