Get Into Github: Guide For Beginners

Let’s paint a picture. So you’ve taken the plunge and learned to code. You are living your best life creating projects on codepen.io or codesandbox.io. But you know deep down in your heart, that you need to learn version control. So you look at one of the most popular options: Github and then quickly exit out of that window because what is that mumbo jumbo. No seriously… There are so many tutorials and videos about what Github is and how to use it. But today we’re going to focus on a super simple un-intimidating workflow, that should give you the confidence to try it out and have fun with it. We’ll also be learning some basic terminal commands. Get ready because I’m going to show you how to use Github in this guide for beginners.

Estimated reading time: 14 minutes

Step 1: Create a repository

Okay, so we want to start with creating a repository (or repo). Don’t be intimidated by the word. It is simply where we are going to store our code for a project.

Click the New button

Quite a few options appear. Let’s talk about them. 

Import a repository

Useful if you have an existing repository that was stored on another version control system like AWS Code Commit and you want to move the code to Github. Then you would choose this option to import it over. Since we’re focusing on creating a new repository we’ll skip this option.

Repository Template

We can skip this also since we’re focusing on creating a new repository from scratch. But you do have the option to start with a template.

Repository Name

This is pretty self-explanatory. Give your project a name. Github is built by some very smart people and is intuitive enough to tell you if the name you’ve chosen is available. It will even suggest a name for you. Try to keep it short and meaningful.

Description

Also self-explanatory and optional.

Public or Private

Here you have the option to make your code public where everyone can see it or download it if they’d like. Or you can make it private where you can pick and choose who can see it. For this tutorial, we’ll go with Public. Your code should be Public if you intend on adding it to your portfolio or resume.

Initialize this repository with: Add a README file

Here you have the option to have Github create a README file for you. A README file is a detailed description of what your project does, what tech you use, installation instructions, or anything else you think someone should know about the project.

You can totally create your own README file and upload it to Github but for the purpose of this tutorial, we’ll have Github add it for us. 

Add .gitignore

By default, all of your code will get added to the repository and be visible. You might not want every file uploaded if you have any files that contain sensitive information. So you can choose not to upload all of your files to Github. This is pretty cool and you can choose from a list of options. 

For this tutorial, we won’t be needing a .gitignore. But if you have more questions about that feature, definitely read more about ignoring files on Github. 

Choose a license

You’ll want to choose a license so other users know what they can and cannot do with your code. They have a list of licenses to choose from to help you make an informed decision. So definitely check out the article Licensing a Repository For this tutorial, I’ll be adding an MIT License. 

Now we’re ready to create a repository so press the big green button.

Step 2: Choose a method to download the repository.

In our Github: Guide For Beginners journey, we’ve landed at step two, how to get our github repo onto our computer. First, let’s look at the beautiful repository below! 

Now you need to download the repository some way so you can put your super cool project code in there. There are three (count ‘em) ways to do this:

1. HTTPS
2. SSH
3. Github CLI (Command Line Interface)

You can also choose to download the zip file or use the Github Desktop application. We’re going to focus on HTTPS for this article. But there will be follow-up articles on how to use the SSH and Github CLI options as well.  

Click Code:

Select the HTTPS option:

Copy to Clipboard:

Want to learn more web dev basics? Checkout how to center a div for more fun basics.

Step 3: Cloning the URL

Don’t be scared. I got you. Stop sweating and let’s get step three of the Github guide for beginners done.

For this part, you need to open the terminal. I’m on Mac so I use command + space bar and type “terminal”. This opens the terminal for me. For Windows, you’ll most likely be using Git Bash so you can search for that and pull it up. 

You want to be careful because the terminal is the text-based way of interacting with your files and data without the fancy GUI that we use most times. It is possible to delete, edit, and move important files around so be mindful of that. 

You should see something similar to this. This is the terminal.

What you are going to do now is clone (copy) the HTTPS Github Repository URL so you can add the code in it. If you haven’t already you may want to make a folder to add your project in but this step is optional. I’m going to create a folder using the mkdir command. This will allow us to make a directory which is just a fancy word for folder. Then press Enter. You can call your folder whatever you like. Mine will be called test repo. 

mkdir test-repo

Using the ls (list) command, we can see that the folder was created. 

ls

Now we’re going to cd (change directory) or folder to make sure we are inside the test repo folder since that’s where we want to copy the repository URL. 

cd test-repo

If you’ve successfully moved into the test repo folder, you should see the name of the folder.

Now we are going to git clone the repository URL. Your URL will be different and specific to your repository.

git clone https://github.com/Mykolb/Repo-Newbie.git

If it’s copied correctly, you should see the repository in the folder when using the ls command. 

Now you are going to open this newly copied repository in whatever IDE you prefer. I’m using Visual Studio Code. I’m also using the shortcut code . which opens the repository automatically in Visual Studio Code for me.

code .

Step 4: Create a New Branch

Imagine a tree. The final approved production ready code will live in the main branch which is the tree trunk. We don’t want to push our unapproved, might need tweaked code directly to the tree trunk (main branch). Instead we want to create a tree branch off of the tree trunk (main branch) so that our code can be uploaded, saved, and edited before becoming part of (merging) with the tree trunk (main branch). This is where creating a branch comes in.

Ideally you want to get in the habit of creating a new branch to work off and not pushing code directly to the main branch as that will be where the final production ready code is. So let’s create a branch. 

In the terminal where we left off, add the command git checkout -b “name-of-your-branch”. I’m going to call mine “mykol-b” but you can call it whatever makes sense to you. 

git checkout -b “name-of-your-branch”

If you want to check what branch you are on, you can always use the command git branch.

git branch

The asterisk will appear beside the current branch you are using.

Step 5: Make a Change

In the Github guide for beginners, at step four we have gotten the repository successfully cloned to our computer. Now what? Well…this would be the perfect time to add some code so let’s do that. I’m going to add an index.html file using the touch command in the terminal but you can easily do this by adding a new file using Visual Studio Code settings.

cd Repo-Newbie

touch index.html

You should see the newly added file in Visual Studio Code along with the files that Github generated for us.

Now you can add whatever you want to the index.html file.

Tip: To quickly generate some placeholder text, you can add lorem*a number and it will fill it in for you. I used lorem*10 to quickly generate a giant paragraph.

To learn more about nifty Emmet commands like this, check out our post on how to use Emmet.

Save those changes in the IDE and let’s finish the last couple of steps to push the code to Github.

Step 6: Upload code to Github

Go back to the terminal. It’s time to tell git which files we want to add to our commit. There are various commands that you can choose to use to save all of the files or certain files. We’re going to keep it simple and save all the files by adding git add -A in the terminal. 

git add -A

Next, it is time to add a commit! A commit is our code and progress up to that point in time. The command is git commit -m “a brief descriptive message goes here”. You’ll be adding a brief descriptive message of what you are saving inside the quotations. Everyone will see the commit message so don’t add anything you don’t want people to see. 

git commit -m "first commit for test tutorial"

Success! Here comes the fun part. It’s finally time to push the code to the Github repository. Earlier we talked about how we don’t want to push the code directly to the main branch. So we’re going to push the code to Github and tell it “Hey add this code to the branch I’m currently on”. 

git push origin name-of-your-branch

Step 7: Check out Github

When you visit Github now, you should see a banner notifying you that you had recent pushes. 

Click the Compare and Pull Request button.

You should see the commit message that you created earlier. You can totally edit the message if you want but mine will stay the same. 

Click Create Pull Request

If you click the commit message…

you can see the files uploaded with the changes you made. Green is for insertions and red for deletions.

Repeat steps 5-6 any time you want to add and save more code to that repository on Github.

Step 8: Merge it! 

Your project is complete and you’ve uploaded all of the code. Now what? Well, it’s time to merge all of the code from your branch into the main branch (tree trunk). Sounds intimidating but it’s not really. 

Click Merge pull request

Confirm the merge and you should see your merge was successful! Feel free to delete the branch if you no longer need it.

Conclusion

That’s it! I know this seemed like so much but this workflow is great to practice basic Git and terminal commands. In this Github guide for beginners, you’ve learned how to create a repo, clone a repo, create a new branch, push to origin, and merge your branch into main. Practice, practice, practice! You won’t regret it. Now git out of here. You git it? Maybe that was too much…