Version control allows you to manage changes to projects by saving the state of code at different times. By far, the most popular version control language is Git, with roughly 70% of professional developers saying they use it over other technologies. If you're going to a apply for a job in tech, you need to be comfortable with how it works. In this episode learn the basics of working with Git.
- [Instructor] Version control allows you to manage changes to projects by saving the state of code at different times. Now, by far the most popular version control language is Git, with roughly 70% of professionals saying they use it over other version control technologies. Now, if you're going to apply for a job in tech, you need to be comfortable with how it works. So let's go over the basics. Now, you can think of version control as a time machine that lets you go back to predefined points in time.
You create these save points by creating something called commits that will let you come back and revisit those points in the future. Git also allows you to create branches. They're similar to commits, but you can create these to do bigger experiments with code. If you're into comic books, it's sort of like a multiverse where you can go to a different universe and try out different things. Commits are linear progressions in your code, and branches can be a little wilder and completely different than what you're doing.
So, the traditional process for working with Git is to make changes to your code and start by staging those changes. Staging is a temporary placeholder for your code. Once you're happy with your code, you commit that, and that creates the point in time that you can come back to. And if you want to work on a new feature you can use branches. And then once you want to combine what you've done in a branch and bring those changes back into the main branch, you merge that into the main branch. So if you've got a few minutes and you've never used Git, let's go ahead and practice the basics.
You're going to need to have two things installed. First, of course, you'll need to have Git installed, which you can find at this URL. Then you'll also need a copy of Node.js, which you can find right here. To make things quick, I've prepared a .zip file with some startup code that we can download at this URL. So I'm going to download that to my desktop, and it's right here. We'll need to go ahead and decompress it. So there's the folder. And then I can open this up in my favorite text editor. I'm going to use Visual Studio code in this course, and you can see that we have essentially an index.html as well as a package.json file.
When you see a package.json file, it means that it's using some dependencies. And I need to go ahead and install those. So let's go ahead and use the terminal application. On a PC, you would want to use something like Git Bash or something that will let you use Linux commands, and I'm going to cd or change directory to that folder, and I can just drag it on a Mac, or you could do if you want to also a cd ~/Desktop, and then the name of the folder.
That takes it to the same place. Let's go ahead and clear the screen. Let's do a list so we can see that we're in that folder, and we are going to do an npm install command to install all the dependencies. That's going to install Bootstrap and jQuery for us, and I'm going to also open this up in a browser. So you can see that everything is being loaded properly, and it looks pretty nice. So what I want to do is start out by, let's clear this screen out.
And I want to initialize this as a Git repository so that Git knows to keep track of the files in this directory. So to do that, I'm going to do a git init. That initializes the repository, and if I do a list of all my files here, so ls -la in Unix, then I can see that there is now a special .git folder. It's an invisible folder, so you're not going to see it on the desktop. If you try to open this folder up, you'll see that it doesn't show up there.
But it is there when you use one of these Linux list commands. Now that I've done that, it means that I can use Git to track this project. So let's do a git status, and we can see that Git is going to give us some information about the status of the project. So right now, it says that there are three untracked files in this project. So, the index.html, node_modules, and package.json. So, what we do in Git is start out by sending the files to a temporary placeholder called stage.
So we can do git add, and then period adds all the files. Or we can add them individually. So we can do this or use wildcards. But git add . or git add --all will add all the files into staging. If you do a git status again, you'll see that now, it's actually loading everything in my node_modules. That's why it's so big. But it's essentially adding all those files into my staging, which is my temporary place, and let's go ahead and clear this out.
So now if I want to, I can commit those files. So I'll do a git commit, and you add the -m option to add a message, and I'm just going to call this first commit. That's usually what you call the first commit. So, now that means that it's going to add all those files and Git is tracking any changes to any of those files. So, let's go ahead and clear this out, and we'll do a git status. Now it says nothing to commit. The working tree is clean.
It means that all of the files have been added, and Git is tracking any changes to any of the files. So let's go ahead and close package.json out and open up this index.html. And then change something about this file right here so it'll just say Wisdom Pet right here at this headline, which will be right here. Let's go ahead and save that. We can reload it if we want to in the browser, and you can see that a change has been made. Let's go back into our terminal application and run a Git status, and you can see that now it says, hey, you have changed a document.
It's the index.html file. Do you want to do anything about it? And if you want to, you go through the same process. You can see git add, and we can type in index.html. Here it's just one file. And then if you do git status, it says it's in staging, and it's ready to be committed. Now you can unstage a file using this command, and it would sort of kick it back to the unstage sort of section. So remember there's three buckets in Git: the regular sort of unstaged section, the staged section, and the committed section.
So you can do something called a git log. Let's go ahead and clear this out before we do that. So, we can do a git log, and you can see the list of commits that we've done. We've only done one, and the name according to Git is this sort of huge hash right here. And you can see that my comment is what lets me know which commit that is. So, let's say that we wanted to sort of make a more significant change to this project. So I'm going to go ahead and add a little bit of HTML code.
To do that, I've prepared a special gist right here. It's just a little bit of a navigation. So to copy it, I'm going to hit this Raw button. And just copy this and switch back into my code, and I'll put that right before this container. It's just a little piece of a navigation. And I'm going to save that, and let's go back into our terminal application. Let's check out the status. Now it shows us that there is something that is ready to be committed, but we have some things that need to be pushed into staging.
So the change that we've made exists as an unstaged change. So we can keep on adding things into staging. So we'll say git add, and let's just use period. It's a little bit quicker. And now if we do a git status, let's go ahead and clear this out. Git status, you can see that now everything is cool. All the files have been moved into staging, and they're ready to be committed. I'm not ready to commit this because it isn't complete. If I refresh the page, you'll see that we're missing a little bit of CSS that makes it look really nice.
So we're going to go back into our gists and look for this gist at this URL. We'll click on Raw, and we'll copy all the CSS, and we'll come back into our project, create a new file right here, style.css. We will paste all this in there, and then we can go back and link it.
So we'll need to link it right here. Link, and then we'll say style.css, and then we will refresh this, and now this looks really nice. It's a navigation to make our project look a little better that we've been working on. And then, if we want to, we can go ahead and switch back to the terminal, check out our status, git status, and now it notices that there is a new file. I've made some changes to my HTML because I added that link to the style sheet.
So I need to go ahead and stage those again. Git add . Let's clear this out. Check out our status. And now everything is ready to be committed. Those two changes are now ready to be committed. So if we want to, we can go ahead and git commit those changes, and we'll add a message, and then add a node right here. Add in navigation. And then we can go ahead and take a look at our status.
Let's clear this out. Git status. And now we can see that everything has been committed. So, if we look at our log, we'll see that there are now two commits. So that's cool, but are these commits really useful? If we wanted to, we can actually check out an earlier version of the project. And so it copied this code right here. We will do a git checkout, and we'll paste that hash. And notice that our code actually went back to the way it used to be.
It no longer has the CSS file, and it no longer has the link right here. So, we were able to sort of go back in time to this commit and see our code as it was at this particular time. So, notice that it's giving you a lot of other information here as well. So, this is called a detached HEAD state. So you can sort of take a look around, and if you want to, you can sort of check this out as a different branch.
So, with any sort of stay, we can actually create a branch based on that state. So we can say, well, I want to store sort of my original code that doesn't have any of this view navigation changes. So we can say git checkout -b and then give it a branch name, original. And now we have two branches that we can kind of go from and to. So we'll say, git branch to take a look at those, and you'll see that we're on the original branch, which is the code without any of the new changes as well as the master branch.
So, if we want to, we can say git checkout, and instead of using a big hashtag since we've created this branch as a separate element, we can type in git checkout master. And now we're in branch master, and if you take a look at this code, let's go ahead. Sometimes you have to refresh this a little bit. So let's take a look at the branch again. So we can see that now we are in master.
And we will do a git log again to take a look at where we are. So, we should be here. We should have this navigation added as well as the link to the CSS file. Let's take a look at our status. And you can see that there is nothing to commit. Let's go ahead and refresh this. You can see that everything loads well right here. The style.css file is back. So now with this sort of git time machine, we can go to different places in out project and take a look at how the code looks at different points in time.
Let's do something else. Let's go ahead and create an additional branch where we're going to experiment on what we're working on. So we'll do a git branch, and we'll call this experimental, and this branch is now a copy of wherever the master branch is. So this is another sort of save state. If we do just a git branch command, you can see that now we have this experiential branch, where in the master branch, so, nothing has changed.
If we want to experiment, we can actually check out the experimental branch, and then we can make changes. So let's go ahead and make a simple change. We will add the word Medicine back here and save this. So now, when we go back to, so, we can refresh over here if we want to. And let's go back to the terminal and do a git status.
So now the status that you're seeing is the status of this experimental branch. That's the branch we're in, and it notices that I've modified our index file. So since I'm happy with my experimental changes, I'm going to go ahead and commit this. So I'll say git add . to add all of the files that I've modified, and then git commit and then add a message, and we'll pretend these are really complicated, experimental changes.
And I'll put a danger here. So, we committed this, and git status will let us know that there's nothing that has changed since we committed. Let's go ahead and clear this out, and let's switch back to the master branch. So git checkout master, just a master branch. We can see that this change is gone over here. And now let's say that we want to bring, we tested all of our experimental changes, and we want to bring them into this master branch. We can do git merge experimental, cross our fingers, and notice that it took the branch that was the master branch.
It made all of the changes. It added essentially the word medicine here. And it brought them into the master branch. So git allows you to have essentially like a multi-universe time machine where you can create sort of safe points for your projects, and you can go backwards and forwards through those safe points. And if you want to go really crazy, you can create branches and test out completely new and different versions of your project. And then once you're happy with maybe those changes, you can bring them back in.
In addition to that, it's really great for working with other people. So other people can check out your current project, and they can create their own branches, and then you can merge those changes back into your own application. And this is why Git is so popular. But it's definitely a very deep sort of piece of technology. So if you want to learn more, then make sure you check out the Git installation page. There is some documentation there, and this is where you can find it, as well as some of the other courses that we have for Git.
If you want a quicker sort of introduction, you can take a look at learning Git and GitHub, and if you want a really deep dive into Gid, we have a fantastic Git Essential Training course, and we even have a course called GitHub for Designers that's a little bit simpler to use. So just as usual, if you have some ideas for this weekly series, and maybe you want to share with me some code or some questions you've been asked or have asked in interviews, you can connect with me in LinkedIn or just about any other social media network like Twitter or GitHub @planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.