Welcome to Girl Develop It

We create welcoming, supportive and accessible environments for women and non-binary adults to learn software development.

We are dedicated to providing a welcoming and comfortable environment for all to learn coding and every attendee is expected to uphold our Code of Conduct:

girldevelopit.com/codeofconduct/

bit.ly/gdi-incident-report

What Does
Girl Develop It
Teach?

Web Development

Data Science

UX Design & Research

Workforce Classes

Career-Building Events & Conferences

Find All Our Classes & Events:

www.girldevelopit.com

Housekeeping

• Display your preferred name and pronoun.
• We are here for you!
• Every question is important.
• Participate, Experiment, Have Fun!

Easy Git with
Github Desktop

Instructor Intro

Anne S. Katzeff

Web Designer, Artist, Teacher
ASK Design

• 20+ years in print design
• 10+ years in web design
• 15+ years teaching
• 15+ years painting
• Webmaestro: 20+ websites
• ASK Design specializes in designing custom websites for creative folks, small businesses, and nonprofits.

TA Intro

Faraja Thompson, M.Ed.

Educator

Welcome!

Welcome!

Agenda

Git and Github

Github Desktop

Visual Studio Code

Q & A

Course Goals

Git and Github

What is Git?

Git is a free, local system of version control. It's probably already installed on your computer. If not, follow these instructions: install Git.

Since all of Git's files and folders begin with a period (.), they are hidden on Unix-based systems such as MacOS. You access them via Terminal (Command Line) or a GUI (Graphic User Interface) application like Sourcetree or Github Desktop.

What is Github?

Github is a free cloud storage platform for hosting and managing Git files and their history.
It is the world’s largest open-source repository.

Github integrates seamlessly with Git, making it a great way to maintain a backup of your repositories while keeping track of changes. Furthermore, because Github is in the cloud, you can work on projects from anywhere and share with colleagues.

Let’s get started with this fantastic tool and learn about some of its key features!

STEP 1 - Create a Github Account

Create a Github account for a cloud storage of files and folders. Go to Github and sign up for a free account.

Github Desktop and Visual Studio Code

STEP 2 - Install Github Desktop

In order to take advantage of Github, we'll use Github Desktop. This application allows you to send and receive copies of files to and from your desktop and your Github repository.

Since I’m a visual person, I shy away from Terminal (Command Line), which is the native app for Git. Github Desktop has a simple, friendly user-interface.

Download Github Desktop and install.

Alternative GUIs

• Sourcetree
• Git Cola
• GitKraken

STEP 3 - Install Visual Studio Code

Visual Studio Code (VS Code) is my current preferred code editor, but you can use whatever you’re most comfortable with. VS Code is streamlined and has lots of features, such as a smooth integration with Github Desktop.

Download Visual Studio Code and install.

Alternative Code Editors

• Sublime Text
• Atom
• Dreamweaver

Questions?

Repositories!

STEP 4A – Create New Repository

Github

There are 2 basic ways to create repositories on Github. You can either import an existing one or create a new, empty repository. All new repositories are placed in the main branch by default.

Github - IMPORT

The only repository I’ve used is Github. But you can import repositories from Git, Subversion, Mercurial, and TFS.
Here’s how you import:

• Click the green “New” button
• At the top of the next page, underneath the head “Create a New Repository”, click on the link “import a repository“.

Github - IMPORT

• Fill in the fields for: Your old repository’s clone URL and Your new repository details (repository name)
• Choose the privacy setting (public vs. private)
• Click the green “Begin Import” button

Github - NEW

The only files in a New repository will be the README and LICENSE, if you choose those options in the Initialize section.
Here’s how you create a new repository:

• Click the green “New” button
• Fill in the fields for: Repository name (required) and Description (optional)

Github - NEW

• Choose the privacy setting (public vs. private)
• Initialize section: select the options you want for a README file, adding a .gitignore, and license. In the spirit of open source sharing, I usually select GNU General Public License v3.
• Click the green “Create Repository” button

Github Repos - Making Changes

Once Github repositories are created, you can
make changes by editing/deleting existing files or creating/adding/uploading files to it.

After any kind of alteration,
go to the bottom of the screen to either
(1) “Commit” it to the main branch or
(2) “Create a new branch for this commit and
start a pull request.”

Generally, commits are to the main branch when working solo. New branches are useful for teams. The owner of the repository can review files in new branches before committing them to the main branch.

Github Repos - Making Changes

If you've got a project folder on your desktop, you can pick and choose which files and folders to upload to a Github repository. It’s a simple drag and drop. When finished, click the green “Commit changes” button.

Let's Develop It!

Get Started:

New Github Repos and Changes

• Create a New Repo Using the IMPORT Method
• Create a New Repo Using the NEW Method
• Upload a file from your desktop to the Github Repo
• Commit the changes
• Edit that same file on your desktop and re-upload to the Github Repo
• Commit the changes

STEP 4B – Create New Repository

Github Desktop

In Github Desktop, there are various ways to add projects to Github as repositories. Go to the upper-left corner of the Github Desktop window and click on the down arrow next to “Current Repository”. The “ADD” button offers 3 options:
Clone, Create, Add.

Create a New Repository is discussed here. We’ll talk about the Clone and Add options later, in the Synchronize section.

Alternative: on a Mac, go to File menu

Github Desktop -
ADD button > Create a New Repository

New Repo, containing only 2 files: README.md and LICENSE

• Fill in the fields for: Repository name (required) and Description (optional)
• Check the box next to: “Initialize this repository with a README
• Git Ignore = None
• License = GNU GPLv3
• Local path field: click on the “Choose…” button to select the local path.
• Click on the blue “Create Repository” button.

Github Desktop -
ADD button > Create a New Repository

• Next, click the blue “Publish Repository” button.

Github Desktop -
ADD button > Create a New Repository

Uses Local Path of Existing Directory

• DO NOT Fill in the fields for: Repository name and Description
• Check the box next to: “Initialize this repository with a README
• Git Ignore = None
• License = GNU GPLv3
• Local path field: click on the “Choose…” button to select the local path.
• A warning will appear:
  “This directory appears to be a Git repository. Would you like to add this repository instead?” Click on add this repository.

Github Desktop -
ADD button > Create a New Repository

• Keep the Local path the same as the previous window, then click the blue “Add Repository” button.

Let's Develop It!

Get Started:

New Github Desktop Repository

• Create a New Repo with a New Directory
• Create a New Repo with an Existing Directory

Review:

How Do We Get Our New Repo from Our Desktop to Github?

We could create a new repo on Github and upload the desktop repo files to it.

OR

We could synchronize Github Desktop with Github.

STEP 5 – Synchronize Github Repositories with Local

In my workflow, I usually create the project folder on my desktop and then upload it to a repository in Github. No matter where the repository is originally created-–Github or local machine-–an exact duplicate of it should exist in both places. If anything is adjusted on Github, the modifications should be incorporated into your local files. Similarly, when you work on the files locally, send those changes to Github. For these reasons, you need to synchronize Github with Github Desktop.

STEP 5 – Synchronize Github Repositories with Local

Github to Local

GREEN CODE BUTTON – This is like a magic button.
It offers 3 ways to duplicate the repository on Github to your local machine:

STEP 5 – Synchronize Github Repositories with Local

Github to Local

1. Clone – HTTPS, SSH, or Github CLI. This method provides a secure connection between the local machine and Github via the Command Line. You’ll be prompted to provide authentication credentials (password). Since I don’t use Terminal, this is beyond the scope of my instructions.

STEP 5 – Synchronize Github Repositories with Local

Github to Local

2. Open with Github Desktop – this is my preferred method. It will copy all of the files and folders to your local machine and sync them with the Github repository. Use the URL tab, which will automatically provide the Github Repository URL. Click on the “Choose…” button to indicate the Local Path you want to clone to. Click on the blue “Clone” button to complete the task.
3. Download ZIP – a .zip archive can be downloaded to your local machine.

Let's Develop It!

Get Started:

Synchronize a Github Repo to Your Local Machine

• Code > Open With Github Desktop
• Code > Download ZIP

Github Desktop from Github

Another option is to clone Github repositories to your local machine using Github Desktop. In each example below, go to the upper-left corner of the Github Desktop window and click on the down arrow next to “Current Repository”.

Let’s start with cloning a Github repository.

1. ADD button > Clone Repository / GitHub.com tab
• Find the Github Repository and select it
• Local path field: can be named anything, but must be an empty directory

Github Desktop from Github

2. ADD button > Clone Repository / URL tab
• Copy and paste the Github Repository URL into the URL field
• Local path field: can be named anything, but must be an empty directory

Let's Develop It!

Get Started:

Use Github Desktop to Synchronize a Repo to Your Local Machine

• Clone > Github.com tab
• Clone > URL tab

Github Desktop to Github

Using Github Desktop, you can add repositories to Github. Go to the upper-left corner of the Github Desktop window and click on the down arrow next to “Current Repository”.

1. ADD button > Add Existing Repository
   NOTE: This is the same as Create New Repo without naming it, reviewed in an earlier slide.
• Local path field: click on the “Choose…” button to select the local path
• Click on the blue “Add Repository” button
• Click on the blue “Publish repository” button to publish the local repository to Github

Github Desktop to Github

2. ADD button > Add Existing Repository with prompt to create repository
• Local path field: click on the “Choose…” button to select the local path
• Sometimes, you’ll get an alert: “This directory does not appear to be a Git repository. Would you like to create a repository here instead?” Click on create a repository.

Github Desktop to Github

2. ADD button > Add Existing Repository with prompt to create repository
• Fill in the fields for: Repository name (required) and Description (optional)
• Check the box next to: “Initialize this repository with a README” (unless the project already has a README file)
• Git Ignore = None
• License = GNU GPLv3
• Keep the same Local path as in the previous window
• Click on the blue “Create Repository” button
• Click on the blue“Publish repository” to publish the local repository to Github

Let's Develop It!

Get Started:

Use Github Desktop to Synchronize a Local Repo to Github

• Add Existing Repo
• Add Existing Repo with prompt to create repo

STEP 6 – Push Changes from Local to Github

It’s a good idea to periodically send any local repository changes to Github. I tend to group my edits into categories, like navigation, fonts, mobile-responsive, etc. For example, when finished with a series of refinements to the navigation, I’ll commit them to the main branch.

Launch VS Code and Github Desktop

With both programs open, you can easily move from one to the other. Do a few file edits in VS Code, then go to Github Desktop.

Launch VS Code and Github Desktop

• Find the repository in the listing in the left sidebar and select it
• Click on the “Changes” tab on the top of the left sidebar
• At the bottom of the sidebar, fill in the fields for Subhead (“Update style.css”) and Description. The descriptions, which can be brief, will help you remember what you did and assist colleagues who may be working with you on the project.
• Click the blue “Commit to main” button
• Push the committed changes to Github by clicking the blue “Push origin” button

Let's Develop It!

Get Started:

Use Github Desktop to Push Local Changes to Github

• Edit Local File
• Commit to main
• Push origin

Additional Github Desktop Features

• HISTORY TAB - View a history of the changes. Modifications are highlighted.
• CURRENT BRANCH - Identifies the branches and which one is current. Create new branches. Merge other branches into main branch. Provides a list of any Pull Requests (changes made by colleagues on other branches that you can review prior to accepting and committing to main branch).

Additional Github Desktop Features

• FETCH – When changes are made directly in Github, you’ll need to “Fetch origin” in Github Desktop to keep the files sync’d.
• OPEN IN VISUAL STUDIO CODE – Open the repository in VS Code. You can change the editor in Preferences.
• SHOW IN FINDER – A helpful way to identify where the repository files reside on your local machine.
• VIEW ON GITHUB – Open the Github repository in your browser.
• OPEN IN TERMINAL – Open terminal and work in that environment.

Additional Github Features

• FORK A REPO – Clone a repo and modify it without affecting the original project.
• CONTRIBUTE – Open a Pull request.

You did it!

Photo credit: Hannah Busing cc

Share What You've Learned!

Provide your Github handle in the chat!

Give Us Your Feedback

Survey Link

Q&A

External Resources

Free Code Camp

Codecademy

CSS Tricks

Udemy

Upcoming Class:

Python I Learning Cohort (6 Class Series)

Keep in Touch

Instructor: LinkedIn, Github

TAs: LinkedIn, Github

Thank You!