Bummer! You have been redirected as the page you requested could not be found.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This workshop explores the capabilities of GitHub Copilot, a powerful coding tool. It demonstrates how Copilot assists developers in various scenarios, such as code completion, debugging, and documentation. Furthermore, students will learn how to use Copilot to enhance their coding productivity and efficiency.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hi, I'm Dan,
a content producer for Treehouse.
0:09
In this video, we're gonna be
talking about GitHub Copilot,
0:12
a new AI tool that can help you write
code faster and more efficiently.
0:15
GitHub Copilot is powered by OpenAI Codex,
a large language model that has been
0:20
trained on a massive data set
of public code repositories.
0:25
This means that Copilot can understand
the context of your code and
0:29
suggest relevant snippets, functions,
and even entire lines of code.
0:33
In the video,
we'll cover the following topics.
0:38
What is GitHub Copilot?
0:41
How does Copilot work?
0:43
The benefits of using Copilot.
0:44
The limitations of Copilot.
0:47
How to get started with Copilot.
0:49
We'll also show you some
practical examples of how Copilot
0:52
can be used to speed up
your coding process.
0:55
So if you're interested in learning
more about GitHub Copilot,
0:58
I encourage you to watch the video, and
1:01
if you have any questions,
please feel free to leave a comment below.
1:03
Now, if you're ready to get started,
let's get down to business.
1:07
Let's start by understanding
what GitHub Copilot truly is.
1:11
Imagine combining the vast knowledge
of the largest repository of code in
1:14
the world, GitHub, with the incredible
intelligence of AI from OpenAI,
1:19
that's GitHub Copilot for you.
1:23
Now, remember the times when you
were stuck on a coding problem,
1:26
feeling like you were facing a huge wall,
1:30
GitHub Copilot is like a friend with
a ladder, ready to help you climb over.
1:32
Integrated into several platforms like
Visual Studio Code, Visual Studio,
1:36
and Jet Brains.
1:41
It's like having a coding encyclopedia,
a tutor, and a guide, all rolled into one.
1:42
Here's the cool part,
it doesn't just give random suggestions.
1:47
GitHub Copilot analyzes your current work,
understands the context, and
1:50
then provides recommendations
tailored to your project.
1:54
It's kind of having a conversation with
a fellow coder who offers insights and
1:58
solutions, but
it's not just about the big tasks.
2:03
Even if you're just trying to
remember how to format a date, or
2:06
need a quick reminder on how to structure
a 4 Loop, Copilot is there to help.
2:09
It's a beginner's safety net and
an expert's assistant.
2:13
With GitHub Copilot, the coding experience
becomes a lot more interactive and
2:16
dynamic.
2:21
It bridges gaps in knowledge and offers
shortcuts to solutions allowing you to
2:21
focus on the bigger picture and
bring your ideas to life faster.
2:26
At its core, GitHub co pilot is
a remarkable blend of technology, AI,
2:30
and human collaboration.
2:35
Have you ever been amazed by how
GitHub Copilot can suggest entire lines
2:37
of code that perfectly fit your needs?
2:41
It all stems from its deep rooted
connection to OpenAI Codex,
2:43
a model trained on an expansive data
set of public code repositories.
2:47
Think of it as Copilot having read and
understood tons of books on coding, and
2:53
then, always being ready to
share that knowledge with you.
2:57
The true magic, however, lies in Copilot's
intuitive ability to grasp context.
3:02
Rather than just throwing out generic
code, Copilot scans your ongoing work,
3:07
digs deep into its vast knowledge,
3:12
and then offers up solutions that fit
right into your project's narrative.
3:14
It's as if you're working with a seasoned
developer who's both knowledgeable and
3:19
incredibly attentive.
3:23
What sets Copilot apart
is its adaptability.
3:25
Say you're designing a web page and
3:28
you start writing a function
to create a slider.
3:29
Even before you finish, Copilot might
chime in with suggestions, predicting your
3:32
next steps, and offering snippets
that perfectly align with your goal.
3:36
And don't worry about those moments when
you're staring at the screen puzzled
3:40
by an error, Copilot's got your back.
3:44
Based on the code's context,
it'll provide hints or potential fixes.
3:47
It's almost like a detective,
finding clues and suggesting solutions.
3:51
Additionally, Copilot isn't
a one-size-fits-all tool,
3:55
over time with your feedback and
interaction, it learns and
3:59
refines its suggestions to
match your unique coding style.
4:02
So, it's more of a partnership where
both you and Copilot grow together.
4:06
Every superhero has its strengths and
limitations, and
4:11
GitHub Copilot is no exception.
4:14
While it's undoubtedly a game
changer in the coding realm,
4:16
it's essential to recognize its
strengths and areas of caution.
4:19
Starting with its superpowers,
4:23
Copilot's primary strength lies in
its productivity boosting abilities.
4:25
Imagine speeding through coding tasks
with Copilot filling in the gaps and
4:29
offering up solutions even before you ask,
from small snippets to entire functions,
4:33
it's like having a turbo boost for
your coding process.
4:38
Furthermore, Copilot encourages that
much desired flow state for developers.
4:42
Instead of getting bogged down by
minor details or syntax errors,
4:47
you can maintain your focus on
the broader project vision.
4:50
With Copilot by your side, it feels like
you're in a harmonious coding dance where
4:54
you lead and it follows,
complementing your every move.
4:58
But what about satisfaction?
5:02
There's a unique sense of fulfillment
when your code runs smoothly and
5:04
it's designed efficiently.
5:07
Copilot aids in achieving that.
5:09
By offering elegant solutions and
efficient code practices,
5:12
it ensures you're not just coding,
but crafting masterpieces.
5:15
However, no tool is
without its challenges.
5:19
One area to approach with caution
is Copilot's training data.
5:22
Since it's trained on vast public
repositories, there's potential for
5:26
it to carry biases from its training data.
5:30
It's essential to stay vigilant,
ensuring that the suggested code doesn't
5:33
unintentionally perpetuate
any existing biases.
5:37
And while Copilot suggestions can be a
boon, they can sometimes be too familiar,
5:40
some snippets might closely
resemble existing projects.
5:45
As developers, it's crucial to be aware
and ensure that we're producing original
5:49
work, steering clear of
unintentional plagiarism.
5:53
Lastly, while the benefits of Copilot are
numerous, it does come with a price tag.
5:57
It's vital to evaluate if its
features align with your needs, and
6:01
if it offers value for the investment.
6:05
In summary, while Copilot is
an extraordinary assistant, wielding
6:08
its power effectively requires awareness
of its strengths and limitations.
6:12
It's about striking the right balance and
using Copilot as a tool, not a crutch.
6:17
To get started, you will need to
visit the GitHub Copilot website,
6:22
which I will link in
the teacher's notes below.
6:26
Before jumping straight
into the free trial,
6:29
I wanted to take a moment to showcase the
two plans GitHub Copilot currently offers.
6:31
Copilot for individuals is what I will be
using today, it has everything we need to
6:36
start benefiting from GitHub Copilot
right in our code editor.
6:40
This includes the ability to turn
natural language prompts into code, and
6:44
to receive code completion suggestions.
6:48
Copilot for Business offers all of these
features and a few more, such as simple
6:51
license management, privacy features,
and Copilot Chat beta, amongst others.
6:55
To begin with an individual
plan free trial,
7:01
simply click on the Start
a free trial button.
7:03
You will then be prompted to sign in and
sign up for
7:06
GitHub Copilot using your GitHub account.
7:09
If you don't have a GitHub account,
7:12
use the secondary link below
the button to sign up for one.
7:13
After signing up, you'll wanna head over
to your IDE that supports GitHub Copilot.
7:17
You can find out more information about
which editors Copilot currently supports
7:22
by checking out the documentation.
7:26
I'll be sure to leave a link to
the documentation in the teacher's notes.
7:28
For this demo, I'll be using
Visual Studio Code In Visual Studio Code,
7:32
go to the Extensions view, which can
also be accessed with the shortcut,
7:37
Ctrl+ Shift+ X for Windows or
CMD+ Shift X for Mac.
7:42
Inside the Extensions panel perform
a search for GitHub Copilot.
7:47
Once you find the plugin, click Install,
you will know you have Copilot installed
7:50
when you see this icon in the right hand
corner, click on the icon to enable it.
7:55
If you have files open
like I do currently,
8:00
you will get a prompt like I have with the
options to enable globally, or only for
8:02
the HTML doc I'm currently working on,
I'm gonna select to enable globally.
8:06
You can click on this icon at anytime
to disable GitHub Copilot, and now,
8:11
we're ready to start using GitHub Copilot
as our air programming partner.
8:15
For this example,
I will start building a portfolio website.
8:20
I only want to create the navigation
in a two column hero section,
8:24
where the column on the left is filled
with an image while the column on
8:27
the right contains our heading,
paragraph text, and call to action button.
8:31
I'll start off by using an emmett
abbreviation, exclamation mark,
8:36
followed by tab to start
with a basic HTML structure.
8:40
From there, let's start working
on our header and navigation.
9:01
I will start with a comment,
this comment will serve as the prompt,
9:04
Copilot will read the comment and
9:07
it will start to predict what
code we were looking to type out.
9:09
Copilot starts by recommending the nav
tag and a structure for our navigation.
9:19
We can go through the multiple selections
Copilot has provided by typing Option +,
9:24
the left or right bracket on Mac, and Alt
+, the left or right bracket on Windows.
9:29
Once we have a suggestion
we're happy with,
9:35
we can hit Tab to add that
suggestion to our code.
9:37
And just like that, the entire navigation
structure it recommended has been typed
9:40
out for us and added to our code.
9:45
Pretty neat?
9:46
Next, we'll start working
on our hero section.
9:50
Like before, I'll start with a comment.
9:53
I'll say, hero section to label
the section and then describe.
9:55
It's a two column layout with an image
on the left side and a heading,
9:59
paragraph text, and button on the right.
10:03
Here's our first option from Copilot.
10:10
The second option is only a small
difference as it changes the div class for
10:13
the image from hero image to hero-img,
and changes the linked Unsplash image.
10:17
I'll change the comment to say,
10:23
a two-column flexbox layout just to give
Copilot more context on my intentions.
10:25
This won't do much for
now with the HTML, but
10:30
I'm hoping it will help
us with our CSS later on.
10:33
This structure is pretty
close to what I wanted,
10:42
so I'll accept it to add it to the code.
10:44
All right, so now that we have our
navigation and basic hero section written
10:50
out, let's check it out in
the browser to see what we get.
10:53
Perfect, we have the word
Logo as our logo placeholder.
10:56
We have our three link navigation, and
of course, we have our heading, paragraph,
11:00
and button, so far so good.
11:04
Now, let's get started on
the CSS to style our website.
11:07
Again since this is a quick and dirty
demo, I'll quickly add some styles so
11:10
we can see the changes in the browser.
11:14
Copilot starts with a suggestion using
the body selector, let's start with that.
11:16
Next, it suggests font stylings for
our headings,
11:37
before jumping into styling
the font sizes for the headings.
11:40
Followed by suggestions for
our paragraph and link text.
11:54
Now, can you start to see how Copilot can
drastically speed up your production?
11:57
Next, I'll start working
on our layout styles.
12:06
Starting with the navigation, let's take
this chunk of code, except I'll change
12:11
the background color of our navigation,
so it stands out on the page.
12:15
Now, wanna work on our menu links.
12:21
And now,
it's time to start on our hero section.
12:42
Let's start with a class of hero-left, so
12:45
we can set a placeholder to start styling
the left column of our two column section.
12:47
Next, I'll do the same thing but for the
right side by using the hero-right class.
12:52
Then I'll style the parent section
using the hero class, I'll add the code
12:58
suggested, but I wanna also add
the flex property with a value of 1.
13:02
Lastly, let's style our heading and
paragraph text.
13:11
All right, let's head over to the browser
to refresh and see what we have so far.
13:18
Okay, we have our background colors for
our body and navigation.
13:22
But it looks like our menu links are on
a second line when they should be on
13:25
the same line.
13:29
We're also not seeing our image in the
hero section of our two column layout, but
13:30
for now, let's work on fixing the nav bar.
13:34
Back in our editor, I will start
by reviewing our navigation CSS.
13:37
We'll get rid of the justify content and
align items properties.
13:45
Let's go back to our nav class and add
a display property with a value of flex.
13:50
And here is where the justify content and
align items properties from earlier should
13:55
go, which Copilot knows and
suggests, that looks better.
14:00
Now, we'll head back to the browser and
14:03
refresh the page to see how our
nav bar looks now, perfect.
14:06
The logo placeholder and
menu links are on the same line.
14:09
Now, let's fix our image which should show
up in the left column of our hero section.
14:12
Let's go back to the HTML
file in our editor.
14:17
Now, if I had to guess what
the issue with our image was,
14:20
I would say it could be due to
Copilot generating the URLs,
14:23
and it could be a URL that is incorrect or
doesn't exist.
14:26
What I'll do to fix this is add
a comment right above the image tag.
14:30
The comment will say, make the image
used here a random image from Unsplash.
14:34
And just like that Copilot
has updated our HTML, so
14:42
that the image shown will be a random
image from Unsplash every time we refresh.
14:45
Let's test it out in the browser
to see if it's working.
14:50
Awesome, it works.
14:55
It's just taking up too much room,
14:56
causing our second column to be
pushed outside the viewport.
14:58
Let's fix this, we'll go back to
our editor and select our CSS file.
15:01
Okay, the problem stems from
earlier when we were running and
15:15
gunning producing code.
15:19
We never went back to the hero-left and
15:20
hero-right classes to add more
styling other than padding.
15:22
Let's delete everything below
the hero-left class selector and
15:26
the hero-right class entirely.
15:29
Then we can add a second
class selector of hero-right.
15:32
When we do Copilot, suggests a flex basis
property with a value of 50 percent.
15:35
However, we'll delete this to add our
own flex property with a value of 1 and
15:40
a padding of 1 rem.
15:44
Next, let's create a child selector for
15:52
the hero class targeting
the nested image element.
15:54
Copilot recommends a width property with a
value of 100%, I'll add this to our code.
15:57
Next, it recommends the height property,
but I want to add a property for
16:03
the max width and
set this to 100% as well.
16:07
Now, I'll add that recommended
height property, perfect,
16:10
let's check out our
progress in the browser.
16:12
It works, both of our columns are now
sharing the viewport without any elements
16:17
spilling outside.
16:21
My only issue now is the spacing
between our paragraph text and
16:23
button is pretty tight,
let's fix this real quick.
16:26
We'll head back into our
browser to tweak our CSS.
16:29
I'll add our class selector for
hero-right.
16:37
And add a property of margin-bottom,
with a value of 1 rem.
16:40
This should add a bit of spacing between
our paragraph and button elements.
16:44
Let's go check it out in the browser.
16:47
Nope, still not working,
let's go review our CSS.
16:50
Back in the editor, I noticed my error,
16:55
I forgot to use a child selector
to target the paragraph element.
16:57
I'll make this correction and
let's head back to the browser.
17:01
Boom, everything looks great now.
17:06
And every time we refresh, we get a new
random image from Unsplash, pretty cool.
17:08
The last thing I wanna do is go back to
our HTML file and show how GitHub Copilot
17:13
can help us add better documentation in
our code through comments suggestions.
17:18
Let's pretend I'll be handing off this
file to someone who is relatively new to
17:27
code, so it would help to have each of
our sections and functions labeled.
17:32
Since our original comment
describes the navigation,
17:36
I'll add another under it that labels
our actual navigation section.
17:39
I will then add comments for
each of our navigations elements,
17:43
starting with the logo and
then moving on to the Menu Links.
17:47
We'll do the same for our hero section.
18:03
Our hero section comment from earlier
works well as a label for this section, so
18:05
we'll keep that.
18:09
But we'll add a comment above our div
with a class of hero-left to label this
18:11
section, hero-left side.
18:15
Next, I'll do the same for the right side
by adding a comment right above the div
18:17
element with a class of hero-right,
and that's all there is to it.
18:21
While this was a basic example, I hope you
now have a better understanding of how you
18:25
can use GitHub Copilot to be
more productive when coding.
18:30
Not only to write code, but
to help you debug your code and
18:33
even add better documentation
to your projects.
18:36
I hope you found this introduction
to GitHub Copilot helpful, and
18:39
I'll catch you in the next video,
happy coding.
18:43
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up