Git and GitHub for Beginners: GitHub basics, and how to use GitHub Desktop

hi there my name is Kevin and today we're looking at what github is and how to use the github desktop application so github itself works with git in the last video I did we looked at what git is so if you missed that video it might be worth checking out so while git is really awesome github gives us a place online to store all the stuff we're doing it's not just local storage anymore it's now somewhere that we can share our files with everyone we can work on teams and all sorts of really awesome stuff another really cool thing with git is it allows us to fork a project so if it's a really big project such as bootstrap that is publicly you can get onto their github page you can go and check it out and if you want to make a change to it you can't make a direct change to it with a branch like we saw with the previous video because then all sorts of people making all these branches and doing who-knows-what with it so they do use branches in their project but it's a little bit different how it works because what you want to do is make a fork of the project you're copying their project on to your own account and then what happens is you can do whatever changes you want and then take those changes and a request that they get pulled into the actual project there can be a review we can leave comments back and forth discuss the changes that you're trying to make fix anything that you might have to and then eventually maybe one day they'll actually get pulled into the final project which is really cool so in this video we're going to be exploring the basics of how the desktop application works how you can make your own projects in there and how you can fork something like bootstrap into your own account make changes to that and push those changes towards them or put in a pull request and all of that so let's jump right into it ok guys so the very first thing you're going to have to do to use the github desktop app is make a github account so you'd come in here sign up just put it all in here sign up I already have an account so I'm not going to go through those steps but once you've signed up for it you're going to want to go to desktop github.com and that's where you can download github from if you it should auto detect whether you're on Mac or Windows but you click the big button here and if it for whatever reason gets the wrong one there the links here for whichever system you do need it on so once you have your github account you log in you'll see a screen that looks a little bit like this except you won't have any repositories but it probably looks something like this but for the moment let's worry about github itself or the not github itself at the github desktop application so when you open it up you'll probably see this no repository selected mine's probably going to go over and select one no usually it does so you'll probably get this this side will be empty but we'll be adding in a repository in one second now really quickly you can add in repositories here you can add one that already exists on your computer you can create one here if you don't already have one or you can clone a repository from the internet into onto your computer so if it's already on your account you can clone it into here now you can create one this way but for me the easier way to create one is actually to take an existing file so let's minimize that so we can see my desktop and I've made this folder here github beginners and it just has a blank index basic template folder right here for now that we're going to use and if you have something like that all you need to do is take it and drag it right in there and drop to create repository so think of a repository is just a folder either on your desktop or what will end up on line that's pretty much what a repository is when you drag it in it's going to ask you for the name and it's going to take your folders name it's going to just put the local path automatically and there's this get ignore here none or you can add in any programs you might be using so I am on a Windows computer I'll just select Windows for now really quickly if your folder has a space instead of a hyphen it can have it but it's going to tell you it's going to create it with the - anyway it's not doesn't allow for spaces in the name so any spaces will automatically become hyphens and I'm going to click create repository with my git ignore already in there if you do none I'd suggest going back later and putting in a git ignore there super useful to have it just stops any hidden files or things windows I don't think you'll end up with any windows file on there if you're on a Mac I strongly encourage putting the OSX in there because OSX ends up with a number of hidden files so let's just choose Windows I'm going to create my repository now you'll notice right away how it okay there's a few things that just happened really really fast first of all let's look over here on github I have two repositories already I have for my responsive website tutorials that I've done this is listed under other and that's because it's on my computer it's not actually on github right now and I didn't get it from github it's all coming from my computer so it's just listing it under other right now you'll also see when we made that it sort of went kind of crazy and this all popped up and you'll see there's a few different things going on here so when we made the folder github desktop application added a get attributes and the git ignore files by itself and we can click here and see what they are so they get attributes it auto detects text files and performs normalization and blah blah blah a little description there and get ignore this is the GUID ignore file that we had it create and it's actually ignoring some OSX system files in here too which would be convenient if you're working with you know some people might be on Windows other people might be on OSX on your team and the thumbnails and all of that so it's ignoring all the windows and or operating OS X operating system files right now which is perfect I can also click here and it's showing these are the for the files that I had in this folder to begin with so not those two but it's all those other ones it's the four files and they're not actually committed to anything right now they're here and it's saying that I you know this little plus sign means they've been added but I would need to push these into the master so let's just do basic template files and I'll commit that right now commit to master so now there's no local changes so if I click here there's the get ignore and get attributes files that were created I can click here and I can see my basic temple eight files are created and then I can go to the current live version where there's no local changes I can open this in Explorer which just means it's going to open it like that which is cool I can also click this to open it in Adam Adam is created by the people who make github so they've linked it together if you don't use Adam as your code editor there's no problem whatsoever you can use any code editor you want there is some integration that we'll see in a second with Adam and with github but not terribly important at the moment but what is important is how do we actually get this online and it's really simple there's this nice little publish button that they give us so I'm going to click on publish it's going to ask me for a description but I don't have to give one I just need to have a name and it's going to keep the name that we already have description is completely up to you I have had times where nothing was selected here I just saw this little down arrow with no name and it wasn't letting me publish just if you see that little arrow with no name click on the arrow and select your name I don't hopefully you don't run into that problem and it's just because it has to be on a public account we can't make a private repository right now because you have to have a paid account if you want to have a private repository and I'll click publish to github beginners oh and then when I'm just going to hit publish once again because I just sort of set it all up and now I'll click there we go I wanted to see that little sinking thing going it takes a little while to sync for me it does anyway so we'll give that a second you can see the progress bar at the top and that's it it's synced so now what I'm going to do is I'm going to open up this I'm going to refresh and I should see that repository there it is github beginners and I'm going to click in there and I can see the project in here so I can see all the things these are this was with the basic template file so that's the comment that I put when I published that this was the comment that it was added automatically when it made these two files for me and you can see there's one branch there's only my master branch there's only one contributor so I'm the only contributor and there's been two commits the basic template files and the added get attributes get ignore files I go to two commits we can see the list of them and who they were by and we'll go back to the code so let's go back to here cool and what I'm going to do now is I'm actually going to make a branch I want to make some changes to my project so I'm going to create a branch right here so I just click on that new branch name add text add intro text it's basically just the basic description of what you're going to be doing whoops and it should it's going to do it with the hyphens for me so I'm going to create the new branch for that or we can just call it add text actually add text create new branch and you can see here it's you can see that it's visualizing that we're on a branch now so it's branched off like that now I'm going to click on my little atom thing here because I want to edit this in atom so there we go atom has opened up position that just so you can see the whole window and one of the cool things we can see all my project files here but we can actually see that I'm on the add text branch so that's really cool it knows where I am because I'm using atom which is integrated into the whole github experience so we're going to see some other things as well as we work so let's actually open this up in the browser as well and we'll shrink that down so we can see what I'm doing we don't need this anymore so there's nothing in there my index is currently blank so let's go over to my index and let's come in here and add my text h1 hello world close h1 and I'll save that and I'll refresh over here and we should see my hello world is not appearing I'm just going to cool see how this is an orange what's happening here with the oranges it's showing that this is a change that's happened I can even come down here and look it's an orange one line has been added to this file that is not yet committed but I'm just going to do a show and explore and I'm going to open it again mmm it's working github beginners okay anyway it's working nicely now hello world and just to make sure that it is working ah hello [Music] yeah so it's we're working fine so let's get rid of this just up yeah okay that's weird save that again refresh over here so we're at our hello world let's say we're happy with that that was good everything went well we can go back to our github application here and it's going to say that there's been one change and I can say h1 text added or let's just do title title text title added and I'm going to do commit to add text now maybe I add in a paragraph of text here as well so paragraph goodbye goodbye world closed paragraph save that go back to here another change goodbye world I can commit to add text no more changes and I can see the whole timeline progressing here so my master branch was there and I mean that I'm in my add texts branch and then maybe I go in actually here's another good point if I click on them I can see what's changed so here I've plus so it's added a line of code and there's the code that's been added I can come to this one I deleted a empty line that was there and I added a new line that was hello world with the paragraph and I might go you know what that's kind of depressing I don't actually want to add that I'm going to do revert and that's going to create a new commit that reverts the changes in this commit so I can hit revert it's going to keep track of the fact that this was added but it adds a new one where it then gets removed so it's not deleting the fact that this ever happened it's keeping track that that happened but it's deleting it and it's moving me on to a new line and then this is my current one where everything is good now let's say that I'm happy with this this is what I want my site to look like I'm really you know everything looks good well first actually let's publish this just so it is we can find it on our thing up here so I'm just waiting for this to load and just as a bit of a warning sometimes for me the syncing is sloped there we go it has gone through I'm going to hit refresh here and we can see that ad text was added and I can compare if I want to and I can see here there's two branches so I can go up there I can see that there's been changes made to both my branch it's active and if I click on add text I can go and take a look at what the add text so add text was updated one minute ago but and there's been five commits to it and just for fun we can go back to my master my master has only been updated nine minutes ago so the masters the the real one nothing has changed on that one yet but if I look at my add text my add text was just recently updated now if I'm happy with this these changes are exactly what I want everything here I'm happy with I can do a pull request so what this means is I want to pull this branch back into my master so I'm going to hit pull request add text I can you know this is the name of add text to master the description you can give a description with more detail in here if you want and I can send my pull request in and then I can click here to view it on github or I can just come over here and refresh everything so I'll go to my github beginners it says that I have a pull request so I'll go look at that it says add text to master I can go and click in there and I can see what was done so no description provided the title added goodbye world revert goodbye world all the things that we're done we can go and look at all of them it says there's no conflicts with this so there's nothing conflicting with this version of the file with my current one so we can merge the pull request now one thing that's really important is I can't merge the pull request here you have to go to github for it to get merged the other thing is generally speaking it would be someone else who's doing the merge it's not yourself unless it's your own project obviously but usually you're working in a team and then you're getting it approved by someone else they're going to look at the code maybe they don't like it they can come in here and leave a comment saying looks good but I'd like to see these changes made hit the comment you could make those changes and then put in a new poll request but in this case we're just going to do merge pull request I can confirm the merge and really important the pull request has been successfully merged and closed do you want to delete the branch yes in general you want to delete the branch it just keeps everything nice and tidy and all of that so deleting the branch is important and if you ever needed to you can restore the branch too if you want to get it back for whatever reason now if I go back to yeah that's all done so now I can go back to here and we can see that this has been updated it's saying four minutes ago because that's the last time that anything had been changed but everything is up-to-date now there's only one branch and everything is live and good to go so the last thing you might want to do with github is to fork a project off make some changes to it and try pushing those to see if they're get taken so I've opened up bootstrap here on github and they have their own repository on here where you can make changes to it and all of that but obviously I'm not part of their team and you can see just to give you an idea of a big project there's been almost 16,000 commits there's 20 current branches 41 releases and almost 900 or 850 anyway contributors let's just jump over to the branches really quickly and you can see they're working on version 4 now so you'll see the active branches there's issues there's a we can go and look through a lot of that but just for this video all I want to do is I want to make a fork of this project so we don't want to clone or download it even though that's the the big button that's on here right now what I want to actually do is come up here to fork it so I'm going to click on Fork and this might take a little while because it is a big project it says a few seconds but it might take a bit longer than that and there we go that didn't take very long and I am now in the the fork so this is on my account it's in Kevin Powell / bootstrap so things that I do in here they're not touching the original project at all I can come in make any changes I want in here so I'm going to go over to github and now I'm in the desktop application and I can come into here and I'm going to clone bootstrap to my computer because I want this to be on my computer it's going to ask me where do I want it so I'm going to put it on my desktop and just click OK choose the folder that you want the folder to be inside of because whatever folder you select it's going to make a new folder inside that so if you made like a bootstrap folder on your desktop it's going to make a bootstrap folder inside your bootstrap folder if that makes sense so I'm just choosing my desktop I'll find it once this is done it's going pretty fast I'll show you where it is on my desktop there you go so I'm just going to right click on here and you open an explorer just to show you desktop bootstrap and even where is it on my desktop there it is so we can see that it's made its own bootstrap folder on my desktop with everything in there so now I could open that up in atom and let's just go and look so quickly I'm just going to open up there get ignore just to show you what a proper get it more might have so it's ignoring Ruby files it's ignoring the gh-pages file log file zip files all sorts of stuff project files idea files it's all for oh s and folders sublime workspace lint files all sorts of stuff these are all things that it wants to ignore some Jeckle so things that shouldn't be brought up in here let's go look at distribution and CSS and let's just go look at the grid for fun and let's just make a change in here have a body I'm just going to save that I'm not going to make any big changes in here it's just to show you what type of thing we do so it's showing me the changes there I have my change here example I'm just doing this as a quick thing I'm going to commit that and here we go we have just made my little change right at the end now I'm going to sync that and it's going to sync it over to my account and remember none of these changes are actually going over to the bootstrap dev I would never push something silly like that over to their code and don't push random stuff like this you know if you're going to be making a contribution to something make sure it's a worthwhile contribution so that is done we'll open this back up let's go and take a look at here so I did the latest commit one minute ago and you can see here now this branch is one commit ahead of the tee WBS version for dev so I'm one commit ahead of where there's is and I can compare mine to theirs and I can put in a pull request so I'm going to click on that but I'm not actually going to go through with this because I don't want to do it but it's able to merge there's no issue with it so there's the base one there's my fork I can compare them together and I can take a look so the big difference here is I've added this in pretty much there's the big difference that happened I've added a whole bunch of lines of code and if I wanted to I could discuss and review the changes in this comparison with others so I'd create my pull request it would go over to them they could leave comments tell me what they think of those changes and if they liked them they could even pull them in or they could tell me you know what not bad make these changes to it or just what are you doing you know if I actually submitted this it would just get ignored and they would delete it and yeah nothing would really happen this is just to show you how the fork would work you come in you make your fork and then you put in a pull request and that's going to go back to the original person so if you do want to do this to one of my own repositories you you saw something in one of the sites that I did that you want to make a change to by all means go for it or in my future videos when I'm making them as I go along if you're following along with my series by all means you can follow along in my github which will be a few days ahead of the video so you get a bit of a sneak peek that way and throughout the whole process if there's anything you want to do by all means you can fork it off and make pull requests at any time now I'm just as a very quick thing here I'm going to go back to my own repository come over to Kevin Powell repositories and I don't actually want to put this in right like that would be silly to to keep this I'm not planning on working on the bootstrap so if ever you do want to delete something you do have on here you want to go to it so I'm going to come into here and it's over in the setting so I'm going to click on settings I'm going to scroll all the way down to the danger zone and there's the make private which it's not going to let me do plus it's a public Fork I can transfer ownership so if I wanted if this is a big project that I didn't want to be involved with anymore I could transfer ownership over to somebody else or I can delete the repository from my account which I'm going to do right now I just have to write the name of it is it just github bootstrap github bootstrap and now I can delete this it's just saying be really careful its permanent there's no there's no backsies on this one it's gone once it's gone so delete that because I don't want it in my account anymore thank you so much for watching I hope you enjoyed this video if you did please let me know in the comments below and if I didn't cover anything or you're still confused by something don't be shy go to the comments down below and let me know about it another thing is I am now starting to post a bit more frequently on Twitter and on instagrams you can find the links to those down below in the description all the way at the bottom if you want a bit of a behind-the-scenes to see videos before they're coming out I show little sneak peeks of the stuff that I am working on also please consider subscribing it is a new video like is every single week so if you liked it think about hitting that subscribe button so you get more content just like this delivered to your subscriptions feed every Wednesday thanks once again for watching and have yourselves a great day

Channel: Kevin Powell

Views: 87,575

Keywords: HTML, CSS, what is git, how to use git, git for beginners, git and github for beginners, git introduction, git tutorial for beginners, git, github, git basics, what is a branch, what is a repository, what is a git push, what is a git pull, git branch, git pull, git push, git repository, Kevin Powell web, GitHub Desktop, github desktop app, github desktop application, how to use github desktop, how to use the github desktop

Id: GqNAD4XoZ6k

Length: 24min 25sec (1465 seconds)

Published: Wed May 03 2017