Github For Teams
Leon Noel

#100Devs
Sponsored by Microsoft Azure!
Agenda
-
Let's Talk - #100Devs & Thank You Microsoft Azure
-
Learn - GIT / Github Basics
-
Learn - Projects / Repos / Copilot
-
Learn - Issues / Pull Requests
-
Learn - Code Review
-
Learn - Merging
-
Learn - Dev vs Prod
-
Learn - GitHub Projects
-
Homework - Intro. to Git & Github
Questions
About last class or life

Checking In

Like and Retweet the Tweet
!checkin
Who is this for?

*Played around with git and maybe Github
You Are Not Alone!

!100Devs
leonnoel.com/100devs
THANK YOU

Microsoft Azure you a real one
SECRET !NEWSLETTER RAFFLE

Let's GIT IT ON

First, The Terminal

Terminal, Bash, Git Bash, Unix, Shell, CLI, cmd


A place where you can type commands that cause actions
CLI > GUI
Command Line Interface vs. Graphical User Interface
Let's Look
The Terminal

Common Commands

pwd
(print working directory) shows where you are

mkdir
(make directory) create a folder

cd
(change directory) move to a different folder

cd ..
goes up a folder

cd ~
go back to home folder

touch
create a file

ls
shows you all the files in a folder

ls -l
shows you all the files in a folder with more info

ls -la
shows you all the files in a folder including hidden

rm
removes a file

rm -r <folder>
removes a folder

rm -rf <folder>
removes everything even protected files - be careful!

clear
clears what is currently being displayed


code filename
Opens file in VS Code
In VS Code:
view -> Command Palette ->
Shell Command: Install 'code' command in PATH

Access The Terminal?
Mac & GNU/Linux
Applications -> Terminal
Windows
Git Bash
https://gitforwindows.org
(for today)
Let's Code
Normal Folder Setup

!raffle

WHAT IS GIT?
While working on a really important Word Doc what did you do?
What if you wanted to work with someone else?
Git solves this problem when working with code
(save points)
Git is a version control system
A really fancy way of tracking changes
Git enables you to take "snapshots"
This has a deeper meaning, but similar to save points
Git enables you to take "snapshots" by making a commit
Just the term for creating that save point
Git enables you to roll back to previous "snapshots" (commits)
No more file -> save as -> folder132
Install Git
Windows
Git Bash
https://gitforwindows.org
(for today)
WSL
(for life)
MacOS
Install Homebrew:
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ brew install git
GNU / Linux
Debian / Ubuntu
$ sudo apt-get update
$ sudo apt-get install git
Once Installed
Setup User Name and Email
$ git config --global user.name "Leon Noel"
$ git config --global user.email "leon@leonnoel.com"
Let's Install
Try Installing Git
*If you get stuck, leonnoel.com/discord

!raffle

Basic Git Commands
git init
Creates a special folder to hold all of your snapshots (commits)

git add <file>
Adds file to staging area (not yet in that special folder)
git add *.html
Adds all html files to staging area (not yet in that special folder)
git add .
Adds everything to staging area (not yet in that special folder)
git status
Shows everything in staging area (not yet in that special folder)
git rm --cached index.html
Removes index.html from staging area
git commit
Adds everything in staging to the special folder as a snapshot

If you get stuck in vim:
i -> then type your message -> escape -> type :wq -> enter
git commit -m "text"
Adds everything in staging to the special folder as a snapshot

git branch -M main
Changes name of staging area to main
Let's Code
Make A Commit

!raffle

Want to try something without borking all your code
BRANCHES

git status
Find out if you are on main first
git branch <name>
Creates a new branch for you to make changes on without affecting the rest of your code!
git checkout <name>
Moves you to new branch where you can make changes without affecting the rest of your code!
Make Your Changes
Add your changes to staging
Commit Your Changes
git add .
git commit -m "changes made"
git checkout main
Moves you back to main branch
git merge <branch>
Adds changes from other branch to main
Let's Code
Use A Branch

!raffle

What is Github?
Local Vs. Remote

Not only backups,
but a whole suite of tools to work with other developers

Let's Make
A Github Account

!raffle

Let's Create A Freelancer Listing
Github Copilot To Help

Create A Github Repo


Instructions with each new repo
PUSH IT

Now Let's Work Together

Create Repo and Invite Bob

Create A File

We'll Code In The Cloud

Just press .
GITHUB CODESPACES
60 hours of free compute time

What are Github Issues?
Create An Issue

Assign The Issue

Let's Create
Our First Issue
Freelancer Repo We Just Created

Let's Talk Workflow
Repeat With Me
Every Team Is Different
This Is For Beginners
I Will Not Workflow Shame
GitHub Flow
"GitHub flow is a lightweight, branch-based workflow. The GitHub flow is useful for everyone, not just developers. For example, here at GitHub, we use GitHub flow for our site policy, documentation, and roadmap."
https://docs.github.com/en/get-started/quickstart/github-flow
GitHub Flow
- Create A Branch
- Make Changes
- Create A Pull Request
- Address Review Comments
- Merge Your Pull Request
- Delete Your Branch
Creater Flow
- Create Issue
- Review PR
- Request Changes
- Approve Changes
- Close Issue
Dev Flow
- Pick Issue
- Comment Working On
- Assign To Themself
- Make Changes / Commit
- Make Pull Request
- Complete Requested Changes
- Merge Pull Request
- Delete Branch
Create A Branch

Get The Code
git pull git checkout or just .

Make Changes
Push The Repo
Commit has issue number
Ex: Added company name #1

Create A Pull Request

Let's Review
Some Code!
Start A Review

Resolve Conversation

Request Changes

Make The New Changes

Approve The New Changes

Merge The Changes

STRAIGHT TO MAIN

Delete The Branch

Close The Issue

Questions?

!raffle

Let's Create A Dev Branch

Both Make Changes On Dev

Manage Conflicts

How To Prevent Merge Conflicts
- git checkout development
- git pull
- git checkout your-branch
- git merge development
- MAKE YOUR CHANGES
- git add .
- git commit -m "Added changes #issue-num"
- git push
!raffle

GitHub Projects

Let's Submit
A Real Pull Request

JOB-ULY
Laptop !raffle

Homework

#100Devs - Github For Teams (cohort 2)
By Leon Noel
#100Devs - Github For Teams (cohort 2)
Class 72 of our Free Web Dev Bootcamp for folx affected by the pandemic. Join live T/Th 6:30pm ET leonnoel.com/twitch and ask questions here: leonnoel.com/discord
- 1,590