1
00:00:00,000 --> 00:00:09,049
[MUSIC]

2
00:00:09,049 --> 00:00:12,331
Hi, I'm Dan,
a content producer for Treehouse.

3
00:00:12,331 --> 00:00:15,788
In this video, we're gonna be
talking about GitHub Copilot,

4
00:00:15,788 --> 00:00:20,240
a new AI tool that can help you write
code faster and more efficiently.

5
00:00:20,240 --> 00:00:25,131
GitHub Copilot is powered by OpenAI Codex,
a large language model that has been

6
00:00:25,131 --> 00:00:29,310
trained on a massive data set
of public code repositories.

7
00:00:29,310 --> 00:00:33,318
This means that Copilot can understand
the context of your code and

8
00:00:33,318 --> 00:00:38,450
suggest relevant snippets, functions,
and even entire lines of code.

9
00:00:38,450 --> 00:00:41,320
In the video,
we'll cover the following topics.

10
00:00:41,320 --> 00:00:43,260
What is GitHub Copilot?

11
00:00:43,260 --> 00:00:44,616
How does Copilot work?

12
00:00:44,616 --> 00:00:47,138
The benefits of using Copilot.

13
00:00:47,138 --> 00:00:49,132
The limitations of Copilot.

14
00:00:49,132 --> 00:00:51,570
How to get started with Copilot.

15
00:00:52,670 --> 00:00:55,460
We'll also show you some
practical examples of how Copilot

16
00:00:55,460 --> 00:00:57,540
can be used to speed up
your coding process.

17
00:00:58,560 --> 00:01:01,732
So if you're interested in learning
more about GitHub Copilot,

18
00:01:01,732 --> 00:01:03,633
I encourage you to watch the video, and

19
00:01:03,633 --> 00:01:07,640
if you have any questions,
please feel free to leave a comment below.

20
00:01:07,640 --> 00:01:11,130
Now, if you're ready to get started,
let's get down to business.

21
00:01:11,130 --> 00:01:14,890
Let's start by understanding
what GitHub Copilot truly is.

22
00:01:14,890 --> 00:01:19,391
Imagine combining the vast knowledge
of the largest repository of code in

23
00:01:19,391 --> 00:01:23,965
the world, GitHub, with the incredible
intelligence of AI from OpenAI,

24
00:01:23,965 --> 00:01:26,700
that's GitHub Copilot for you.

25
00:01:26,700 --> 00:01:30,151
Now, remember the times when you
were stuck on a coding problem,

26
00:01:30,151 --> 00:01:32,347
feeling like you were facing a huge wall,

27
00:01:32,347 --> 00:01:36,400
GitHub Copilot is like a friend with
a ladder, ready to help you climb over.

28
00:01:36,400 --> 00:01:41,326
Integrated into several platforms like
Visual Studio Code, Visual Studio,

29
00:01:41,326 --> 00:01:42,378
and Jet Brains.

30
00:01:42,378 --> 00:01:47,220
It's like having a coding encyclopedia,
a tutor, and a guide, all rolled into one.

31
00:01:47,220 --> 00:01:50,900
Here's the cool part,
it doesn't just give random suggestions.

32
00:01:50,900 --> 00:01:54,932
GitHub Copilot analyzes your current work,
understands the context, and

33
00:01:54,932 --> 00:01:58,900
then provides recommendations
tailored to your project.

34
00:01:58,900 --> 00:02:03,059
It's kind of having a conversation with
a fellow coder who offers insights and

35
00:02:03,059 --> 00:02:06,220
solutions, but
it's not just about the big tasks.

36
00:02:06,220 --> 00:02:09,303
Even if you're just trying to
remember how to format a date, or

37
00:02:09,303 --> 00:02:13,610
need a quick reminder on how to structure
a 4 Loop, Copilot is there to help.

38
00:02:13,610 --> 00:02:16,970
It's a beginner's safety net and
an expert's assistant.

39
00:02:16,970 --> 00:02:21,262
With GitHub Copilot, the coding experience
becomes a lot more interactive and

40
00:02:21,262 --> 00:02:21,845
dynamic.

41
00:02:21,845 --> 00:02:26,297
It bridges gaps in knowledge and offers
shortcuts to solutions allowing you to

42
00:02:26,297 --> 00:02:30,530
focus on the bigger picture and
bring your ideas to life faster.

43
00:02:30,530 --> 00:02:35,362
At its core, GitHub co pilot is
a remarkable blend of technology, AI,

44
00:02:35,362 --> 00:02:37,225
and human collaboration.

45
00:02:37,225 --> 00:02:41,527
Have you ever been amazed by how
GitHub Copilot can suggest entire lines

46
00:02:41,527 --> 00:02:43,905
of code that perfectly fit your needs?

47
00:02:43,905 --> 00:02:47,985
It all stems from its deep rooted
connection to OpenAI Codex,

48
00:02:47,985 --> 00:02:53,130
a model trained on an expansive data
set of public code repositories.

49
00:02:53,130 --> 00:02:57,503
Think of it as Copilot having read and
understood tons of books on coding, and

50
00:02:57,503 --> 00:03:00,950
then, always being ready to
share that knowledge with you.

51
00:03:02,895 --> 00:03:07,745
The true magic, however, lies in Copilot's
intuitive ability to grasp context.

52
00:03:07,745 --> 00:03:12,136
Rather than just throwing out generic
code, Copilot scans your ongoing work,

53
00:03:12,136 --> 00:03:14,101
digs deep into its vast knowledge,

54
00:03:14,101 --> 00:03:19,000
and then offers up solutions that fit
right into your project's narrative.

55
00:03:19,000 --> 00:03:23,034
It's as if you're working with a seasoned
developer who's both knowledgeable and

56
00:03:23,034 --> 00:03:25,030
incredibly attentive.

57
00:03:25,030 --> 00:03:28,030
What sets Copilot apart
is its adaptability.

58
00:03:28,030 --> 00:03:29,634
Say you're designing a web page and

59
00:03:29,634 --> 00:03:32,310
you start writing a function
to create a slider.

60
00:03:32,310 --> 00:03:36,450
Even before you finish, Copilot might
chime in with suggestions, predicting your

61
00:03:36,450 --> 00:03:40,710
next steps, and offering snippets
that perfectly align with your goal.

62
00:03:40,710 --> 00:03:44,510
And don't worry about those moments when
you're staring at the screen puzzled

63
00:03:44,510 --> 00:03:47,060
by an error, Copilot's got your back.

64
00:03:47,060 --> 00:03:51,430
Based on the code's context,
it'll provide hints or potential fixes.

65
00:03:51,430 --> 00:03:55,624
It's almost like a detective,
finding clues and suggesting solutions.

66
00:03:55,624 --> 00:03:59,363
Additionally, Copilot isn't
a one-size-fits-all tool,

67
00:03:59,363 --> 00:04:02,892
over time with your feedback and
interaction, it learns and

68
00:04:02,892 --> 00:04:06,437
refines its suggestions to
match your unique coding style.

69
00:04:06,437 --> 00:04:11,120
So, it's more of a partnership where
both you and Copilot grow together.

70
00:04:11,120 --> 00:04:14,279
Every superhero has its strengths and
limitations, and

71
00:04:14,279 --> 00:04:16,850
GitHub Copilot is no exception.

72
00:04:16,850 --> 00:04:19,694
While it's undoubtedly a game
changer in the coding realm,

73
00:04:19,694 --> 00:04:23,430
it's essential to recognize its
strengths and areas of caution.

74
00:04:23,430 --> 00:04:25,130
Starting with its superpowers,

75
00:04:25,130 --> 00:04:29,700
Copilot's primary strength lies in
its productivity boosting abilities.

76
00:04:29,700 --> 00:04:33,697
Imagine speeding through coding tasks
with Copilot filling in the gaps and

77
00:04:33,697 --> 00:04:38,330
offering up solutions even before you ask,
from small snippets to entire functions,

78
00:04:38,330 --> 00:04:42,300
it's like having a turbo boost for
your coding process.

79
00:04:42,300 --> 00:04:47,140
Furthermore, Copilot encourages that
much desired flow state for developers.

80
00:04:47,140 --> 00:04:50,593
Instead of getting bogged down by
minor details or syntax errors,

81
00:04:50,593 --> 00:04:54,280
you can maintain your focus on
the broader project vision.

82
00:04:54,280 --> 00:04:58,916
With Copilot by your side, it feels like
you're in a harmonious coding dance where

83
00:04:58,916 --> 00:05:02,930
you lead and it follows,
complementing your every move.

84
00:05:02,930 --> 00:05:04,630
But what about satisfaction?

85
00:05:04,630 --> 00:05:07,898
There's a unique sense of fulfillment
when your code runs smoothly and

86
00:05:07,898 --> 00:05:09,810
it's designed efficiently.

87
00:05:09,810 --> 00:05:12,130
Copilot aids in achieving that.

88
00:05:12,130 --> 00:05:15,558
By offering elegant solutions and
efficient code practices,

89
00:05:15,558 --> 00:05:19,530
it ensures you're not just coding,
but crafting masterpieces.

90
00:05:19,530 --> 00:05:22,420
However, no tool is
without its challenges.

91
00:05:22,420 --> 00:05:26,470
One area to approach with caution
is Copilot's training data.

92
00:05:26,470 --> 00:05:30,569
Since it's trained on vast public
repositories, there's potential for

93
00:05:30,569 --> 00:05:33,540
it to carry biases from its training data.

94
00:05:33,540 --> 00:05:37,566
It's essential to stay vigilant,
ensuring that the suggested code doesn't

95
00:05:37,566 --> 00:05:40,880
unintentionally perpetuate
any existing biases.

96
00:05:40,880 --> 00:05:45,371
And while Copilot suggestions can be a
boon, they can sometimes be too familiar,

97
00:05:45,371 --> 00:05:49,130
some snippets might closely
resemble existing projects.

98
00:05:49,130 --> 00:05:53,532
As developers, it's crucial to be aware
and ensure that we're producing original

99
00:05:53,532 --> 00:05:57,060
work, steering clear of
unintentional plagiarism.

100
00:05:57,060 --> 00:06:01,930
Lastly, while the benefits of Copilot are
numerous, it does come with a price tag.

101
00:06:01,930 --> 00:06:05,626
It's vital to evaluate if its
features align with your needs, and

102
00:06:05,626 --> 00:06:08,440
if it offers value for the investment.

103
00:06:08,440 --> 00:06:12,347
In summary, while Copilot is
an extraordinary assistant, wielding

104
00:06:12,347 --> 00:06:17,330
its power effectively requires awareness
of its strengths and limitations.

105
00:06:17,330 --> 00:06:22,640
It's about striking the right balance and
using Copilot as a tool, not a crutch.

106
00:06:22,640 --> 00:06:26,017
To get started, you will need to
visit the GitHub Copilot website,

107
00:06:26,017 --> 00:06:29,050
which I will link in
the teacher's notes below.

108
00:06:29,050 --> 00:06:31,592
Before jumping straight
into the free trial,

109
00:06:31,592 --> 00:06:36,690
I wanted to take a moment to showcase the
two plans GitHub Copilot currently offers.

110
00:06:36,690 --> 00:06:40,930
Copilot for individuals is what I will be
using today, it has everything we need to

111
00:06:40,930 --> 00:06:44,820
start benefiting from GitHub Copilot
right in our code editor.

112
00:06:44,820 --> 00:06:48,605
This includes the ability to turn
natural language prompts into code, and

113
00:06:48,605 --> 00:06:51,280
to receive code completion suggestions.

114
00:06:51,280 --> 00:06:55,903
Copilot for Business offers all of these
features and a few more, such as simple

115
00:06:55,903 --> 00:07:01,380
license management, privacy features,
and Copilot Chat beta, amongst others.

116
00:07:01,380 --> 00:07:03,812
To begin with an individual
plan free trial,

117
00:07:03,812 --> 00:07:06,860
simply click on the Start
a free trial button.

118
00:07:06,860 --> 00:07:09,380
You will then be prompted to sign in and
sign up for

119
00:07:09,380 --> 00:07:12,150
GitHub Copilot using your GitHub account.

120
00:07:12,150 --> 00:07:13,994
If you don't have a GitHub account,

121
00:07:13,994 --> 00:07:17,690
use the secondary link below
the button to sign up for one.

122
00:07:17,690 --> 00:07:22,280
After signing up, you'll wanna head over
to your IDE that supports GitHub Copilot.

123
00:07:22,280 --> 00:07:26,243
You can find out more information about
which editors Copilot currently supports

124
00:07:26,243 --> 00:07:28,760
by checking out the documentation.

125
00:07:28,760 --> 00:07:32,250
I'll be sure to leave a link to
the documentation in the teacher's notes.

126
00:07:32,250 --> 00:07:37,403
For this demo, I'll be using
Visual Studio Code In Visual Studio Code,

127
00:07:37,403 --> 00:07:42,640
go to the Extensions view, which can
also be accessed with the shortcut,

128
00:07:42,640 --> 00:07:47,110
Ctrl+ Shift+ X for Windows or
CMD+ Shift X for Mac.

129
00:07:47,110 --> 00:07:50,580
Inside the Extensions panel perform
a search for GitHub Copilot.

130
00:07:50,580 --> 00:07:55,130
Once you find the plugin, click Install,
you will know you have Copilot installed

131
00:07:55,130 --> 00:08:00,020
when you see this icon in the right hand
corner, click on the icon to enable it.

132
00:08:00,020 --> 00:08:02,450
If you have files open
like I do currently,

133
00:08:02,450 --> 00:08:06,971
you will get a prompt like I have with the
options to enable globally, or only for

134
00:08:06,971 --> 00:08:11,920
the HTML doc I'm currently working on,
I'm gonna select to enable globally.

135
00:08:11,920 --> 00:08:15,872
You can click on this icon at anytime
to disable GitHub Copilot, and now,

136
00:08:15,872 --> 00:08:20,790
we're ready to start using GitHub Copilot
as our air programming partner.

137
00:08:20,790 --> 00:08:24,030
For this example,
I will start building a portfolio website.

138
00:08:24,030 --> 00:08:27,786
I only want to create the navigation
in a two column hero section,

139
00:08:27,786 --> 00:08:31,747
where the column on the left is filled
with an image while the column on

140
00:08:31,747 --> 00:08:36,980
the right contains our heading,
paragraph text, and call to action button.

141
00:08:36,980 --> 00:08:40,972
I'll start off by using an emmett
abbreviation, exclamation mark,

142
00:08:40,972 --> 00:08:44,031
followed by tab to start
with a basic HTML structure.

143
00:09:01,104 --> 00:09:04,301
From there, let's start working
on our header and navigation.

144
00:09:04,301 --> 00:09:07,991
I will start with a comment,
this comment will serve as the prompt,

145
00:09:07,991 --> 00:09:09,805
Copilot will read the comment and

146
00:09:09,805 --> 00:09:13,197
it will start to predict what
code we were looking to type out.

147
00:09:19,686 --> 00:09:24,515
Copilot starts by recommending the nav
tag and a structure for our navigation.

148
00:09:24,515 --> 00:09:29,579
We can go through the multiple selections
Copilot has provided by typing Option +,

149
00:09:29,579 --> 00:09:35,160
the left or right bracket on Mac, and Alt
+, the left or right bracket on Windows.

150
00:09:35,160 --> 00:09:37,925
Once we have a suggestion
we're happy with,

151
00:09:37,925 --> 00:09:40,920
we can hit Tab to add that
suggestion to our code.

152
00:09:40,920 --> 00:09:45,190
And just like that, the entire navigation
structure it recommended has been typed

153
00:09:45,190 --> 00:09:46,842
out for us and added to our code.

154
00:09:46,842 --> 00:09:50,801
Pretty neat?

155
00:09:50,801 --> 00:09:53,309
Next, we'll start working
on our hero section.

156
00:09:53,309 --> 00:09:55,645
Like before, I'll start with a comment.

157
00:09:55,645 --> 00:09:59,089
I'll say, hero section to label
the section and then describe.

158
00:09:59,089 --> 00:10:03,000
It's a two column layout with an image
on the left side and a heading,

159
00:10:03,000 --> 00:10:05,440
paragraph text, and button on the right.

160
00:10:10,862 --> 00:10:13,086
Here's our first option from Copilot.

161
00:10:13,086 --> 00:10:17,818
The second option is only a small
difference as it changes the div class for

162
00:10:17,818 --> 00:10:23,890
the image from hero image to hero-img,
and changes the linked Unsplash image.

163
00:10:23,890 --> 00:10:25,710
I'll change the comment to say,

164
00:10:25,710 --> 00:10:30,760
a two-column flexbox layout just to give
Copilot more context on my intentions.

165
00:10:30,760 --> 00:10:33,409
This won't do much for
now with the HTML, but

166
00:10:33,409 --> 00:10:36,280
I'm hoping it will help
us with our CSS later on.

167
00:10:42,440 --> 00:10:44,983
This structure is pretty
close to what I wanted,

168
00:10:44,983 --> 00:10:47,039
so I'll accept it to add it to the code.

169
00:10:50,035 --> 00:10:53,622
All right, so now that we have our
navigation and basic hero section written

170
00:10:53,622 --> 00:10:56,385
out, let's check it out in
the browser to see what we get.

171
00:10:56,385 --> 00:11:00,790
Perfect, we have the word
Logo as our logo placeholder.

172
00:11:00,790 --> 00:11:04,966
We have our three link navigation, and
of course, we have our heading, paragraph,

173
00:11:04,966 --> 00:11:07,060
and button, so far so good.

174
00:11:07,060 --> 00:11:10,630
Now, let's get started on
the CSS to style our website.

175
00:11:10,630 --> 00:11:14,191
Again since this is a quick and dirty
demo, I'll quickly add some styles so

176
00:11:14,191 --> 00:11:16,480
we can see the changes in the browser.

177
00:11:16,480 --> 00:11:20,125
Copilot starts with a suggestion using
the body selector, let's start with that.

178
00:11:37,335 --> 00:11:40,645
Next, it suggests font stylings for
our headings,

179
00:11:40,645 --> 00:11:44,569
before jumping into styling
the font sizes for the headings.

180
00:11:54,552 --> 00:11:57,682
Followed by suggestions for
our paragraph and link text.

181
00:11:57,682 --> 00:12:02,023
Now, can you start to see how Copilot can
drastically speed up your production?

182
00:12:06,767 --> 00:12:11,305
Next, I'll start working
on our layout styles.

183
00:12:11,305 --> 00:12:15,173
Starting with the navigation, let's take
this chunk of code, except I'll change

184
00:12:15,173 --> 00:12:18,396
the background color of our navigation,
so it stands out on the page.

185
00:12:21,708 --> 00:12:24,071
Now, wanna work on our menu links.

186
00:12:42,580 --> 00:12:45,466
And now,
it's time to start on our hero section.

187
00:12:45,466 --> 00:12:47,618
Let's start with a class of hero-left, so

188
00:12:47,618 --> 00:12:52,210
we can set a placeholder to start styling
the left column of our two column section.

189
00:12:52,210 --> 00:12:58,030
Next, I'll do the same thing but for the
right side by using the hero-right class.

190
00:12:58,030 --> 00:13:02,020
Then I'll style the parent section
using the hero class, I'll add the code

191
00:13:02,020 --> 00:13:05,647
suggested, but I wanna also add
the flex property with a value of 1.

192
00:13:11,712 --> 00:13:15,083
Lastly, let's style our heading and
paragraph text.

193
00:13:18,718 --> 00:13:22,465
All right, let's head over to the browser
to refresh and see what we have so far.

194
00:13:22,465 --> 00:13:25,817
Okay, we have our background colors for
our body and navigation.

195
00:13:25,817 --> 00:13:29,446
But it looks like our menu links are on
a second line when they should be on

196
00:13:29,446 --> 00:13:30,242
the same line.

197
00:13:30,242 --> 00:13:34,730
We're also not seeing our image in the
hero section of our two column layout, but

198
00:13:34,730 --> 00:13:37,945
for now, let's work on fixing the nav bar.

199
00:13:37,945 --> 00:13:42,440
Back in our editor, I will start
by reviewing our navigation CSS.

200
00:13:45,331 --> 00:13:48,567
We'll get rid of the justify content and
align items properties.

201
00:13:50,564 --> 00:13:55,437
Let's go back to our nav class and add
a display property with a value of flex.

202
00:13:55,437 --> 00:14:00,355
And here is where the justify content and
align items properties from earlier should

203
00:14:00,355 --> 00:14:03,900
go, which Copilot knows and
suggests, that looks better.

204
00:14:03,900 --> 00:14:06,044
Now, we'll head back to the browser and

205
00:14:06,044 --> 00:14:09,540
refresh the page to see how our
nav bar looks now, perfect.

206
00:14:09,540 --> 00:14:12,940
The logo placeholder and
menu links are on the same line.

207
00:14:12,940 --> 00:14:17,020
Now, let's fix our image which should show
up in the left column of our hero section.

208
00:14:17,020 --> 00:14:20,020
Let's go back to the HTML
file in our editor.

209
00:14:20,020 --> 00:14:23,238
Now, if I had to guess what
the issue with our image was,

210
00:14:23,238 --> 00:14:26,595
I would say it could be due to
Copilot generating the URLs,

211
00:14:26,595 --> 00:14:30,420
and it could be a URL that is incorrect or
doesn't exist.

212
00:14:30,420 --> 00:14:34,650
What I'll do to fix this is add
a comment right above the image tag.

213
00:14:34,650 --> 00:14:38,462
The comment will say, make the image
used here a random image from Unsplash.

214
00:14:42,446 --> 00:14:45,660
And just like that Copilot
has updated our HTML, so

215
00:14:45,660 --> 00:14:50,682
that the image shown will be a random
image from Unsplash every time we refresh.

216
00:14:50,682 --> 00:14:53,655
Let's test it out in the browser
to see if it's working.

217
00:14:55,482 --> 00:14:56,721
Awesome, it works.

218
00:14:56,721 --> 00:14:58,475
It's just taking up too much room,

219
00:14:58,475 --> 00:15:01,518
causing our second column to be
pushed outside the viewport.

220
00:15:01,518 --> 00:15:05,777
Let's fix this, we'll go back to
our editor and select our CSS file.

221
00:15:15,663 --> 00:15:19,072
Okay, the problem stems from
earlier when we were running and

222
00:15:19,072 --> 00:15:20,525
gunning producing code.

223
00:15:20,525 --> 00:15:22,497
We never went back to the hero-left and

224
00:15:22,497 --> 00:15:26,210
hero-right classes to add more
styling other than padding.

225
00:15:26,210 --> 00:15:29,820
Let's delete everything below
the hero-left class selector and

226
00:15:29,820 --> 00:15:32,200
the hero-right class entirely.

227
00:15:32,200 --> 00:15:35,240
Then we can add a second
class selector of hero-right.

228
00:15:35,240 --> 00:15:40,950
When we do Copilot, suggests a flex basis
property with a value of 50 percent.

229
00:15:40,950 --> 00:15:44,694
However, we'll delete this to add our
own flex property with a value of 1 and

230
00:15:44,694 --> 00:15:45,685
a padding of 1 rem.

231
00:15:52,492 --> 00:15:54,783
Next, let's create a child selector for

232
00:15:54,783 --> 00:15:57,671
the hero class targeting
the nested image element.

233
00:15:57,671 --> 00:16:03,090
Copilot recommends a width property with a
value of 100%, I'll add this to our code.

234
00:16:03,090 --> 00:16:07,058
Next, it recommends the height property,
but I want to add a property for

235
00:16:07,058 --> 00:16:10,000
the max width and
set this to 100% as well.

236
00:16:10,000 --> 00:16:12,868
Now, I'll add that recommended
height property, perfect,

237
00:16:12,868 --> 00:16:14,990
let's check out our
progress in the browser.

238
00:16:17,180 --> 00:16:21,815
It works, both of our columns are now
sharing the viewport without any elements

239
00:16:21,815 --> 00:16:23,730
spilling outside.

240
00:16:23,730 --> 00:16:26,629
My only issue now is the spacing
between our paragraph text and

241
00:16:26,629 --> 00:16:29,620
button is pretty tight,
let's fix this real quick.

242
00:16:29,620 --> 00:16:32,788
We'll head back into our
browser to tweak our CSS.

243
00:16:37,262 --> 00:16:40,463
I'll add our class selector for
hero-right.

244
00:16:40,463 --> 00:16:44,270
And add a property of margin-bottom,
with a value of 1 rem.

245
00:16:44,270 --> 00:16:47,680
This should add a bit of spacing between
our paragraph and button elements.

246
00:16:47,680 --> 00:16:50,232
Let's go check it out in the browser.

247
00:16:50,232 --> 00:16:55,236
Nope, still not working,
let's go review our CSS.

248
00:16:55,236 --> 00:16:57,483
Back in the editor, I noticed my error,

249
00:16:57,483 --> 00:17:01,600
I forgot to use a child selector
to target the paragraph element.

250
00:17:01,600 --> 00:17:04,503
I'll make this correction and
let's head back to the browser.

251
00:17:06,583 --> 00:17:08,828
Boom, everything looks great now.

252
00:17:08,828 --> 00:17:13,370
And every time we refresh, we get a new
random image from Unsplash, pretty cool.

253
00:17:13,370 --> 00:17:18,059
The last thing I wanna do is go back to
our HTML file and show how GitHub Copilot

254
00:17:18,059 --> 00:17:23,060
can help us add better documentation in
our code through comments suggestions.

255
00:17:27,557 --> 00:17:32,063
Let's pretend I'll be handing off this
file to someone who is relatively new to

256
00:17:32,063 --> 00:17:36,316
code, so it would help to have each of
our sections and functions labeled.

257
00:17:36,316 --> 00:17:39,214
Since our original comment
describes the navigation,

258
00:17:39,214 --> 00:17:43,470
I'll add another under it that labels
our actual navigation section.

259
00:17:43,470 --> 00:17:47,629
I will then add comments for
each of our navigations elements,

260
00:17:47,629 --> 00:17:51,561
starting with the logo and
then moving on to the Menu Links.

261
00:18:03,475 --> 00:18:05,473
We'll do the same for our hero section.

262
00:18:05,473 --> 00:18:09,530
Our hero section comment from earlier
works well as a label for this section, so

263
00:18:09,530 --> 00:18:11,000
we'll keep that.

264
00:18:11,000 --> 00:18:15,645
But we'll add a comment above our div
with a class of hero-left to label this

265
00:18:15,645 --> 00:18:17,780
section, hero-left side.

266
00:18:17,780 --> 00:18:21,895
Next, I'll do the same for the right side
by adding a comment right above the div

267
00:18:21,895 --> 00:18:25,770
element with a class of hero-right,
and that's all there is to it.

268
00:18:25,770 --> 00:18:30,041
While this was a basic example, I hope you
now have a better understanding of how you

269
00:18:30,041 --> 00:18:33,600
can use GitHub Copilot to be
more productive when coding.

270
00:18:33,600 --> 00:18:36,818
Not only to write code, but
to help you debug your code and

271
00:18:36,818 --> 00:18:39,651
even add better documentation
to your projects.

272
00:18:39,651 --> 00:18:43,204
I hope you found this introduction
to GitHub Copilot helpful, and

273
00:18:43,204 --> 00:18:45,874
I'll catch you in the next video,
happy coding.