1
00:00:01,450 --> 00:00:08,180
In this video we're going to talk about git and github and source control.

2
00:00:08,220 --> 00:00:14,580
Now you might remember github from our previous section where we used to put the Web site online but

3
00:00:14,580 --> 00:00:18,040
I'll show you that it is so much more than that.

4
00:00:18,060 --> 00:00:24,750
More importantly, getting github is used by most professional companies and it is a skill that is expected

5
00:00:24,750 --> 00:00:27,180
to be known by all developers now.

6
00:00:27,300 --> 00:00:29,880
So this is an important section.

7
00:00:30,030 --> 00:00:36,000
One of the first things most developers have to do on their first day at the job is to meet something

8
00:00:36,000 --> 00:00:40,100
called a pull request which uses git and github.

9
00:00:40,320 --> 00:00:42,600
We'll get through that in this section.

10
00:00:42,600 --> 00:00:47,320
Don't worry you're going to learn all of this and it's going to make sense.

11
00:00:47,670 --> 00:00:49,510
Let's first start with source control.

12
00:00:49,680 --> 00:00:53,230
Up until now we have only worked on small files.

13
00:00:53,340 --> 00:00:55,930
No team members just ourselves.

14
00:00:56,340 --> 00:00:58,380
Just a couple of files.

15
00:00:58,740 --> 00:01:02,630
But in real life you're most likely not the only developer on a team.

16
00:01:03,450 --> 00:01:04,950
Most likely the projects are huge.

17
00:01:04,950 --> 00:01:07,010
There's many many files.

18
00:01:07,110 --> 00:01:12,720
Source control allows us to make sure that multiple people can work on the same file from different

19
00:01:12,720 --> 00:01:13,570
locations.

20
00:01:14,400 --> 00:01:21,750
Think of it as Google Docs that allows people to collaborate on one document but enough talk.

21
00:01:21,750 --> 00:01:23,500
Let's actually check it out.

22
00:01:23,520 --> 00:01:33,440
I have over here set up two folders One's for myself, Andrei who just started a new job at X company and

23
00:01:33,470 --> 00:01:40,830
I have Marcy here who has been working at the company for a while and she has project files over here.

24
00:01:40,830 --> 00:01:46,610
I'm actually using the files from our background generator video now without git or github.

25
00:01:46,610 --> 00:01:53,900
What I can do is just copy and paste these files so I have whatever Marcy has and we can start working

26
00:01:53,900 --> 00:01:54,890
on these files.

27
00:01:54,950 --> 00:02:02,510
I can have my developer environment here with my terminal and my sublime text and I can work on whatever

28
00:02:02,510 --> 00:02:09,610
changes that need to be made on the app and Marcy over here also has her own version where she can work

29
00:02:09,610 --> 00:02:13,480
on it and we're both working on the same project.

30
00:02:13,480 --> 00:02:20,200
But let's say that both Marcy and I are working on this project and she decides to change the project

31
00:02:20,200 --> 00:02:28,510
name from Gradient background to Super background and at the same time in my project I decide to call

32
00:02:28,510 --> 00:02:31,130
this Cool background.

33
00:02:31,490 --> 00:02:39,820
Well, now you'll have to set up a meeting between myself and Marcy and decide how we should change the

34
00:02:39,820 --> 00:02:41,230
code.

35
00:02:41,230 --> 00:02:46,520
And this is a small example but you can imagine that as different programmers worked together there's

36
00:02:46,540 --> 00:02:51,670
always going to be this issue of one person changing one thing and another person changing another thing.

37
00:02:51,670 --> 00:02:58,360
This is where Source Control came in and Source Control is a way to control this where we have

38
00:02:58,930 --> 00:03:02,260
one place instead of our own computers.

39
00:03:02,380 --> 00:03:08,740
In this case it's just represented by the folder that I have in here. Instead of each of us having a

40
00:03:09,070 --> 00:03:12,640
copy of the project, with source control

41
00:03:12,640 --> 00:03:14,660
we have a copy of the project file.

42
00:03:14,740 --> 00:03:20,950
There is a centralized location up somewhere maybe owned by the company or somewhere on the internet

43
00:03:21,190 --> 00:03:28,300
that has the ultimate version that we each talked to make sure that we each have the same version

44
00:03:29,120 --> 00:03:35,110
Getting github is a way to do this to be able to use source control.

45
00:03:35,170 --> 00:03:39,030
And as a matter of fact it's the de facto way of doing this.

46
00:03:39,070 --> 00:03:46,080
Like I said before this is most likely the tool you'll be using every single day at your workplace.

47
00:03:46,250 --> 00:03:54,200
So if I go to the github website here what it allows us to do is it's a place, a central place that

48
00:03:54,230 --> 00:03:58,240
both Andrei and Marcy can talk to.

49
00:03:58,280 --> 00:04:07,110
So even though we work on the same files the same project I can ask this central location such as

50
00:04:07,110 --> 00:04:07,680
github.

51
00:04:07,800 --> 00:04:11,020
Hey, has Marcy made any changes?

52
00:04:11,460 --> 00:04:14,410
And Marcy can ask, hey has Andrei made any changes?

53
00:04:16,410 --> 00:04:22,050
And every once in a while you'll get something like this where we have Cool background and Super background

54
00:04:22,320 --> 00:04:25,880
where we have something called a merge conflict.

55
00:04:26,460 --> 00:04:33,320
What github allows us to do is say hey, I notice there is a merge conflict.

56
00:04:33,360 --> 00:04:35,940
I see that you guys have both changed your background.

57
00:04:35,940 --> 00:04:41,090
I don't know who's right but here's the information. Andrei and Marcy,

58
00:04:41,340 --> 00:04:43,920
Can you guys talk amongst yourself and figure it out.

59
00:04:45,220 --> 00:04:46,180
That's pretty much work for.

60
00:04:46,180 --> 00:04:48,950
So let's actually see what this looks like.

61
00:04:50,080 --> 00:04:53,390
The first thing we want to do is set up a github account.

62
00:04:53,680 --> 00:04:59,400
If you haven't done it in the previous exercises, you absolutely should start a github account.

63
00:04:59,410 --> 00:05:00,600
It's FREE.

64
00:05:00,670 --> 00:05:06,870
And like I said before if you're a developer you just need to have it where everybody puts their projects.

65
00:05:06,880 --> 00:05:12,640
It's where you work you'll be spending a lot of time on this website.

66
00:05:12,710 --> 00:05:15,690
You might remember that when we had the github project,

67
00:05:15,860 --> 00:05:18,590
I also told you to get github for Desktop.

68
00:05:21,390 --> 00:05:24,620
Although we use that to make things simpler during that video.

69
00:05:24,630 --> 00:05:27,560
This is actually not the recommended way of doing it.

70
00:05:27,570 --> 00:05:34,680
It allows you to visually see and interact with github but it's kind of looked down upon by employers

71
00:05:34,680 --> 00:05:39,420
and most people use the terminal or the command prompt to actually do it.

72
00:05:39,420 --> 00:05:44,790
So I won't be teaching you this way just because I think it's bad practice and getting used to the terminal

73
00:05:44,880 --> 00:05:46,450
is important.

74
00:05:46,470 --> 00:05:51,360
I'm going to close that and we're going to get the start. The very first thing we're going to do is we're

75
00:05:51,360 --> 00:05:57,850
going to click on start a project. And here we're going to call it whatever we want, we'll call it

76
00:05:58,070 --> 00:06:01,260
background-generator.

77
00:06:01,600 --> 00:06:08,020
And you also want to leave it up as public and we want to click on initialize this with a readme and

78
00:06:08,020 --> 00:06:09,910
we'll click Create repository.

79
00:06:10,030 --> 00:06:10,920
And what that does.

80
00:06:10,930 --> 00:06:13,730
Well we've created a new project on github.

81
00:06:14,230 --> 00:06:18,950
And here the readme which is just a file that describes your project.

82
00:06:18,970 --> 00:06:24,910
You can see that it's here, we can type into the readme whatever we want and it'll describe our project.

83
00:06:25,270 --> 00:06:32,350
But let's go back. If Marcy let's say Marcy has been working at this company for a long time.

84
00:06:32,380 --> 00:06:34,410
I'm actually going to remove my files here.

85
00:06:36,860 --> 00:06:42,770
Marcy has been working at this company for a long time, and the employer finally decided hey we need

86
00:06:42,770 --> 00:06:46,290
to use github we're going to hire this new guy Andrei.

87
00:06:46,490 --> 00:06:51,270
We want to make sure that you both can work on it on the project together without any issues.

88
00:06:51,290 --> 00:06:53,560
Can you put the project up on github.

89
00:06:54,020 --> 00:07:01,610
So what Marcy will do is she will go to github, create background generator and then she's going to

90
00:07:01,610 --> 00:07:04,510
click right over here to clone or download.

91
00:07:04,580 --> 00:07:08,370
And she's going to make sure it says use HTTPS.

92
00:07:08,660 --> 00:07:13,510
And from here you just click on this button which copies this link to your keyboard.

93
00:07:15,000 --> 00:07:24,570
Then Marcy goes to her terminal and right now we're in Documents, we want to have the project in the

94
00:07:24,570 --> 00:07:25,400
Marcy folder.

95
00:07:25,440 --> 00:07:28,320
So I'll cd into Marcy. If I click ls

96
00:07:28,320 --> 00:07:29,330
I see that,

97
00:07:29,340 --> 00:07:31,630
Yep, I have my files.

98
00:07:31,710 --> 00:07:42,840
Now, the first command that we're going to learn is called git clone and then copy and paste what we copied

99
00:07:42,840 --> 00:07:43,800
from the Web site.

100
00:07:43,890 --> 00:07:49,430
We're just saying hey clone this project from github.com

101
00:07:49,860 --> 00:07:52,930
So I press enter and there you go.

102
00:07:53,040 --> 00:07:55,320
Everything is downloaded.

103
00:07:55,380 --> 00:08:01,740
If I go back to the folder now I see that I have background-generator. If I double click this you'll

104
00:08:01,740 --> 00:08:05,000
see that I have a .git folder here that's actually hidden.

105
00:08:05,010 --> 00:08:09,870
You might not even see it on your laptop if you don't have this feature on your computer enabled.

106
00:08:09,960 --> 00:08:15,060
But this .git now allows me to communicate with github.

107
00:08:15,120 --> 00:08:16,290
So what we can do now.

108
00:08:16,350 --> 00:08:23,970
Marcy can copy and paste these files and put it into background-generator.

109
00:08:23,970 --> 00:08:26,860
Now let me show you the next git command.

110
00:08:27,210 --> 00:08:27,840
Marcy right now,

111
00:08:27,840 --> 00:08:34,200
If we see, she's in her folder but now we need to go into background-generator because if we do any

112
00:08:34,740 --> 00:08:36,090
git commands here,

113
00:08:36,419 --> 00:08:39,840
well, it won't work because it's not a git project.

114
00:08:39,840 --> 00:08:43,510
We need to actually go inside of the project that was created on github.

115
00:08:43,799 --> 00:08:45,980
So I'm going to cd into that directory.

116
00:08:46,170 --> 00:08:52,650
Notice here I have my terminal set so that it actually shows me what github location I'm in

117
00:08:52,650 --> 00:08:54,600
and I'll explain what master means later.

118
00:08:54,600 --> 00:08:58,520
Now that we're here we can look at all our files.

119
00:08:58,620 --> 00:08:59,850
Yep I see that.

120
00:08:59,850 --> 00:09:02,810
Now I have my README which I created on github.

121
00:09:03,090 --> 00:09:12,250
Plus the files that I copied and pasted it. We need to sync this so that if I go into my background-generator,

122
00:09:12,250 --> 00:09:20,890
instead of the README files Marcy can put up her files on github the way we do that is our second command

123
00:09:21,610 --> 00:09:32,320
git status. It tells us that we have untracked files. That is we have index.html, script.js,

124
00:09:32,360 --> 00:09:40,140
and style that are untracked. And it says use git add file to include what will be committed.

125
00:09:40,490 --> 00:09:48,680
So now that we see our status of what we have in our folder we can  say git add and the file name so

126
00:09:48,680 --> 00:10:01,970
I can do index.html, git add script.js and git add style.css

127
00:10:02,030 --> 00:10:06,460
Let's clear this so we can see it.

128
00:10:06,570 --> 00:10:11,100
And now I can do git status again just to see what our status is.

129
00:10:11,480 --> 00:10:16,680
And now I have your branch is up to date, changes to be committed.

130
00:10:16,700 --> 00:10:21,380
You see that now with add we've said hey we want to add these changes.

131
00:10:21,470 --> 00:10:27,080
We have new files that we've added and says to be committed.

132
00:10:27,110 --> 00:10:35,710
So the second step is to do something called git commit and git commit says hey I'm committing that

133
00:10:35,720 --> 00:10:39,670
these are the changes that I want to make to github.

134
00:10:39,890 --> 00:10:45,920
And it allows you to pass a message so that on github will show the message when Andrei comes back

135
00:10:45,920 --> 00:10:49,760
in he can say oh Marcy added these files and this is the message.

136
00:10:49,790 --> 00:10:52,600
And we do that by doing this.

137
00:10:52,880 --> 00:11:02,750
And within here within the double quotes I can say, adding starting project close the bracket,

138
00:11:02,750 --> 00:11:03,760
press enter.

139
00:11:04,490 --> 00:11:05,830
I'm going to clear this.

140
00:11:05,960 --> 00:11:09,280
Now there is one last step. We've added.

141
00:11:09,470 --> 00:11:16,470
We did git add to add our changes then git commit to commit and say yeah we're locking in those changes.

142
00:11:16,550 --> 00:11:22,600
And then finally we need to let github.com know that these are the changes.

143
00:11:22,610 --> 00:11:25,190
So we do git push

144
00:11:28,440 --> 00:11:38,900
and there you go, it has now been pushed to this repository. So if I go back and I refresh, look at that

145
00:11:39,260 --> 00:11:42,850
it's the same thing that we did when we put up our first web site online.

146
00:11:43,130 --> 00:11:49,310
But instead of using the desktop version of github, we use the command line and now we have our project

147
00:11:49,610 --> 00:11:51,860
which is very good.

148
00:11:51,860 --> 00:11:53,650
Now let's go back to our example.

149
00:11:53,720 --> 00:11:55,890
So Marcy has been working on this project.

150
00:11:55,910 --> 00:12:02,950
There's a git repository and I just joined the company and now I need to start working on this.

151
00:12:03,190 --> 00:12:09,020
What do I do? Now I need to access github and get the copy of background generator.

152
00:12:09,140 --> 00:12:11,870
The way I do that well I go into my folder

153
00:12:15,570 --> 00:12:16,880
and I do the same thing.

154
00:12:16,890 --> 00:12:30,110
I do git clone and then I copy and paste the repository just like before. git clone and clone the repo.

155
00:12:30,540 --> 00:12:31,280
And there you go.

156
00:12:31,560 --> 00:12:36,860
If I go back to my folder, look at that, I have background-generator.

157
00:12:37,020 --> 00:12:43,800
So we're both working now on background-generator but not off of each other's files we're working with

158
00:12:44,010 --> 00:12:46,810
whatever version is on github.

159
00:12:46,920 --> 00:12:47,210
All right.

160
00:12:47,280 --> 00:12:50,040
So now more realistic.

161
00:12:50,040 --> 00:12:56,460
We go back to working and on the first day of my job, I say, I'm going to change the Gradient background

162
00:12:56,700 --> 00:12:57,240
title, actually, the h1 tag

163
00:12:57,240 --> 00:13:02,900
to Cool generator.

164
00:13:03,390 --> 00:13:10,070
If I save this and I do git status.

165
00:13:10,380 --> 00:13:18,260
Well, I'm not in a git repository right now if you remember I have to go into background generator.

166
00:13:18,450 --> 00:13:21,210
Let me open that up a bit so you can see.

167
00:13:21,220 --> 00:13:22,910
There you go

168
00:13:22,960 --> 00:13:28,240
Again, these git commands won't work if you're not in a folder that has .git folder.

169
00:13:28,450 --> 00:13:32,310
So let me do that, cd into background-generator.

170
00:13:32,430 --> 00:13:37,270
I'm going to clear this and I'm going say git status.

171
00:13:37,480 --> 00:13:38,010
And look at that.

172
00:13:38,040 --> 00:13:40,990
It tells me that I've modified index.html file.

173
00:13:41,520 --> 00:13:47,360
And if we remember, I will say, git add, I only have one file I can do

174
00:13:47,350 --> 00:13:48,550
index.html

175
00:13:48,690 --> 00:13:53,670
But if I wanted, if I had multiple files and I wanted to just commit all them at once, I can just do

176
00:13:53,820 --> 00:14:00,060
the period. So I'll do that and then git commit and I'll add a message.

177
00:14:00,060 --> 00:14:05,910
Changing title. I press enter.

178
00:14:06,560 --> 00:14:08,320
I clear this OK.

179
00:14:08,350 --> 00:14:15,850
And again, I do git push and it looks like everything went through.

180
00:14:15,850 --> 00:14:18,430
So let's open that up and check it out.

181
00:14:18,460 --> 00:14:19,690
I now refresh here,

182
00:14:22,950 --> 00:14:31,350
and we haven't seen any changes but we now see that we have three commits. We have the initial commit,

183
00:14:31,350 --> 00:14:39,770
the adding background project that Marcy did and it shows you all the files that we're added.

184
00:14:39,990 --> 00:14:49,560
And if I go back I have the changing title commit and now I see that yep, Andrei just changed the Background

185
00:14:49,560 --> 00:14:54,670
generator which is in red to Cool generator.

186
00:14:54,750 --> 00:15:00,180
So as you can see we have a history of all the changes and we can always go back if there's any mistakes

187
00:15:00,810 --> 00:15:03,600
but there's one issue right now.

188
00:15:03,780 --> 00:15:10,390
If I go back to the code and I go to Marcy's computer, I see that

189
00:15:10,420 --> 00:15:15,170
well, she still has Background generator here.

190
00:15:15,190 --> 00:15:15,960
Why is that?

191
00:15:16,090 --> 00:15:21,260
Well, because her computer doesn't know that github has been updated.

192
00:15:21,430 --> 00:15:28,150
The next command I'm going to show you this is the last one I'm going to show you in this video is

193
00:15:28,320 --> 00:15:29,000
git pull.

194
00:15:29,380 --> 00:15:38,520
So, remember git push? To push the changes to github.com and git pull to pull whatever's the latest.

195
00:15:38,530 --> 00:15:42,680
So I do git pull and there you go.

196
00:15:42,730 --> 00:15:48,470
You see over here that it shows me that index.html file was changed.

197
00:15:48,490 --> 00:15:54,290
Now you see that my title has been changed to Cool generator.

198
00:15:54,540 --> 00:16:00,190
Let's just say that Marcy saw my first change and she really really likes how I've added cool generator.

199
00:16:00,300 --> 00:16:03,930
But I think she wants to make it capitalized,

200
00:16:03,940 --> 00:16:05,780
Again, she's going to save that.

201
00:16:06,100 --> 00:16:09,090
She's going to say git status.

202
00:16:09,150 --> 00:16:09,450
All right.

203
00:16:09,450 --> 00:16:22,980
I have my index.html file, git add then git commit and I'll add the message, capitalize title

204
00:16:25,190 --> 00:16:29,560
then git push.

205
00:16:29,570 --> 00:16:35,120
There you go. Again, I go back, I refresh.

206
00:16:35,590 --> 00:16:43,020
And now there's four commits and we see that capitalize title is the new changes.

207
00:16:43,140 --> 00:16:44,830
The first day at work is done.

208
00:16:44,910 --> 00:16:53,370
I come into the next day at work and well, I want to start with whatever the latest project is of

209
00:16:53,370 --> 00:16:59,700
background generator. And let's say Marcy worked all night to change that title to cool, capitalize.

210
00:16:59,700 --> 00:17:02,200
I want to make sure that I have the most updated version.

211
00:17:02,220 --> 00:17:07,700
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

212
00:17:07,740 --> 00:17:12,170
any changes that Marcy made I know about them, so I'm going to say git pull.

213
00:17:12,270 --> 00:17:20,010
And notice here how the titles are going to change after I do the pull and now I click the sublime text

214
00:17:20,040 --> 00:17:22,210
and there you go.

215
00:17:22,260 --> 00:17:25,040
Cool generator.

216
00:17:25,069 --> 00:17:25,480
All right.

217
00:17:25,490 --> 00:17:33,080
In the next video we're going to expand on this and show you what happens if both Marcy and Andrei make

218
00:17:33,140 --> 00:17:35,480
the same changes.

219
00:17:35,900 --> 00:17:37,640
What does github do?

220
00:17:37,700 --> 00:17:38,980
I'll see you in that one.

221
00:17:39,050 --> 00:17:39,320
Bye-bye