Introduction to Git and GitHub

LearnJS » Git


The goal of this roadmap is to familiazie with Git and GitHub.

At the end of it, you will have your personal website published using a free hosting service offered by GitHub and called GitPages.

Here are plenty of video tutorials:

Part 1 - The Setup

Verify you have git available to your computer

Git for Windows

Initialize a new Git project on your computer

(don't bother with the "add remote" part of this video!)

Part 2 - Work Locally

Create an index.html with some markup inside

Spend 2 more minutes and add your picture to the same folder, so that you can show it in your page :-)

Create your first commit

make sure you play around with git status and understand how to read the results.

Add more files, then commit again

See if you can add a secondary page where you will write your experience, and link it to the index.html

Check out your commit history with log

  • What is the order that is used while showing multiple commits?
  • How do you find out how did a specific commit?

Add more commits

... as your website grows ...

Part 3 - GitHub & Online Persistency

Create an account on GitHub

Setup your computer with ssh access

Why is SSH better than HTTP for GitHub (also GitLab and BitBucket)?

Create a new repository with a in it

Use the GitHub UI to play with files

  • edit
  • create a new file
  • do commits


  • Notice how GitHub automatically renders the
  • What is the Markdown language?
  • Why is so important to write readme files?

Clone your repository to your computer

Make a local commit, then push it to the GitHub repo

Make a commit with GitHub UI, then pull it to your local repo

Part 4 - GitPages: enjoy free hosting!

Create the GitPages repo for your account

name it {account-name} and do not choose to add a to it.

  • Do you see all the instructions how to setup a local repo with the newly created GitHub one?

Setup a remote for your website repo

Use the instructions from your empty repo to create the connection between your local repositiory and the GitHub's one.

Make sure you push all your commits to the online repo.

  • How do you make sure the two repos are aligned?

Setup GitPages for your repository

tip: it's in the "settings" tab of your repo

  • What is the url of your personal website?

Part 5 - Branching & Pull Requests

  • what is a "branch"?
  • why are branches useful to code collaborations?

Create a local branch

  • make some changes
  • commit

Switch between branches

  • can you change branch if there are open changes?
  • can you go back in time?

Revert a wrong change

Push your branch to GitHub

Use GitHub to navigate between branches

Use GitHub to create a Pull Request

Play around with comments, new commits, take a look at the PR history.

Try to play with both merge and rejected pull requests.

Try to go around GitHub and look at PullRequests of famous repositories like React or Svelte

Part 6 - Code Collaborations with GitHub

Invite a friend as collaborator to your repo

Use GitHub issues to document what needs to be done

Take also a look at GitHub Projects!

Reference issues in your commits

Take a look at the issue page and notice how the history will automatically display every linked commits.

Open Pull Requests

  • try to be picky and add comments to the PR's changes
  • also, ask the author of the PR to change something

try to have multiple running PRs, practice in checking them out locally to that you - the project's owner - can test and accept them.

Part 7 - Open Source Collaboration

The best way to try this is to play with a fellow studend using repos from two different accounts!

Fork an existing Repo

Setup the upstream origin

Try to pull new changes from the upstream

Create a branch and commit some changes

Create a PR to the original repository

results matching ""

    No results matching ""