Git Basics
Tony Cui & Abby Chou
How do we collaborate on code?
ode
c
co
de
e
cod
The issue with Code-Sharing
The issue with Code-Sharing
Something
Home page homepage
needs
The issue with Code-Sharing
Something
Home page homepage
needs
The issue with Code-Sharing
Bro what
happened?
Something
Home page homepage
needs
The issue with Code-Sharing
Bro what ✨ upgrading ✨
happened?
Something
Home page homepage
needs
The issue with Code-Sharing
Can u like
not?
Something
Home page homepage
needs
The issue with Code-Sharing
Can u like
Can u like
✨deal with it✨
not?
Something
Home page homepage
needs
We need independent copies of the code! (so
people can work without disrupting each
other)
Something
Who homepage
broke xyz needs
i need it
rn >:(
…but that creates so many problems 😖
Hey I know you made changes in like 50 places
in that file but can you copy the changes over
one by one
Remove lines 250-280
Add 24 new lines
An hour later...
WAIT!!!!!!!!!
I NEEDED
LINES 250-280
ROLLBACK ROLLBACK
WHERE WHERE
????
The Problems
● Need independent local copies of the codebase
● Need to be able to merge different people’s changes together
● Need to keep track of versions
● Need to know which version is the most up-to-date
How do we solve these issues?
Introducing…
What does Git do?
Git tracks changes.
(How? ✨math✨)
mydoc.txt
I’m writing a story. I’m writing a story.
It’s really good! It’s really good!
And about cats! And about cats!
Like corgis :D
version1 version2
mydoc.txt
I’m writing a story. I’m writing a story. I’m writing a story.
It’s really good! It’s really good! It’s really good!
And about cats! And about cats! And about cats!
Like corgis :D Like corgis :D
version version version
1 2 3
mydoc.txt
I’m writing a story. I’m writing a story. I’m writing a story.
It’s really good! It’s really good! It’s really good!
And about cats! And about cats! And about cats!
Like corgis :D Like corgis :D
version version version
1 2 3
+ Like corgis :D - And about cats!
The “Math”: @ Line 4 @ Line 3
example
Getting set up with git :D
Demonstration
Try the following: Reference
1. Make a new directory cd [directory] change directory
2. Cd into that directory ls list the contents of current directory
3. Turn your directory into a git mkdir [folder_name] make directory
repo! git init turns current directory into git
repo!
Special Characters:
. current directory
.. parent directory
Your turn!
Try the following: Reference
1. Make a new directory cd [directory] change directory
2. Cd into that directory ls list the contents of current directory
3. Turn your directory into a git mkdir [folder_name] make directory
repo! git init turns current directory into git
repo!
Special Characters:
. current directory
.. parent directory
Staging & Committing
- I like cats :D
cats.py line 4
+ I like corgis :D
woof.py line 37
Doing
stuff
tim
+ I like huskies :D
e
woof.py line 27
d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24
d
Starte
stuff
Working copy Staging Area Commit History
Staging & Committing
Working copy
Staging & Committing
- I like cats :D
cats.py line 4
+ I like corgis :D
woof.py line 37
Staging & Committing
- I like cats :D
cats.py line 4
+ I like corgis :D
woof.py line 37
+ I like huskies :D
woof.py line 27
Staging & Committing
- I like cats :D
cats.py line 4
+ I like corgis :D
woof.py line 37
+ I like huskies :D
woof.py line 27
+ I like Andrew :D
tonythoughts.js line 24
Staging & Committing
- I like cats :D
cats.py line 4
+ I like corgis :D
woof.py line 37
Doing
stuff
tim
+ I like huskies :D
e
woof.py line 27
d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24
d
Starte
stuff
Working copy Commit History
Staging & Committing
- I like cats :D
cats.py line 4
+ I like corgis :D
woof.py line 37
Doing
stuff
tim
+ I like huskies :D
e
woof.py line 27
d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24
d
Starte
stuff
Working copy Staging Area Commit History
Staging & Committing
- I like cats :D
cats.py line 4
+ I of.p
wo
27 :D
lik y li
e c ne
in ies
Doing
yl k
or
stuff
tim
.p us
e
gis 37
of e h
e
:D
wo I lik
+
d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24
d
Starte
stuff
Working copy Staging Area Commit History
Staging & Committing
- I like cats :D
cats.py line 4
dogs
Doing
stuff
tim
e
d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24
d
Starte
stuff
Working copy Staging Area Commit History
Staging & Committing
- I like cats :D
cats.py line 4
dogs
Doing
stuff
tim
e
d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24
d
Starte
stuff
Working copy Staging Area Commit History
Demo Staging & Commits
Demonstration
1. Make some changes git diff
a. Git status git status
2. Stage some changes git add
a. Git status git commit -m
3. Make a commit
a. Git status
4. Git log
a. Git status
Your turn!
In your new repo… Commands Ref
1. Make some code changes git add stage changes for
2. Stage changes with git add commit
3. Commit the changes git commit -m “[msg]”
4. Check your commit log git status <- use this often!
5. (Optional) Repeat! (Try deleting stuff too) git log show commit history
a. After you make changes (before you git diff show the diff
stage them), git diff to see your changes! (changes) between working
copy and staged/committed
copy
Object Graph
18e3
dogs
dogs
Commit id:
33cc
18e3
e
Doing
Message:
tim
stuff
“dogs”
d 8e33
A dde
stuff
d
Starte
stuff ca53
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”
andrew: “can u help me fix this bug on the home page uwu”
👉👈
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”
andrew: “can u help me fix this bug on the home page uwu”
tony: “anything for u bb 😍”
👉👈 👉👈
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”
andrew: “can u help me fix this bug on the home page”
tony: “anything for u bb 😍”
boss abby (who got dumped recently 😒) : “tony we need a
weblab-tinder feature TOMORROW and u hav to do it”
😅 😅
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”
andrew: “can u help me fix this bug on the home page”
tony: “anything for u bb 😍”
boss abby (who got dumped recently 😒) : “tony we need a
weblab-tinder feature TOMORROW and u hav to do it”
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”
andrew: “can u help me fix this bug on the home page”
tony: “anything for u bb 😍”
boss abby (who got dumped recently 😒) : “tony we need a
weblab-tinder feature TOMORROW and u hav to do it”
tony: “bruh” save me
How do we work on multiple features at once?
home
Branching page
remodel
Tony
weblab Andrew
home
tinder bug fix
page
Last
home
page
Other
stuff
Demo Branches
Demonstration
1. Creating a new branch
2. Switching between branches
Your turn! Handy commands
git branch see branches
In your new directory… git checkout [branch-name]
1. Create a new branch switch to existing branch
2. Add a couple of commits to your git checkout -b [branch-name]
branch, check the log create and checkout new branch
3. Checkout back to main, check the log
4. Add a couple of commits to main, Previous Commands
check the log git status
5. Try and draw and/or explain to your git add
partner what you think the object git commit -m
graph looks like! git log
What is happening in the object graph :0?
webtinder
main
What is happening in the object graph :0?
webtinder
main
How do we put them back together?
webtinder
main
example
merging
Follow Along
Follow along!
1. Checkout into main branch
2. Git merge [new branch name]
How do we put them back together?
webtinder
main
How do we put them back together?
.
rt of .
So
webtinder webtinder
main
main
How do we put them back together?
.
rt of .
So
webtinder webtinder
main
main
Preview
🐳, how does collaboration
work then?
webtinder
main
webtinder
main
Remote Server (github)
git
clo
n e
webtinder
webtinder
main
webtinder main
main
Remote Server (github)
git
com
mit
webtinder
webtinder
main
webtinder main
main
Remote Server (github)
git
p ush
webtinder
webtinder
main
webtinder main
main
Remote Server (github)
Git fetch
webtinder
webtinder
main
webtinder main
main
Remote Server (github)
Git fetch
webtinder
webtinder
main
webtinder main
main
Remote Server (github)
Git fetch
webtinder
webtinder
main
webtinder main
main
Remote Server (github)
Git fetch
webtinder
webtinder
main
webtinder main
main
Remote Server (github)
webtinder
webtinder
main
webtinder main
main
Remote Server (github)
👍
l l
pu
gi t
webtinder webtinder
webtinder
main main
main
Remote Server (github)
e d !
t u
+ Like cats :D
@ Line 4
n
St ay
Added
lots of
corgis to + Like corgis :D
corgis.py
@ Line 4
+ Like corgis :D
@ Line 4
git reset –hard
Staging area
