‫In this video we're going to talk about get and GitHub and source control.
‫Now, you might remember GitHub from our previous section where we used it to put the website online,
‫but I'll show you that it is so much more than that.
‫More importantly, get in.
‫GitHub is used by most professional companies and it is a skill that is expected to be known by all
‫developers now.
‫So this is an important section.
‫One of the first things most developers have to do on their first day of the job is to get something
‫called a pull request, which uses Git and GitHub.
‫We'll get through that in this section.
‫Don't worry, you're going to learn all of this and it's going to make sense.
‫Let's first start with source control.
‫Up until now, we have only worked on small files.
‫No team members, just ourselves.
‫Just a couple of files.
‫But in real life, you're most likely not the only developer on a team.
‫Most likely the projects are huge.
‫There's many, many files.
‫Source control allows us to make sure that multiple people can work on the same file from different
‫locations.
‫Think of it as Google Docs that allows people to collaborate on one document.
‫But enough talk.
‫Let's actually check it out.
‫I have over here set up two folders.
‫One is for myself Andre who just started a new job but X company and I have Marci here who has been
‫working at the company for a while and she has project files over here.
‫I'm actually using the files from our background generator video.
‫Now, without Git or GitHub, what I can do is just copy and paste these files.
‫So I have whatever Marci has and we can start working on these files.
‫I can have my developer environment here with my terminal and my sublime text, and I can work on whatever
‫changes that need to be made on the app.
‫And Marci.
‫Over here also has her own version where she can work on it.
‫And we're both working on the same project.
‫But let's say that both Marcy and I are working on this project and she decides to change the project
‫name from gradient background to super background.
‫And at the same time in my project, I decide to call this cool background.
‫Well, now you'll have to set up a meeting between myself and Marcy and decide how we should change
‫the code.
‫And this is a small example, but you can imagine that as different programmers work together, there's
‫always going to be this issue of one person changing one thing and another person changing another thing.
‫This is where source control came in, and social control is a way to control this, where we have one
‫place instead of our own computers.
‫In this case, it's just represented by the folder that I have in here, instead of each of us having
‫a copy of the project with Source Control.
‫We have a copy of the project, but there is a centralized location up somewhere, maybe owned by the
‫company or somewhere on the internet that has the ultimate version that we each talk to to make sure
‫that we each have the same version.
‫Getting GitHub is a way to do this, to be able to use source control.
‫And as a matter of fact, it's the de facto way of doing this.
‫So like I said before, this is most likely the tool you'll be using every single day at your workplace.
‫So if I go to the GitHub website here, what it allows us to do is it's a place, a central place that
‫both Andre and Marci can talk to.
‫So even though we work on the same files, the same project.
‫I can ask this central location such as GitHub.
‫Hey, has Marcy made any changes?
‫And Marcy can ask.
‫Hey, has Andre made any changes?
‫And every once in a while you'll get something like this where we have cool background and super background,
‫where we have something called a merge conflict.
‫What GitHub allows us to do is say, Hey, I notice there is a merge conflict.
‫I see that you guys have both changed your background.
‫I don't know who's right, but here's the information.
‫Andrei Marcy, can you guys talk amongst yourself and figure it out?
‫That's pretty much the workflow.
‫So let's actually see what this looks like.
‫The first thing we want to do is set up a GitHub account.
‫If you haven't done it in the previous exercises, you absolutely should start a GitHub account.
‫It's free.
‫And like I said before, if you're a developer, you just need to have it.
‫It's where everybody puts their projects, it's where you work.
‫You'll be spending a lot of time on this website.
‫You might remember that when we had the GitHub project, I also told you to get GitHub for desktop.
‫Although we use that to make things simpler during the video, this is actually not the recommended
‫way of doing it.
‫It allows you to visually see and interact with GitHub, but it's kind of looked down upon by employers
‫and most people use the terminal or the command prompt to actually do this.
‫So I won't be teaching you this way just because I think it's bad practice and getting used to the terminal
‫is important.
‫I'm going to close that and we're going to get this started.
‫The very first thing we're going to do is we're going to click on Start a Project.
‫And here we're going to call it whatever we want.
‫We'll call it background generator.
‫And you also want to leave it as public, and we want to click on initialize this with a read me and
‫we'll click Create Repository.
‫And what that does well, we've created a new project on GitHub.
‫And here the read me, which is just a file that describes your project.
‫You can see that it's here.
‫We can type into the read me whatever we want and it'll describe our project.
‫But let's go back.
‫If Marcy let's say Marcy has been working at this company for a long time, I'm actually going to remove
‫my files here.
‫Marcy has been working at this company for a long time and the employer finally decided, Hey, we need
‫to use GitHub, we're going to hire this new guy.
‫Andre.
‫We want to make sure that you both can work on it, on the project together without any issues.
‫Can you put the project up on GitHub?
‫So what Marcy will do is she will go to GitHub, create background generator, and then she's going
‫to click right over here to clone or download and she's going to make sure it says Use HTTPS.
‫And from here you just click on this button which copies this link to your keyboard, then Marcy.
‫Goes to her terminal.
‫And right now, we're in documents.
‫We want to have the project in the Marcy folder, so I'll seed into Marcy if I click LRS, I see that
‫I have my files now.
‫The first command that we're going to learn is called Get.
‫Clone.
‫And then copy and paste what we copy from the website.
‫We're just saying hey clone this project from GitHub dot com.
‫So I press enter and there you go.
‫Everything is downloaded.
‫If I go back to the folder now, I see that I have background generator.
‫If I double click this, you'll see that I have a dot git folder here that's actually hidden.
‫You might not even see it on your laptop if you don't have this feature on your computer enabled.
‫But this dog get now allows me to communicate with GitHub.
‫So what we can do now, Marcy can copy and paste these files and put it into background generator.
‫Now let me show you the next get command, Marcy.
‫Right now, if we see she's in her folder, but now we need to go into background generator because
‫if we do any git commands here, well, it won't work because it's not a git project.
‫We need to actually go inside of the project that was created on GitHub.
‫So I'm going to seed into that directory.
‫Notice here I have my terminal set so that it actually shows me what GitHub location I'm in and I'll
‫explain what master means later.
‫Now that we're here, we can look at all our files.
‫Yep, I see that.
‫Now I have my read me, which I created on GitHub plus the files that I copy and paste it.
‫We need to think this so that if I go into my background generator instead of the read me files, Marci
‫can put up her files on GitHub.
‫The way we do that is our second command get status.
‫It tells us that we have on tract files.
‫That is, we have indexed HTML, script, JS and style that are on tract and it says use get add file
‫to include what you what will be committed.
‫So now that we see our status of what we have in our folder, we can say get, add and the file name
‫so I can do index dot HTML, get add script JS and get add style dot CSS.
‫Let's clear this so we can see it.
‫And now I can do get status again just to see what our status is.
‫And now I have your branch is up to date changes to be committed.
‫You see that now with ADD we've said, hey, we want to add these changes.
‫We have new files that we've added and says to be committed.
‫So the second step is to do something called get commit and get commit says, Hey, I'm committing that.
‫These are the changes that I want to make to GitHub and it allows you to pass a message so that on GitHub
‫it'll show the message.
‫When Andre comes back in, he can say, Oh, Marcy added these files and this is the message.
‫And we do that by doing this.
‫And within here, within the double codes, I can say adding starting project close the bracket, press
‫enter.
‫I'm going to clear this now there's one last step we've added.
‫We get add to add our changes, then get commit to commit and say, Yeah, we're locking in those changes.
‫And then finally we need to let GitHub dotcom know that these are the changes.
‫So we do get push.
‫And there you go.
‫It has now been pushed to this repository.
‫So if I go back.
‫And I refresh.
‫Look at that.
‫It's the same thing that we did when we put up our first website online.
‫But instead of using the desktop version of GitHub, we use the command line and now we have our project,
‫which is very good.
‫Now let's go back to our example.
‫So Marsha has been working on this project.
‫There's a good repository and I just joined the company and now I need to start working on this.
‫What do I do now?
‫I need to access GitHub and get the copy of Background Generator.
‫The way I do that.
‫Well, I go into my folder.
‫And I do the same thing.
‫I do get clone and then I copy and paste the repository just like before.
‫Get clone and clone the repo.
‫And there you go.
‫If I go back to my folder, look at that.
‫I have background generator.
‫So we're both working now on background generator, but not off of each other's files.
‫We're working with whatever version is on GitHub.
‫All right.
‫So now more realistic, we go back to working.
‫And the first day of my job, I say I'm going to change the gradient background title, actually the
‫H1 tag to cool generator.
‫If I save this and I do get status.
‫Oh, well, I'm not in a repository right now.
‫If you remember, I have to go into background generator.
‫Let me open that up a bit so we can see.
‫There you go again.
‫These commands won't work if you're not in a folder that has a docket folder.
‫So let me do that CD into background generator.
‫I'm going to clear this and I'm going to say get status and look at that.
‫It tells me that I've modified indexed HTML file and if we remember I will say get add.
‫I only have one file I can do indexed HTML.
‫But if I wanted, if I had multiple files and I want to just commit all of them at once, I can just
‫do the period.
‫So I'll do that and then get commit and I'll add a message changing title.
‫I press enter.
‫I'm going to clear this.
‫And again, I do get push.
‫And it looks like everything went through.
‫So let's open that up and check it out.
‫I Now refresh your.
‫And well, we haven't seen any changes, but we now see that we have three commits.
‫We have the initial commit, the adding background project that Marci did, and it shows you all the
‫files that were added.
‫And if I go back, I have the changing title commit and now I see that.
‫Yeah.
‫Andre just change the background generator, which is in red to cool generator.
‫So as you can see, we have a history of all the changes and we can always go back if there's any mistakes.
‫But there's one issue right now.
‫If I go back to the code and I go to Marcy's computer, I see that.
‫Well, she still has background generator here.
‫Why is that?
‫Well, because her computer doesn't know that GitHub has been updated.
‫The next command I'm going to show you this is the last one I'm going to show you in this video is get
‫pull.
‫So remember, get push to push the changes to get ABC.com and get pull to pull whatever is the latest.
‫So I do get pull.
‫And there you go.
‫You see over here that it shows me that indexed HTML file was was changed.
‫Now you see that my.
‫Title has been changed to Cool Generator.
‫Let's just say that Marci saw my first change and she really, really likes how I've added cool generator,
‫but I think she wants to make it capitalized again.
‫She's going to save that.
‫She's going to say get status.
‫All right, I have my indexed HTML file, get add, then get commit and I'll add the message copy to
‫lies title.
‫And then get push.
‫There you go again.
‫I go back.
‫I refresh and now there's four commits and we see that capitalized title.
‫Is.
‫The new changes.
‫The first day of work is done.
‫I come into the next day of work and well, I want to start with whatever the latest project is of background
‫generator.
‫And let's say Marcy worked all night to change that title to Cool Capitalized.
‫I want to make sure that I have the most updated version.
‫So what I do is when I get into work in the morning, I'll say, Well, I want to make sure that if
‫there's any changes that Marcy made, I know about them.
‫So I'm going to say get pull and notice here how the title's going to change after I do the pull.
‫And now I click to Sublime text and there you go.
‫Cool generator.
‫All right.
‫And the next video, we're going to expand on this and show you what happens if both Marcy and Andre
‫make the same changes.
‫What does GitHub do?
‫I'll see you in that one.
‫Bye bye.