Technical Workshop I

Introduction to GitHub

Prerequisites

● Bring laptop● Make a GitHub account● Download and Install Git

Why is GitHub important?

● Using GitHub for○ Hackathons○ Personal projects○ Industry

● Version Control

Git vs. GitHub

● Git○ Version control system○ Tool to manage source

code history

● GitHub○ Hosting service for Git

repositories○ Service for projects using

Git○ Task management, bug

tracking, and feature requests

Learning Example: Tic-Tac-Toe

Creating Remote

RepositoryNavigate to www.github.com and

login to your account

Creating Remote

Repository

Creating Remote

Repository

Creating Local Repository

GitHub gives us the code, but first let’s understand it

git init

git add

git commit

git status

Lets try it out!

Lets try it out!

Lets try it out!

Lets try it out!

Why are the files not showing up on GitHub?

● Our local repository is not yet connected to our remote repository

● How do we fix this problem?○ We have to connect the local and remote repositories○ Then push our local files to the remote○ To do this, we need a couple more commands

■ git remote ■ git push

git remote

git push

Lets try it out!

Tip: remote url is the GitHub repository URL in the browser with .git at the end!

Lets try it out!

What are Branches?

● A branch in Git is simply a lightweight, movable pointer to a commit. The default branch name in Git is master. As you initially make commits, you're given a master branch that points to the last commit you made.

● To work with branches in git, we need to learn several more commands○ git branch○ git checkout

git branch

git checkout

Lets try it out!

Lets try it out!

Tip: the * in front of game lets us know we are currently on that branch!

So we have a branch now what?

● Time to make our tic-tac-toe game!○ Don’t have time to make from scratch○ So we need to learn how to fork a repository

■ A fork is simply a clone of some repository that you work on without affecting the repository you got it from

○ We will need a new command to fork■ git pull

git pull

Lets try it out!

First we need to connect to the remote that we will pull the unfinished game from

Remote URL: https://github.com/bethqiang/tic-tac-toe.git

Lets try it out!

We use the --allow-unrelated-histories flag since no commits are similar between our branch and the master branch of the finished game

We got a merge conflict with the README.md file, lets see how to fix that

Dealing with merge conflicts

Our README.md file looks very different now, git pull attempted to merge our README.md and the README.md from the finished game

Dealing with merge conflicts

<<<<<<< HEAD is the start of our README.md======= marks the split of our README.md from the one we got from the finished game>>>>>>> 83ed...262 marks the end of the README.md we got from the finished game

Dealing with merge conflicts

Delete from the file whichever parts you don't want to keep and then git add and git commit

Dealing with merge conflicts

Checking what we have on GitHub

It appears nothing has changed on GitHub why is that?

Checking what we have on GitHub

We have to switch branches to see what is in the game branch

Checking what we have on GitHub

Now we see the tic-tac-toe game files we pulled in

How does the game look?

Open the index.html file from your local repository to try playing!

Lets modify the game!

● Create a branch where we will work on the change● Once change is done we will merge it back into our

game branch● To do this we will need a new command

○ git merge

git merge

Lets try it out!

Created and switched to a branch named style_update

Lets try it out!

Open the style.css file this is where the styling for the game is kept

Lets try it out!

We are going to modify the color of the X’s and O’s

Make sure to save the file afterwards

Lets see how it looks now!

How do we merge it into our game branch?

Before we can merge the changes with our game branch we need to add and commit the changes

How do we merge it into our game branch?

First we need to switch into the game branchThen we can use git merge style_update to merge in the changes between both commits

Cleaning up the branches

Now that we are done with the style_update branch we can delete it with the -d flag

Updated game not on GitHub?

We have to push our commit in order to update the local repository

Finishing touches

● We need to merge the master branch with the game branch

● Look into GitHub issue tracking

Lets try it out!

Merged game branch into master and then pushed

Issue Tracking

● Allows you to assign issues to yourself and or collaborators● Keep track of issues and mark when they are resolved● Mark issues with specific tags like help wanted or beginner

friendly

How to use Issues in GitHub

How to use Issues in GitHub

How to use Issues in GitHub

Thanks for coming!