From an early age, it is instilled into us that we must always command-S every chance we get, so that we don't lose precious work. But what if we want to work on two versions of a project simultaneously? Or we're working with 4 other people, all on the same file? Or 100 people? The need for version control is great, and Git is our savior.

A long time ago, I told you to set up git and register for GitHub, so if you haven't already, do so now! You'll need them to get through the lesson; instead of going through content and then doing a mini-project at the end, this will be a little more interactive.

Mac users, open your terminals; Windows users, open Command Prompt. Let's get to it!

Navigation in the terminal

Before we start looking at Git, let's make sure we have enough knowledge about our terminal to be able to move around folders and files.

pwd

If you're a Mac user, in your terminal, type pwd and press enter. This is the first of several commands we'll cover, and it shows you exactly where you are in your terminal. That's why the command is called pwd: it stands for Print Working Directory.

Windows users won't have to worry about pwd, because Command Prompt will always show your complete location.

If you're ever confused or want to learn more about a specific command, just run man [command] on Macs, or HELP [command] on Windows. For example, you can type man ls and you'll see more information than you'd ever want to know about ls! On Macs, you'll have to press q in order to exit the manual view.

ls

Once you've figured out what directory you're in inside your terminal, run ls (dir on Windows). You'll see a list of all the files and folders inside your current directory.

cd

Now that you can see all your files and folders, we'll talk about navigating between folders. If you've just run ls or dir, you'll be able to see a bunch of folders, like Documents and Downloads. Try running cd Documents now. This will bring you into the Documents folder, and you can ls or dir to see how poorly organized your Documents folder is.

To get back to where you were, type cd ..: .. always stands for the parent directory, and . always stands for the current directory.

subl

We'll cover one more command, and it's actually a command we'll install ourselves! For Mac users, run the following command (don't worry about understanding it):

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl

For Windows users, follow this tutorial.

Now, we'll be able to open files with Sublime right from the command line! Just type subl [filename] to do so. If you type subl ., Sublime will automatically open all files in your current folder. Super userful!

OK, now we're ready to get started with git!

Creating and cloning your first repo

First, login to GitHub and create a new repository. Name the repository [username].github.io, make it public, and check the box that says “Initialize this repository with a README”.

Once you've created the repository (repo for short), GitHub will take you to the repo's freshly created page. Find the box on the page that contains a link; it should look like this:

Copy the link, then open your terminal, navigate to a folder where you're comfortable keeping coding projects, and run the following command:

git clone [link-you-copied]

This will copy the repository and all its contents onto your computer, and it'll create a new folder inside whatever folder you ran git clone from.

You can do this with any project on GitHub, whether or not it belongs to you. People who use GitHub to store their projects are participating in open source development, so that everyone can contribute to everyone else's projects. Now you're entering into that world!

Committing changes to a project

While you should still be saving your work habitually, Git enables you to create certain checkpoints. Whenever you feel that you've completed a task, solved a problem, or you just want to save the work that you've done as a complete unit, you make a Git commit.

There are a couple of different steps to doing this. First, let's get our repository to a state that's ready to be committed. Right now, if you ls or dir inside the directory you just cloned, there should only be one file: README.md. Let's fix that by adding an index.html! You can either reuse your HTML from our assignments or create something new, but it doesn't matter as long as you save it in your username.github.io folder.

git status

Now, try running the following command: git status. Your terminal will respond with some information; importantly, it tells us that we have “untracked files”. Don't worry about the other information for now.

git status is a really important command, because it shows us what Git thinks the current state of the repository is. It's a powerful debugging tool, and also helps us understand what other git commands are actually doing behind the scenes.

git add

Let's run another command: git add index.html. Now, if we run git status again, we'll see that we no longer have any untracked files; instead, we have a section called “Changes to be committed”, and it tells us that Git is now aware of a new file called index.html. index.html is now staged to be committed.

You can stage all of the files in a directory by running git add -A.

git commit

So what does it mean for a file to be staged to be committed? It means that if we run git commit, our changes will be included in that commit, which, like I mentioned before, is essentially a checkpoint for our repo. Let's do this now by running git commit -m "Create index.html". Whenever you make a commit, you include a commit message that explains the changes you've made, and it goes inside quotes after -m.

git log

If you run git log, you'll see the entire history of your repository. Now that you've committed something, the log will contain two commits: the initial commit, made on GitHub, and your own commit, “Create index.html”.

git push

So far, all of these commands have only been relevant to our local work. But the magic of Git is that it makes it really easy to share your code with other people and store it in one centralized location. Run git push origin master and watch the magic unfold! It'll print some garbage, like Delta compression using up to 4 threads, but what's important is that it gets your remote repository (i.e., GitHub's version) up to the same point as your local repo. The GitHub page for your repo will reflect the changes you've made.

Developing a Git workflow

These commands are all you need to maintain a repo on your own. You should develop a consistent workflow with Git, and it should look something like this:

1. Do some good work.
2. git add: Most of the time, you'll use git add -A, but you can specify individual files if need be.
3. git commit -m "Extra informative commit message"
4. git push origin master
5. Repeat steps 1–4 until code is perfect

git diff

There's another command that will be helpful to you as you start to work with bigger and bigger files and projects. Running git diff will show the differences between the lines of code in your currently saved files and the code from your most recent commit. If you ever spend more than an hour working on something, you'll probably find yourself wondering what's actually changed and how it's changed before you want to git add anything. This is a great way to ensure that you're only committing exactly the code you want to commit.

This lesson is a little shorter, but there's still a lot of technical language to learn!

Terms

Git

A version control system developed by Linus Torvalds in 2005.

version control

Software that makes it easy to organize and control revisions.

command

A program you can run from the command line. You should be familiar with pwd, ls (or dir), cd, and subl.

Repository (repo)

A folder that contains a project that's tracked by Git.

GitHub

A platform that hosts Git projects and facilitates open source collaboration.

staged

Describes changes that are ready to be committed. git add stages your changes.

commit

A savepoint in Git history.

remote

A version of a Git project that is hosted on an outside network. GitHub contains the remote version of your username.github.io repo.

Git commands to be familiar with:

• git status: current state of the git repo
• git add: stage files for being committed
• git commit: save all staged files into a definitive savepoint
• git log: shows commit history
• git push: pushes local commits to remote
• git diff: shows difference between repo and most recent commit

In your browser, go to [username].github.io: surprise! GitHub hosts a free website for all of its users, because they are an amazing company. If you're interested in customizing your domain name, we'll talk about it in the next section.

This marks the end of our curriculum. I hope you've enjoyed it! I spent a really long time trying to make it as good as I could, but I know there are a million things that could be better. If you have any feedback at all, open a GitHub issue or DM me or email me or find me and talk to me in real life.

Thank you so much for reading this far! I really mean it.

If you are still thirsting for more knowledge and more stuff to do, don't worry: I'm on the same page. There's one more page full of extra things to learn about that will make you an even better web developer.