learn-git-milestones

Git Milestones

An introduction to Git and Github.

Instructions

  1. Complete the below steps, adding content in the completions table when prompted with ✏️
  2. Review course content as needed. You may need to read the documentation as well.
  3. Insert your own class name when prompted, for example: critical-web-design
  4. After you finish, celebrate your Git proficiency! 🙌

PART 1 - Git Basics

Install, configure, and perform basic operations while creating a simple website

1. Install and Configure Git

Follow these instructions

2. Markdown Introduction

Markdown is a lightweight markup language for creating rich text.

Markdown HTML Rendered Output
[link](https://davidson.edu) <a href="https://davidson.edu">link</a> link
**bold text** <b>bold text</b> bold text
*italicized text* <i>italicized text</i> italicized text
\`code` <code>code</code> code
![text](/learn-git-milestones/assets/img/icon.png) <img alt="text" src="assets/img/icon.png"> text

🎉 Now you know basic Markdown! Continue with following instructions to learn Git, editing this .md file in the process. Use the github markdown cheatsheet to check your syntax.

Other handy Markdown tools
  1. Paste (RTF or rendered HTML) to Markdown
  2. HTML to Markdown

3. Fork this repository

Now that you know markdown, create a Github account and make your first commit on Github.com

  1. Create a Github account
  2. Fork this learn-git-milestones repository (click the Fork button, top right).
  3. ✏️ Edit this README.md file (click the pencil icon on the Github.com page) and add your 1st favorite emoji to the Completed column in appropriate row in the completions [4-1] section, below.
  4. Commit your changes to this file to the main branch with the message commit #1 from Github.com.
  5. ✏️ Use Markdown documentation to add a link in completions [4-2]. The link text should be the same as the commit message, and the url should point to the Github.com page showing the above commit.
  6. ✏️ Tables can be a little tricky in Markdown. Use a search engine to find a good link explaining how to use markdown tables and paste it in the completions [4-3] table.
  7. View the commit history and confirm your edits
  8. ✏️ What does git log do? Add your answer to completions [4-4].

4. Git Workflow > Github Desktop

With Git installed on your computer you can perform a basic Git workflow using Github Desktop. This is the first of a few different interfaces to give you practice with Git. You’ve already forked and made a commit on Github.com so let’s move to Github Desktop …

Install Github Desktop

  1. Install Github Desktop on your computer
  2. Connect your Github account in Github Desktop

Clone the repository

In Github Desktop, clone the fork of this repository that you made above…

  1. Select File > Clone Repository > Github.com and select it …
  2. Local Path: The default location is usually fine: /Users/<username>/Documents/Github/ (or the equivilant on Windows). You can also use a folder specific to your class name, as long as it doesn’t have spaces (e.g. critical-web-design)
  3. Click “Clone” to finish. This will save a local copy of the repository on your computer and make it available to Github Desktop.

Use Github Desktop with VS COde

  1. Install VS Code on your computer
  2. In Github Desktop, open the repo in VS Code: Repository > Open in VS Code (see preferences to change your editor)
  3. ✏️ In VS Code, edit this README file and add your 2nd favorite emoji to completions [5-1] and save the file.
  4. In Github Desktop, view/confirm your edits to the README file on the Changes tab
  5. Commit your changes directly to the main branch with the message commit #2 from Github Desktop.
  6. Click Push origin to push your new commit to the remote repo
  7. Choose Repository > View on Github.
  8. Click on the README file and then click History to see the history of this file
  9. Click on the above commit (#2) and copy the URL. Use VS Code to add it to completions [5-2] . Commit your change in Github Desktop.

5. Git Workflow > Command line

Some folks use the CLI as their default tool for editing and publishing source code, but Github Desktop makes it much easier.

Setup

  1. In Github Desktop, ensure you are currently in the learn-git-milestones repo you cloned above.
  2. Click Repository > Open in Terminal (“Bash” in Windows?)

Use the CLI to navigate directories

  1. List files in this directory: ls
  2. List files in this directory, including hidden: ls -la
  3. Confirm the existence of the .git directory (where Git versions and config are stored)
  4. View your current working directory and copy the full path: pwd
  5. ✏️ Open this README file in VS Code and paste that path in completions [6-1].

Use Git on the CLI

  1. Confirm your name and email is correct in the Git config
  2. View the status of your repo: git status
  3. View the changed files of your repo: git diff
  4. Add all changed files to the staging area git add .
  5. View the status of your repo git status to confirm it has been staged
  6. ✏️ Commit your changes with the message commit #3 from CLI. Add a link to this commit to completions [6-2].
  7. Use git push to push those changes to your remote repo

You’ve used most of these already through a GUI (e.g. git status, git add, git commit, git push) …

6. Create a website with Git

Create a new repository in Github Desktop

  1. Select File > New repository to create a new repository with the following…
  2. Name: first-website
  3. Local Path: Click “Choose” and select the parent folder of the repository you cloned above (so that the new repository folder will be created next to learn-git-milestones, not inside of it!)
<parent-folder> <-THIS!
|-- first-website 
|-- learn-git-milestones
  1. Initialize this resository with a README? yes
  2. Git Ignore: Select any option (we will overwrite below)
  3. License: MIT
  4. Click Create Repository

Add a README.md

  1. In Github Desktop choose Repository > Open in VS Code
  2. Add a README file: README.md
  3. In the README write your name and the date
  4. Use some Markdown tags

Add a .gitignore file

A .gitignore file will prevent git from adding unwanted files to your repository.

  1. In VS Code, add a new file named .gitignore. The period in front will hide the file from the Finder (or Explorer) but it will still be visible in VS Code.
  2. Copy the contents of either the MacOS or Windows .gitignore files and paste it into your own.
  3. Commit your changes using Github Desktop.

Add an index.html file

  1. In VS Code, create a file named index.html in your new repo
  2. Add the following code
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first github.io website</title>
	</head>
	<body>
		<h1>Hello, World!</h1>
		<p>🙌</p>
	</body>
</html>
  1. Commit your changes using Github Desktop.

Publish this repository on Github.

  1. In Github Desktop, click “Publish this repository on Github”
  2. Make sure the repository is public not private
  3. Click Publish Repository
  4. Choose Repository > View on Github
  5. ✏️ Add a link to this repo on Github to completions [7-1].

7. Publish a website with Github Pages

Now that your files are on Github you can use Github Pages, a free and easy way to host a website from your repository.

  1. On Github.com, go to your repository > Settings > Pages
  2. Source: Deploy from Branch
  3. Branch: Select the main and /(root) folder and click Save
  4. Do not use a theme. Start from scratch
  5. Wait about 60 seconds and refresh the page. You will see a link at the top that says “Your site is live at…” with a URL that looks like http://*username*.github.io/first-website
  6. Update your index.html page with VS Code, push a new commit with Github Desktop, and confirm your updates are live. You can see the status of your deployments from the link on your main repo page.
  7. ✏️ Paste a link to the live (github.io) website in completions [8-1].

🎉 Congratulations! 🎉 You just built a website with Git and Github!!

PART 2 - Git Collaboration

Forking, branching, pull requests

8. Create a branch in Github Desktop

  1. Save all your work in VS Code and close your files (this is not required to switch branches, but is a good practice so you don’t lose work!). There should be no changes in your repo.
  2. In Github Desktop, click Fetch and then Pull to make sure you are synced with the remote

branch btn

  1. Click the Branch dropdown (pictured above) to see the other branches in this repo. You should see main (your current branch) and one other. Switch to the other branch.
  2. ✏️ Look in VS Code to see the contents of the other branch. Summarize the contents of the cool-new-feature file in the completions [9-1] column.

9. Create a branch in Github Desktop

  1. Use Github Desktop to switch back to the main branch.
  2. Click Branch > New Branch… (or use the dropdown)
  3. Name the branch (using no spaces or special characters) using your name + -changes (e.g. owen-changes)
  4. Add a new file (a graphic or text file) with the same name to the repo.
  5. Commit your changes
  6. Publish your new branch and changes to the Github server
  7. Open your repo on https://github.com and find the branches page.
  8. ✏️ Click on your branch and paste the URL into the completions [10-1] column.

10. Create a pull request

A pull request (PR) is the standard method to ask another project owner to merge commits from your fork or branch into their project. Since you own this repo you walk through the process on your own.

  1. On your repo Github page, click Pull Request.
  2. Click New pull request.
  3. Compare changes between your main branch and your new branch. You should see at least one commit listed below, as well as any added or changed files.
  4. Click Create pull request. Then add any comments and click Create pull request again.
  5. On the next page, click Merge pull requests to merge the commits into your main branch.
  6. ✏️ Click Insights > Network to see the branch flowchart of your project. Paste the link into the completions [11-1] below.

pr

11. Suggest changes to a partner’s project using a PR

  1. Find a partner and discuss a small improvement to their first-website (or another) project (design, code, functionality).
  2. Fork their repository and clone your fork to your computer.
  3. Create a new branch with your name + the name of the improvement.
  4. Make the improvement.
  5. Commit your work to your new branch in your fork.
  6. On on your fork on Github.com click Pull requests > New pull request. This will take you to their repo page where you can see a diff comparing your changes in your fork:repo to their base fork:repo.
  7. ✏️ Create the pull requst as you did above. They will receive an email to accept the change. Copy the link to the pull request to the completions [12-1] table.

Turn in this Assignment

Now that we have basic Git commands out of the way use Git to create and turn in your assignment …

  1. Complete all of the items on this README, making sure all the rows in the “Completed” column contain your information below.
  2. Test your file(s) in a web browser
  3. Commit and push the files to Github
  4. Paste the github.io link into the appropriate Moodle forum

Completions

Row Step Description Completed
1 3-1 1st Favorite emoji ADD_TEXT_HERE
2 3-2 Link to commit #1 from Github.com  
3 3-3 Link to markdown tables docs  
4 3-4 What does log do?  
5 4-1 2nd Favorite emoji  
6 4-2 Link to commit #2 from Github Desktop  
7 7-1 Full path to your working directory  
8 7-2 Link to commit #3 from CLI  
9 8-1 Link to first-website github.com repo page  
10 7-1 Link to first-website github.io “project site”  
12 8-1 What is in Owen’s dev branch?  
13 9-1 Link to your new branch on github.com  
14 10-1 Link to your network graph  
15 11-1 Link to the PR you made on a partner’s github.com repo  

Resources

Here are some popular tutorials/guides. You should still look for other ones that you might like better!

Git Advanced

That is all that is required for this milestone. See the advanced.md file if you would like to continue learning Git.

Credits

Thanks to Jesse Farmer for inspiring this milestone assignment.

This site is open source. Improve this page.