WHOA THERE!

DELETE THIS SLIDE BEFORE PRESENTING

1. Copy these slides to your Google Drive Account or download as a
Powerpoint File.

2. Customize introduction slide.

3. Add your GitKraken Referral URL in Slide 23

4. Rehearse this presentation at least 1 - 2 times before the

workshop.
1
Get Crackin’ with Git
Using GitKraken
 Get Crackin' with Git using GitKraken!

INTRODUCE YOURSELF

Your name
[Your Picture] @yourtwitter
#relavanthashtags
 Why are we here?

● How many people here have had to

collaborate on a code project before and
weren't sure how to go about it?
● How many of us have used Git/GitHub or
other tools to collaborate and felt like it
was a really tricky process?
● Maybe you've worked on a project with
others using Git and had a hard time
figuring out who had done what.
● Or maybe you are comfortable with Git,
but you're not sure how to track who's
working on what?
Luckily, there are tools to make
this process much simpler!
 Get Crackin' with Git using GitKraken!

What You Are Going to Learn Today

1 A best practice workflow for collaborating using Git

2 How GitKraken Git GUI simplifies collaboration

3 How to use GitKraken Boards to manage tasks

 Get Crackin' with Git using GitKraken!

What You Are Going To Build

You'll use a simple HTML/CSS template to build a bio webpage like the one below.
You don't need to know any HTML/CSS for this to work! We'll be using this project
to help us learn GitKraken Git GUI and GitKraken Boards.

We Can Who We Are

Do Git!
Rosie the Kraken
I’m Rosie the Kraken! In the 1940s, I encouraged women to join the
World War II effort in the United States. Since then, I have become a
symbol of women participating in all sorts of industries where they are
underrepresented. We can do it!
 Get Crackin' with Git using GitKraken!

How You Are Going To Do It

1. We'll discuss the traditional Git 5. You will create a shared

workflow and working with Git GitKraken Board to track
from the command line. tasks.
2. Then, you'll make GitHub and 6. You'll fork and clone the
GitKraken accounts. project.
3. You'll download and install 7. You’ll learn how collaborate on
GitKraken Git GUI. the project using GitKraken!
4. We'll explore GitKraken Git GUI
and GitKraken Boards.
Great! Now that you know what's
coming, let's understand Git.
 Get Crackin' with Git using GitKraken!

Table of Contents
1. Intro to Git and GitHub
2. Set up GitKraken
3. Customize!
4. Wrap Up and Next Steps
 What’s Git?
Git is a version control system that helps you collaborate on projects with
others. There are two main features that help you achieve this.
1. Log changes in a searchable way, instead of renaming a file for each version.

2. Collaborators can work in parallel and merge their changes automatically,

instead of manually comparing the differences between a file.
 Old-School Git

Some developers use the command line to interact with Git and GitHub by
following the best-practice workflow described in the next slides.

1. First, they might fork someone Key Terms

else's code. This creates their own
fork: your own copy of someone
copy of someone else's project.
else's repository.

2. Then they would create a branch. branch: a parallel version of the

The branch is a parallel version of master copy of a repo. Making a
their fork, where they can test branch allows you to edit code
changes without editing the without accidentally breaking a
master copy. working version.
 Old-School Git

3. They stage their changes as Key Terms

they go. When they're happy stage: add to a cohesive
with them, they commit them. group/bundle of revisions
4. To add their working version
(branch) to the master branch, commit: a group of revisions you
they open a pull request. want to officially add to your branch

5. Then, they (or the project

owner) will merge the branch merge: to officially add the changes
into the master branch. from your branch into the master
branch (or another branch)
 The next few slides will explain the process by
which developers might interact with Git using
their command line. This is just an explanation –
these are not steps to follow!
 How do they do this?

If a developer is using the command line to complete these steps, their old-
school workflow might look something like this:

1. Go to GitHub to find the project they

want to work with and click fork.

2. Go to their own GitHub profile to

see their fork of the repo, and copy
the clone URL.
 How do they do this?

3. Open their terminal and enter these commands to clone the repo and
create a branch.
 How do they do this?

4. After making changes using their text editor, they would enter
these commands to stage their changes and commit them.
 How do they do this?

5. Then they would push the changes up to the repository on GitHub.

6. Then they might go to GitHub to review and merge the pull request.
 Get Crackin' with Git using GitKraken!

Why the GitKraken Git GUI?

Git is powerful, but memorizing commands is time-consuming and

how Git works can be tricky to visualize.
The GitKraken Git GUI provides a visual interface enabling the same
workflow with only a few clicks.
Now that you have a basic introduction
to Git, let's have GitHub and GitKraken
do the hard work for us!
 Get Crackin' with Git using GitKraken!

Table of Contents
1. Intro to Git and GitHub
2. Set up GitKraken
3. Customize!
4. Wrap Up and Next Steps
 Make a GitHub Account

Visit the URL on the left if you're a student or the right if you are not.
Follow the instructions on GitHub.com to make your account!

https://education.github.com/ https://github.com/
 Sign up for GitKraken
Use this specific link to download and you'll be entered into a raffle to win prizes!

[Your GitKraken Referral URL]

1. Once you have created a GitHub

account, visit the URL above.
2. Select Sign in with GitHub.
3. Then select Authorize Axosoft (the
company that makes GitKraken!)
 Download the GitKraken Git GUI

4. Select Download for Free.

 Download the GitKraken Git GUI

6. Download the GitKraken Git GUI for your operating system.

7. Then, follow the installation instructions for your operating system.
 Download the GitKraken Git GUI

8. Select Sign in with GitHub as before, which will open a web browser.
9. Then, select Continue authorization.
 Download the GitKraken Git GUI

10. If you see this modal, select Start my GitKraken Pro trial now. If you don't
see this, your GitKraken account was automatically updated to Pro when you
made your GitHub Edu account!
 Integrate GitHub
11. To make sure that GitKraken is authorized to work with your GitHub
account, open your Preferences.
12. Select Authentication, then GitHub.com.
13. If your GitHub account is not already connected, select Connect to GitHub.
 Integrate GitHub

14. When you see this screen, select Exit Preferences.

 Get the Source Code

In the next few steps, your will create a repo for your webpage! Follow these
instructions very carefully.

Key Term
https://github.com/Axosoft/learn-git-with-gitkraken
fork: create a copy of a Git repository

1. Navigate to the URL above.

2. Fork the repository.
 Get the Source Code

6. Return to the GitKraken Git GUI.

7. Select Clone a repo.
 Get the Source Code

8. Browse for where you'd like the project to be stored on your computer.
9. Paste the clone URL you copied into the URL field.
10.Click Clone the repo!
 Get the Source Code

11.At the top of the screen, a bar should appear. Select Open Now.
 Let's Explore the GitKraken Git GUI!

There are SO MANY awesome features in GitKraken, all of which correspond to

parts of the Git workflow. Let's identify a few of them before getting to work.
 Let's Explore the GitKraken Git GUI!
In the upper left hand corner, you can see the name of the project you're
working on (learn-git-with-gitkraken) and the name of the branch you
have checked out (master).

Key Term
branch: a parallel copy of a repository, inside the
repository (whereas a fork is a copy of a repository outside
of the repo).
 Let's Explore the GitKraken Git GUI!

At the top of GitKraken, in the center, you can see a selection of useful options!
● pull – to bring changes from the remote down to your local environment. You
would use this option if someone else has made changes to the project that
you also want in your copy of the project.
● push – to add your local changes to the remote.

Key Term
remote: the repository on GitHub (or any other version control platform) that
your local repository is associated with
 Let's Explore the GitKraken Git GUI!

At the top of GitKraken, in the center, you can see a selection of useful options!
● branch – to create a copy of the project inside of the project itself. This allows
you to make changes and test them out, without finalizing them until you're
satisfied.
● stash – when you have changes that you aren't ready to commit, but you want
to switch to another branch, you can stash your changes.
● pop – to delete your stash from the stack
 Let's Explore the GitKraken Git GUI!

On the left side of the window, you can see branches and pull requests.

● LOCAL – this shows the branches you have in

your local environment (on the computer you're
using). If you create a branch in GitKraken (or
through the command line) that branch will
appear here. You can then push it to then
remove.
● REMOTE – this shows the branches in the
remote repository (the hosted repository, like on
GitHub). These branches might not always be
the same.
● PULL REQUESTS – this lists any open pull
requests against your repository.
There are a lot of steps coming up!
Let's create a GitKraken Board to
keep track of our progress.
 Access GitKraken Boards

1. Now you should make a board. In the toolbar, select Boards. The screen
below will open.

2. Select Create a Starter Kanban.

 Access GitKraken Boards
3. Click Starter Board to rename the board to something descriptive, like
GitKraken workshop, by clicking on the title.
4. Add these cards to your To Do list by clicking + or Add a card
5. Move any steps that you have completed to Done, and any steps you're
currently working on to In Progress by dragging and dropping.
 Access GitKraken Boards

8. Click the Boards tab in GitKraken to refer back to your board as you
complete steps!
Now we're going to clone the source
code repo using the GitKraken Git
GUI!
 Get Crackin' with Git using GitKraken!

Table of Contents
1. Intro to Git and GitHub
2. Set up GitKraken Git GUI
3. Customize!
4. Wrap Up and Next Steps
 Customize

Let's put all these features to use! As you complete each of these steps, you'll
switch back and forth between the GitKraken Git GUI and GitKraken Boards to
mark off steps.
 Create Your Own Branch

1. At the top of the GitKraken Git GUI, click Branch.

2. Name your branch and hit Enter or Return. You will be switched to your
new branch!
 Open the Project

1. On the right side of GitKraken, select View all files.

2. Then, click index.html to open it in the GitKraken Git GUI editor.
 Edit The Project
1. In index.html, scroll down to line 39.
2. There is a template for adding your personal bio. Copy lines 40 – 48.
3. Paste what you copied directly below line 51.
4. Put your name on line 45. Write a short bio about yourself on line 46.
Change the image to be one of yourself, if you wish!
5. Save your work!
 Commit Your Changes

1. index.html is listed under Unstaged Files. This means you have changes
locally, but have not added them to a commit. Select Stage all changes.
2. Your file has moved from Unstaged Files
to Staged Files. Type a descriptive
commit message.

3. Select Commit Changes to 1 file.

 Commit Your Changes
4. Now you have a new commit in your history!
5. Click Push to push your changes. This sends them to GitHub.

6. The first time you push your changes from a new branch, you might see the
notification below at the top of GitKraken. Click Submit.
 Open a Pull Request

1. Now you're ready to open a pull request to incorporate your changes. Click
the name of your branch.
2. Click Start a pull request . . .

Note: You might notice

that the name of your
branch is now listed
under LOCAL and
REMOTE.
Open a Pull Request
3. The branch under From Repo is the
branch you made at the beginning
of the workshop. The branch under
To Repo is master. You're asking
the owner of the repo to pull your
changes into master.
4. Add a title for your pull request
and a brief description.
5. Select Create Pull Request and
the pop-up below will appear.
 Check Your Progress

1. Take a moment to switch back to your GitKraken Boards and update your
tasks.
 Review The Pull Request

If you visit your repo on GitHub and select the Pull

Requests tab, you can see your pull request.
 Merge The Pull Request

You shouldn’t have any conflicts with the branch, so

you can click merge pull request.
Now that you have completed a pull
request it's time to merge changes
into master!
 Merge Your Changes

1. Back in the GitKraken Git

GUI, look at the commit
tree. Select your branch
name and drag it onto
master.

2. When the menu opens,

select Merge <your
branch name> into
branchA
 Merge Your Changes

Let's take a look at the commit tree!

● Notice that at the very bottom, you see master, and you also see master at
the top. The higher master has a computer icon, and the lower master has
the avatar of the repo's owner.
● Any branch that has the computer icon is your local version of the branch.
Any branch that has the repo owner's avatar is on the remote.
● We want our version of master to be on the remote. Let's do that now!
 Merge Your Changes

3. Now merge Branch A into master.

You'll see these errors! This is because

the code you have locally doesn't
match the code on master, and Git
couldn't determine which one was the
correct one. X them out so we can fix
it!
 Resolve your Merge Conflict
1. After you dismiss the error messages, you will see the option to view
conflict. Select it.
2. The conflict is in index.html. This is because multiple people edited it at the
same time. Click index.html to open the Merge Conflict Editor.
 Resolve your Merge Conflict

3. The code on the left is what you have locally. The code on the right is what's
in the remote repository. We want both bios to appear on our website!
Click the checkboxes on both sides.
4. Select Save in the upper right hand corner.
 Resolve your Merge Conflict

5. Now you'll have to commit

these changes. Add a commit
message and select Commit
and Merge.
 Resolve your Merge Conflict

6. Notice now that you have a local version of master again. Select Push.
7. If everything worked, you'll see the blue success message below. If not, this
is likely because you and someone else tried to resolve your conflicts at the
same time. Resolve them one at a time following the previous steps.
 Check out your Page!

Want to see what your page looks like now that it's done?
1. In GitKraken Git GUI, make sure you have the latest version of
master.
2. Right click index.html.
3. Select Copy file path to clipboard.
4. In your browser, paste the file path to view your project!
Awesome! Look what you built!
 Get Crackin' with Git using GitKraken!

Table of Contents
1. Intro to Git and GitHub
2. Set up GitKraken
3. Customize!
4. Wrap Up and Next Steps
 Get Crackin' with Git using GitKraken!

What You Learned Today

1 A best practice workflow for collaborating using Git

How to use GitKraken Git GUI to make collaboration

2 simple

3 How to use GitKraken Boards to manage tasks

 Get Crackin' with Git using GitKraken!

Keep Learning

Extra Practice Problem 1:

Deploy your Website using GitHub Pages

Extra Practice Problem 2:

Become a GitKraken Ambassador!
Elevate your knowledge and status as a software engineer by joining GitKraken’s
community of industry professionals and students. This program will help you
increase your software development knowledge, build your professional skills, and
provide value to your local tech community. Get support for your events, improve
your content, and increase your reach. Plus, there will be plenty of legendary swag
along the way!
Share your referral code for a chance to win prizes!

gitkraken.com/referrals
THANK YOU!

Your Name
[email protected]
www.gitkraken.com
Get Crackin’ with Git
Using GitKraken