Version Control Basics for Programmers & Web Developers | Chris Dixon | Skillshare

Version Control Basics for Programmers & Web Developers

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (38m)
    • 1. Introduction

      1:09
    • 2. Getting started with Bitbucket & SourceTree

      3:37
    • 3. Create & clone a repository

      3:39
    • 4. Commit & push: Let's make some changes to our project

      8:29
    • 5. Pull requests

      3:30
    • 6. Creating branches

      6:17
    • 7. Merging branches

      2:28
    • 8. Team collaboration & forking

      6:56
    • 9. Thank You

      1:42

About This Class

Version control is something every web developer or programmer should know.

This course gives you a quickstart into using the popular Bitbucket and SourceTree software. If you are new to Git, Bitbucket, SourceTree or version control then this is the course for you.

Version control is the system which records the changes you make to your projects, files, folders etc. This means if we mess up, or are unable to locate a bug, problem etc, we can revert back to an earlier version before our changes. By the end of this course you will be comfortable with:

  • How to set up and install Bitbucket & SourceTree
  • Creating and cloning repositories
  • Committing & pushing changes
  • Pull requests
  • Creating branches
  • Merging branches
  • Forking repositories and team collaboration

Please note this course is for beginners and is not an in depth look at Git, version control, Bitbucket and SourceTree. however you will have all the skills you need to successfully apply version control in your projects.

So sign up now and learn a valuable skill essential for any developer!

Transcripts

1. Introduction: Welcome, my name is Chris, and this course is all about teaching you how to get started with version control using Gits, Bitbucket and SouceTree. Version control is basically how we manage changes to creating websites, computer programs, or any kind of information in general. It is really important especially when dealing with hundreds of lines of text or code that we take control of our changes by creating revisions of our work. Each revision that we create, is then logged and can be restored in the future if we run into any kind of problems. Version control can also be extremely useful when teams are all working on the same projects. Different team members can create a clone of the projects, add features, and then submit the project back for approval before any changes are actually made. If you're involved in any kind of web development, programming, or anything involved in storing information, take this course now and learn a new skill which you won't regret. So thanks for your interests, and I'll see you inside the course. 2. Getting started with Bitbucket & SourceTree : So to get started, let's head over to bitbucket.org. Bitbucket is the online Git solution which will be using for the rest of this course. Once logged in, we can use it to store our projects into what is called repositories. You can think of a repository as a folder or bin to store your project into. We can create repositories in Bitbucket. These can either be seen as a backup of our project if we're working alone or as a central project folder, if working as a group or as a team. We mentioned the Bitbucket is a Git solution, and Git is basically a free to use and open-source version control system, which we'll use to manage our projects. There other version control systems available. But I'll be focusing on Git for the rest of this course. One of the great advantages of using Bitbucket is if you're a small team on five people, it's completely free to use. This even includes unlimited private repositories. When a repository is private, it's only visible to you, so you can work in privates. You can also create a public repositories too. We'll look at that later on in the course. So let's get going by hitting the "Get Started" button at the top and let's create our Bitbucket accounts. So I'm already registered with Bitbucket. So I'll leave you to go ahead and put in your e-mail and then click on "Continue" then once you've done that, you need to just confirm your e-mail address and then you're good to go. So then once you have your Bitbucket accounts all setup, we need to go ahead and download SourceTree. So we head over to sourcetreeapp.com, SourceTree is the visual interface or the software which we'll be using to connect to Bitbucket and it's completely free to download on Windows or MAC. So just click on the big "Download" button and then that should begin to download. So while that's just going ahead, let's take a quick look at the homepage. So once we've got SourceTree all up and running, this is the view which you'll be able to see and don't worry about this for now. It just looks a bit confusing, but it'll all become clear once we get going in the course. You can use SourceTree to connect to over services as well as Bitbucket such as GitHub. I integrate this software to connect to Git without having to use the command line and it's perfect for seeing exactly what you're doing if you like, working in a visual way rather than using the command line. So once that's downloaded, just click on the "Download" and install in the usual way. So just a few seconds to open up. Then just drag it into the applications, or if you're using windows, just install in the usual way. Then once that's finished, just open up SourceTree. So now we're all setup with SourceTree and Bitbucket. Join me in the next video and we'll take a look at creating our first repository. 3. Create & clone a repository: Hopefully by now, you should have your account, also upgrade Bitbucket, and you should have already downloaded and set up Sourcetree. Now, I'm going to create a folder on my desktop called repositories. And you can set this up any way you want, and you can call it anything that you want to. But I'm just going to set this folder group just to keep all our projects all in one place. So let's just rename this repositories, and I'll just keep it there for easy access. So if you go back over to the Bitbucket's homepage and make sure you logged in to your account. I'm going to get started by creating our first repository. If you go to the Repositories tab at the top and then click on that, and down at the bottom you should be able to create, so just select that. Then we need to create a name. As a web developer, I'm going to create a example based on a website, and you can use anything that you want if you're a programmer or even if you just want to create a folder with some text files. That's completely fine. I'm just going to use my example as website. I'm going to call this myWebsite. Okay, then once you've selected a name, you can either leave this checked or unchecked. I'm just going to leave it tick for now, and make it private. As I mentioned in the last video, we will be using Git for our version control and then just click Create, and that's it. That's our first repository all set up. You can have a little play about the options on the left. There's nothing actually in our folder now, so we need to create something to put inside. We need to understand that our repository is currently in the Cloud. We also need a local version on our own computer to start to work on. We do this by cloning this repository. So with Bitbucket and Sourcetree, this is really easy. All we need to do is click on "Clone in Sourcetree" and then you get a message just to launch the application. We need to create a path which we want to store our repository into. We created a repositories folder on the desktop, so I'm going to use that. Just select the repositories folder, so Desktop and then open up. Then after the folder, which needs to create the name of our repository, so in our case, or in my case, it's my website. Then just click on "Clone". Just give it a few seconds to go ahead. Okay, so then Sourcetree is automatically opened up. You can see this message saying Nothing to commit. Don't worry about that yet, it's just because we haven't made any changes. Just click on Show in Finder, at the top there. It opens up in the repositories folder, and you can see that there's the myWebsite folder which we just created. So that's it. We've now created a repository in the Cloud using Bitbuckets. Then we've cloned a local copy onto our own computer. Next, we'll take a look at how we can make changes or add to our project and then push these changes back to Bitbuckets. I'll see you there. 4. Commit & push: Let's make some changes to our project: I mentioned before that in SourceTree, this message is saying we've got nothing to commit. This means there is nothing in our local repository to send back to the repository in the cloud. Both folders are basically the same or in other words, up-to-date. Let's make some changes to our project, so we can push them back to Bitbucket. We've got a folder in our repositories folder called myWebsite. It's currently empty, so let's do something about that. Again, because mine is based on a website, I'm going to open mine, open in a text editor and then drag that into there. But as I mentioned, if you just want to use a plain text file or anything like that, just feel free to go ahead, type some text in and we can use them as your changes. Now I'm going to add some changes to the website. I'm just going to go over to getbootstrap.com and then to getting started. Bootstrap versions are changing all the time. You may find this website slightly different when you come to use it. But it doesn't really matter what you put inside there, I'm just going to look for the basic template and then select "Copy". This will give us a basic template for the website. Create a new page inside the myWebsite folder, I'm going to use command or Control N. Then paste in the template that will just copy it and I'm going to save this, as our index.html and make sure that's inside the myWebsite folder and then click "Save". If building websites aren't your thing, don't worry about what's going on here. All you need to understand is that we've added or made a change to our folder. Then I'm just going to download the rest of Bootstrap. We'll just go to the top of the page, click "Download Bootstrap" and then we can open up. All we need to do is just to grab the CSS, fonts, and JavaScript folder. We'll just copy those and then if we go into the Desktop, Repositories, myWebsite, and then just paste that in. Now we've got some extra folders in there too. Now our local version of myWebsite has got three folders on filing. Whereas our version in the cloud, it's just an empty folder. Now, if you go over to SourceTree and then open up, you should now see that something's happened. Rather than the nothing to commit message which you had before, we've now got quite a lot going on. So you can see there's a message saying unstaged files. If you scroll down, these are all the files that we just added using Bootstrap. We've got the JavaScript, the fonts, the CSS folders, and then our index.html, which we've added. We can click on any of these, I'm going to see the contents of these files on the right-hand side. What we can either do? Is we can either select these files by ticking them. We're going to add these to the staged files and these are going to be the files which are going to push back to Bitbucket, or you can just click on the box at the top and it'll add all the files to the stage section. These will all be pushed back to Bitbucket. Now these all go green and then next we need to click on the Commit button to commit these changes, I'm just going to change my user, just to be myself so there we go. So now we just need to put a message. This is the message which we can see in Bitbucket or if we're working as a team, it's a message which the rest of the team can also read. So make sure it's clear and make sure it describes actually the changes you made. I'm just going to make a note of added index.html and Bootstrap. Then once you're happy with the message, click on the "Commit" button. That's all our changes committed then there's our message again in the middle, saying nothing to commit. Let's just take a look at something, if we go back over to Bitbucket and then back into your account. Then if we go down to Commits, you'll notice that there's a message saying there's no commits and you may be wondering why this is. Well, we've committed these changes, but we haven't actually pushed them back to Bitbucket. So we've only effectively made these changes on our local repository. Go back over to SourceTree, then if we hover over the Push button, you can see we get a message saying push commits to a remote, so click on that. We want to select the master branch which is the one on Bitbucket, and then click "Okay". Now hopefully I will change it should be push back to Bitbucket then if we just refresh, there we go. So back in the commit section, you can see that, our first commit is now logged, and there's our message of added index.html and Bootstrap then if we head over to the Source. Now inside the myWebsite folder, you can see all the files and all the folders which we've added. So that's all worked fine. Give that a go and add a file and see if you can do that by yourself. I'm just going to add a CSS file, but please do try and pause the video and give that a go yourself. I'm just going to create a new file then say that, I'm going to call this file style.css and then put inside the CSS folder, then save that then go back over to SourceTree. Now SourceTree has detected a change. If we just got one file rather than ticking it, we can also add it by clicking the "Add" button at the top, and then "Commit". Then just a quick message of added CSS file, and then commits. Then just like before, click on the "Push" button to push the changes back to the master copy and then select "Okay". Then Bitbucket, refresh. So in our CSS folder, there's our style.css that we just started then in Commits there's our second commit of added the CSS file. I hope that makes sense and I hope you now have a good understanding of how to commit and also push changes back to Bitbucket. In the next video, we're going to do pretty much the reverse. I'm going to create a new file in Bitbucket and then pull that file into our local repository. 5. Pull requests: So far we've looked at how we can clone a repository onto our local computer, we've created files and made changes, which we've then pushed back to our master repository on Bitbucket. We can also do the reverse of this, pull files from Bitbucket into our local repository. To do this, let's create a file in Bitbucket, which we can then pull. Head over to your Bitbucket account and then click on "Source" and then we got a list of all the files and folders inside our repository. On the right-hand side, there should be a button to add a new file. Using my website example, I'm going to create a new CSS file, and this is called the normalize.css. Again, it doesn't matter what type of file you want to add, you can just create a basic text file if you're more comfortable doing on. If you know what's at the bottom, there's a drop-down menu with the syntax mode and people has detected that we're creating a CSS file, so we should change the syntax mode to CSS or you can select a different one if you prefer. Then to give the files some contents, I'm just going to do a Google search for normalize.css, and then we just need the first link, which is the GitHub link, then click on the "Download" and then we'll get the contents of the file, so select all and then copy. Then if you go back over to Bitbucket, and then inside this section there, this is the contents of the file, so then just paste that in and then click on the "Commit" button. You can't change the message, but I'm just going to leave mine as the generated one and then select "Commit". Now, I'll just click on the "Commit" button and you can see that our latest commit, which is the normalize.css, has been created. Also, if you go into the Source, there's our new file just at the button there. Now, our normalize file is just in our Cloud repository on Bitbucket, so now we need to pull this file back into our local repository. Go over to Sourcetree and then at the top there's a button called Pull, and you can see when you hover over it, you get the message of pull commits from a remote. Select that, I want to pull this on the master, so we can leave all the details as default, and then click "Okay", then select Show in Finder, and we'd just check that the file has been added, so into your repositories folder and then into my website. There we go, so there's our normalize.css that we've just added in Bitbucket and now we've successfully pulled that into our local repository and we can make changes to that. In the next video, we'll move on to creating branches. 6. Creating branches: Welcome back. Now we know how to push and pull changes between our local and remote repository. Next, we're going to take a look at how we can create branches. Branches are a way to branch off from a master copy and this is really useful if you maybe want to try out a new feature or to make some changes without affecting the original project. Only when we're confident that everything works as planned with the branch, we can then merge the branch back into the master copy, and this is a great way to experiment or to reduce the risk of messing things up. You can even use a branch to try out something before getting approval from your boss, for example. So let's take a look at how we can create a branch. If we go over to SourceTree, and then up at the top, select the "Branch" button. I'm going to use this branch as a way to add a new feature to our website, so I'm going to add a JavaScript carousel or a rotating carousel. Again, if websites aren't your thing, just use something that's more familiar to you or even just create a text file, again, it's completely up to you. I'm going to create my branch, I'm going to call it add-carousel, and it's a branch of the master, so then you just click on "Create branch". You can see there's a Branches tab, so I'll just hover over to the right and you can click "Show and Hide". Now you can see we've got the master copy and then the second branch of add-carousel. Now, we're in the add-carousel branch, any changes that we'll make won't affect the original master copy, so we can work our way without messing up the original branch. Now, let's go over to getbootstrap.com. I'm just going to copy the carousel example, so that's under the JavaScript tab, then carousel, and then I'm just going to copy the first example. Again, this might look slightly different when you come to do it, but the content really doesn't matter, we just shown a example of a new feature. Then once we've copied that, I'm going to go over to my text editor and then in the index.html, just scroll down to the body section. Then just under the h1 of Hello, world, just paste in the content, just underneath there. Then what uses a carousel without some images? So I've included the images with this course, if you need them, if not, just grab a couple of images and then save them inside your project. Just on my desktop, I've got an images folder, so I just copy that, and then into my website and paste them in there with the rest of the files. But if you are following along and you prefer to use your own images, just create an images folder and place in two images inside there. Then back into the index.html, in the section that we just pasted in, we need to look for the image source or img src, and this is the place that we add the images for the carousel. We've got an images folder, so images/, and I've named the first image, image1.jpg. Then just below that, there's a second image source, so let's put in the file path, so again, the images folder/image2.jpg, and then save that. Then lastly, I'm just going to change the heading to myWebsite. Now we've created a new feature to our website, let's just open it up and check it's all working okay. There's a new headline that we just added and one of our images, and the rotating carousel just below, so now we're happy with our changes and we want to merge these back onto the main branch because we know everything's working okay. Let's go back over to SourceTree. Then if we're just in a different view, just click on the "Tick", on the left-hand side there, and you can see there's now lots of changes detected. There's our index.html, it's detected a change on the level 1 heading from Hello, world to myWebsite. It's also detected a images folder with the two images we just added, and it's also detected these green section, which is all the section that we've pasted in for the carousel. Now we can commit these in the usual way, so I'll just click on "Unstaged files" and add them to the staged section. Click on "Commit" and then I should add a message to push back, so added bootstrap carousel, click on "Commit". Then if you select the View and select the Middle button, we can see that we've added the bootstrap carousel and if we also select it, we can see all the changes that we've made to it. So that's our changes all committed. In the next video, we'll take a look at how we can merge all the changes we've made back into the master branch. 7. Merging branches: Now we've created a branch and tested a new feature. If we are happy this is a success, we want to add this to our master branch. We can merge the two branches. This is pretty straightforward to do. If you go over to SourceTree. Then if you go over to Branches, you may need to click "Show" just to get the two branches to appear. Then if you double-click on the "Master", and then up at the top, we need to select "Merge". Then we need to make sure that we click the Add-carousel branch, because this is the part we want to merge in so select that and then click "Okay". Now we've merged the two branches together on our local repository. You can see that our local version is one ahead. You can all see it as a notification on the Push button. We now need to push these changes back to Bitbucket. Both our repositories are synced and up-to-date. Then click on "Push", and we'll click both the "Add-carousel" and "Master", and then click "Okay" and give it a few seconds to push it back to the cloud repository. I should be able to change this pushback to Bitbucket. Now if we go over to Commits, you can see that as I would change added Bootstrap carousel. If you click on the master copy, you can see there's two different branches that we can check out there. Also if you click on the Branches on the left navigation, you can see there's our master copy, which is the main branch, and if you select the Merged Filter, there's our add-carousel branch that we've added to the master. Then finally, if we go to Source and if we go to the Index page, you can now see the changes made once we open our file up. So we changed that to myWebsite. We added this carousel and there's the images that we added into. That's all working, so well done. That's how we branch off and merge branches using Bitbucket and SourceTree. 8. Team collaboration & forking: Welcome back. When using Bitbucket and SourceTree, it's really easy for a team to work on a single project. You can easily work on a project a team may have started by forking that repository. You can create a fork which simply creates a clone onto your accounts. Let's take a look at how this works. If you go to your Bitbucket account, and I've actually created a repository which you can clone. You can make some changes to use as an example. You can use as your own project. If you go to the top right hand corner, to the Search Box, and then if you do a search for versioncontrolcourse, and you should get the autocomplete of CoreWebTraining/versioncontrolcourse. Let's just click on that. Now this is the repository which you're going to clone. The way to do that, if we go to the left hand menu and then click on "Fork". The name is already filled in for us, so we can leave a blank if you want. Not only this as a public repository, so I'm going to uncheck. This is a private repository and then click on "Fork". Then just give a moment to complete that. Now, we've got the forked version in our accounts. We now just need to create a local version into SourceTree. Just I'll click on the "Icon" to the left of the URL, select Clone in SourceTree, and then launch. Then just starts with done previously, when cloning, go into the Repositories folder and then select the file name. I'm going to create a folder called versioncontrolcourse and then "Enter'. Now, I'm going to go over to the Repositories folder. Then I'm going to open this up in my text editor. Then shrunk versioncontrolcourse into your text editor. As a little project that I just like you to do a few little changes and then push this back to Bitbucket and see if you can manage that on your own. It's just the same steps we've taken for this course, and all I like you to change is, if you just go into the index.html, change the name to obviously your own name. Just change that in-between the two span tags and then save that. If you're feeling really creative, you can change the image, that I provided inside the folder. If you image has a different name, just make sure the inside the style.css, that you change the background URL to be the same name as your image and save that. Then you should get something that looks a little bit like this. Give that and go and see if you can push the changes back to Bitbucket. I'm just going to go ahead now and push these back. I'm going to go back over to SourceTree. Now, we should get the changes appear inside SourceTree. We change the index page. I'm going to commit these changes. I'll just put the name inside there and then "Okay", and then add a comment of changed name in index.html, and then select "Commit', push our changes and hit "Okay". Then back over to the main repository, over Bitbucket. Now, if we go to the Menu on the left-hand side and select "Compare". We can now see the two versions. We've got the master version which we forked, and then we've got our own version. We can see them both side-by-side by clicking on "Compare". If we look at the commits, this is the commit that we just made. We change the name in the index page. You can also check out the difference between the two files. We got a highlight there, which shows that we've changed the name in the level 1 heading. Also if somebody else has also been working on the original repository and has also created a fork to work on. It also got the chance to sync and update your copy with any of the changes. Now, we can add changes to the original repository or compare our changes forward to be accepted because the changes aren't automatically updated on the master copy that we've forked from. The original creator of the repository needs to review any changes and decide if they want to accept them. The way to put our changes forward, is to create a pull request. On the left-hand side, click on "Create pull request" and then give it a title. We've, mark you, got the title inside there that we use for the commit. This is our version on the left and this is the original version on the right. All we need to do is click "Create pull request". Then we take into the pull requests, we can see an overview of what we've requested. For now, that's pretty much all we can do. We now need to wait on the creator of the repository to either accept or decline our changes. If they accept our changes, they can then merge the changes into the original branch or they can even edit or decline it. Welcome back, I've just logged into my account, accepted, and approved the changes. Now we can see the pull request that we've just done, has now been merged. Our copy that we've just created has now been merged into the master copy. You can see that the reviewer has left a comment saying, "Great work, now approved." This is the repo owner. That's it. That's the end of this video. That's how we can contribute to a group's repository. 9. Thank You: So that's the end of this course. I really do hope you've enjoyed it and taken something away from it. We've covered many of the basics that we need to know when dealing with Git, Bitbucket, and Sourcetree We started off by creating a working repository, which was hosted in the cloud using Bitbucket. We then created a local clone of that repository on our raw machine. We then used that repository to create a basic website example, and then made changes to that project, and then we learned how to commit those changes and then push them back to Bitbucket. We then learned how we can make changes or add files to the master repository and then pull those changes into our local repositories, to then work from. We then looked at how we can create branches from the master project and how we can use them to add cray features without breaking any of the original code. Then once we were happy with the changes we then merged them back into the main branches. Then finally, we then looked at team collaboration and how easy it is for a group or a team to work on one particular project by forking that repository, making changes, pushing those changes back, and then getting those changes approved. I hope you managed to give that a go yourself by changing the name on this little project and then push those changes back to my original repository. So that's it. That's the end of the course, a big thank you for taking it. I hope you've enjoyed it, and I hope you understand now how useful version control can be. Thank you and bye from me.