Skip to content
This repository was archived by the owner on May 14, 2025. It is now read-only.

Commit 1e2c322

Browse files
authored
Update start course button (#1)
* update-start-course-button * Update README.md
1 parent 5d67be2 commit 1e2c322

File tree

5 files changed

+74
-63
lines changed

5 files changed

+74
-63
lines changed

.github/workflows/1-copilot-extension.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
name: Step 1, 1-Copilot Extension in a Codespace
22

3-
# This step triggers after TBD-step-1-event-desc
3+
# This step triggers after push to main#devcontainer.json
44
# This step sets STEP to 2
55
# This step closes <details id=1> and opens <details id=2>
66

7-
# This will run every time we TBD-step-1-event-desc
7+
# This will run every time we main#devcontainer.json
88
# Reference https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
99
on:
1010
workflow_dispatch:

.github/workflows/2-skills-javascript.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
name: Step 2, 2-Javascript function
22

3-
# This step triggers after TBD-step-2-event-desc
3+
# This step triggers after push to main#skills.js
44
# This step sets STEP to 3
55
# This step closes <details id=2> and opens <details id=3>
66

7-
# This will run every time we TBD-step-2-event-desc
7+
# This will run every time we push to main#skills.js
88
# Reference https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
99
on:
1010
workflow_dispatch:

.github/workflows/3-copilot-hub.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
name: Step 3, 3-Copilot hub suggestion
22

3-
# This step triggers after TBD-step-3-event-desc
3+
# This step triggers after push to main#member.js
44
# This step sets STEP to 4
55
# This step closes <details id=3> and opens <details id=4>
66

7-
# This will run every time we TBD-step-3-event-desc
7+
# This will run every time we push to main#member.js
88
# Reference https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
99
on:
1010
workflow_dispatch:

.github/workflows/4-copilot-comment.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
name: Step 4, 4-Add Copilot suggestion from comment
2-
# This step triggers after TBD-step-4-event-desc
2+
# This step triggers after push to main#comments.js
33
# This step sets STEP to X
44
# This step closes <details id=3> and opens <details X>
55

6-
# This will run every time we TBD-step-4-event-desc
6+
# This will run every time we main#comments.js
77
# Reference https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
88
on:
99
workflow_dispatch:
@@ -35,7 +35,7 @@ jobs:
3535
outputs:
3636
current_step: ${{ steps.get_step.outputs.current_step }}
3737

38-
on_TBD-step-4-event:
38+
on_push_to_comments:
3939
name: On code generated from comment
4040
needs: get_current_step
4141

README.md

Lines changed: 65 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,39 @@ GitHub Copilot can help you code by offering autocomplete-style suggestions. You
1111
- **Prerequisites**: To use GitHub Copilot you must have an active GitHub Copilot subscription. Sign up for 60 days free [Copilot](https://github.com/settings/copilot)
1212
- **Timing**: This course is four steps long and can be completed in under an hour
1313

14-
<summary><h2> How to start this course!</h2></summary>
15-
16-
1. Above these instructions, click **Use this template**.
17-
2. From the dropdown right-click **Create a new repository** and open the link in a new tab.
18-
![Screen Shot 2023-03-07 at 9 28 54 AM](https://user-images.githubusercontent.com/26442605/223501605-e67051f7-50af-4ae0-a18f-6f733a8b6c62.png)
19-
3. In the new tab, follow the prompts to create a new repository.
14+
## How to start this course
15+
16+
<!-- For start course, run in JavaScript:
17+
'https://github.com/new?' + new URLSearchParams({
18+
template_owner: 'skills',
19+
template_name: 'copilot-codespaces-vscode',
20+
owner: '@me',
21+
name: 'skills-copilot-codespaces-vscode',
22+
description: 'My clone repository',
23+
visibility: 'public',
24+
}).toString()
25+
-->
26+
27+
[![start-course](https://user-images.githubusercontent.com/1221423/235727646-4a590299-ffe5-480d-8cd5-8194ea184546.svg)](https://github.com/new?template_owner=skills&template_name=copilot-codespaces-vscode&owner=%40me&name=skills-copilot-codespaces-vscode&description=My+clone+repository&visibility=public)
28+
29+
1. Right-click **Start course** and open the link in a new tab.
30+
2. In the new tab, most of the prompts will automatically fill in for you.
2031
- For owner, choose your personal account or an organization to host the repository.
21-
- We recommend creating a public repositoryprivate repositories will use [Actions minutes](https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions).
22-
![Create a new repository](https://user-images.githubusercontent.com/1221423/169618722-406dc508-add4-4074-83f0-c7a7ad87f6f3.png)
23-
4. After your new repository is created, wait about 20 seconds, then refresh the page. Follow the step-by-step instructions in the new repository's README.
32+
- We recommend creating a public repository, as private repositories will [use Actions minutes](https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions).
33+
- Scroll down and click the **Create repository** button at the bottom of the form.
34+
3. After your new repository is created, wait about 20 seconds, then refresh the page. Follow the step-by-step instructions in the new repository's README.
2435

2536
<!--endstep0-->
2637

2738
<details id=1>
2839
<summary><h2>Step 1: Leverage Codespaces with VS Code for Copilot</h2></summary>
2940

3041
_Welcome to " Develop With AI Powered Code Suggestions Using GitHub Copilot and VS Code"! :wave:_
31-
32-
GitHub Copilot is an AI pair programmer that helps you write code faster and with less work. It draws context from comments and code to suggest individual lines and whole functions instantly. GitHub Copilot is powered by OpenAI Codex, a generative pretrained language model created by OpenAI.
33-
42+
43+
GitHub Copilot is an AI pair programmer that helps you write code faster and with less work. It draws context from comments and code to suggest individual lines and whole functions instantly. GitHub Copilot is powered by OpenAI Codex, a generative pretrained language model created by OpenAI.
44+
3445
**Copilot works with many code editors including VS Code, Visual Studio, JetBrains IDE, and Neovim.**
35-
46+
3647
Additionally, GitHub Copilot is trained on all languages that appear in public repositories. For each language, the quality of suggestions you receive may depend on the volume and diversity of training data for that language.
3748

3849
Using Copilot inside a Codespace shows just how easy it is to get up and running with GitHub's suite of [Collaborative Coding](https://github.com/features#features-collaboration) tools.
@@ -43,8 +54,8 @@ Using Copilot inside a Codespace shows just how easy it is to get up and running
4354
### :keyboard: Activity: Enable Copilot inside a Codespace
4455

4556
**We recommend opening another browser tab to work through the following activities so you can keep these instructions open for reference.**
46-
47-
Before you open up a codespace on a repository, you can create a development container and define specific extensions or configurations that will be used or installed in your codespace. Let's create this development container and add copilot to the list of extensions.
57+
58+
Before you open up a codespace on a repository, you can create a development container and define specific extensions or configurations that will be used or installed in your codespace. Let's create this development container and add copilot to the list of extensions.
4859

4960
1. Navigating back to your **Code** tab of your repository, click the **Add file** drop-down button, and then click `Create new file`.
5061
1. Type or paste the following in the empty text field prompt to name your file.
@@ -65,7 +76,7 @@ Before you open up a codespace on a repository, you can create a development con
6576
}
6677
}
6778
```
68-
1. Select the option to **Commit directly to the `main` branch**, and then click the **Commit new file** button.
79+
1. Select the option to **Commit directly to the `main` branch**, and then click the **Commit new file** button.
6980
1. Navigate back to the home page of your repository by clicking the **Code** tab located at the top left of the screen.
7081
1. Click the **Code** button located in the middle of the page.
7182
1. Click the **Codespaces** tab on the box that pops up.
@@ -79,7 +90,7 @@ Before you open up a codespace on a repository, you can create a development con
7990
![Screen Shot 2023-03-09 at 9 04 13 AM](https://user-images.githubusercontent.com/26442605/224102514-7d6d2f51-f435-401d-a529-7bae3ae3e511.png)
8091

8192
**Wait about 60 seconds then refresh your repository landing page for the next step.**
82-
93+
8394
</details>
8495

8596
<details id=2>
@@ -90,70 +101,70 @@ _Nice work! :tada: You created a Codespace using a devcontainer file that instal
90101
GitHub Copilot provides suggestions for numerous languages and a wide variety of frameworks, but works especially well for Python, JavaScript, TypeScript, Ruby, Go, C# and C++. The following samples are in JavaScript, but other languages will work similarly.
91102

92103
Let's try this out utilizing Javascript for Copilot.
93-
104+
94105
### :keyboard: Activity: Add a Javascript file and start writing code
95106

96-
1. From inside the codespace in the VS Code explorer window, create a new file.
97-
107+
1. From inside the codespace in the VS Code explorer window, create a new file.
108+
98109
> **Note**:
99110
> If you closed the Codespace from above, please open it back up or create a new Codespace.
100-
111+
101112
2. Name the file `skills.js`
102113
3. Verify your new file looks like:
103114
![Screen Shot 2023-03-09 at 9 21 34 AM](https://user-images.githubusercontent.com/26442605/224105906-d1beb531-b747-4c7a-85ba-a12526488422.png)
104115
4. In the `skills.js` file, type the following function header.
105-
116+
106117
```
107118
function calculateNumbers(var1, var2)
108119
```
109120
GitHub Copilot will automatically suggest an entire function body in grayed text. Below is an example of what you'll most likely see, but the exact suggestion may vary.
110121
![Screen Shot 2023-04-27 at 10 23 06 AM](https://user-images.githubusercontent.com/26442605/234941079-b4bf3e9d-fc70-4b20-b74c-0ee753ba344e.png)
111122

112-
123+
113124
5. Press `Tab` to accept the suggestion.
114-
125+
115126
### :keyboard: Activity: Push code to your repository from the codespace
116127

117128
1. Use the VS Code terminal to add the `skills.js` file to the repository:
118-
129+
119130
```
120131
git add skills.js
121132
```
122133

123134
2. Next from the VS code terminal stage and commit the changes to the repository:
124-
135+
125136
```
126137
git commit -m "Copilot first commit"
127138
```
128-
139+
129140
3. Finally from the VS code terminal push to code to the repository:
130-
141+
131142
```
132143
git push
133144
```
134-
145+
135146
**Wait about 60 seconds then refresh your repository landing page for the next step.**
136-
147+
137148
</details>
138149

139150
<details id=3>
140151
<summary><h2>Step 3: View the GitHub Copilot tab with multiple suggestions</h2></summary>
141152

142153
_Nice work! You just used AI code suggestions within a Javascript file by using GitHub Copilot :sparkles:_
143-
154+
144155
Keep in mind that as you continue to use copilot, you may not want some of the suggestions GitHub Copilot offers. GitHub Copilot will show you multiple suggestions in a new tab.
145156

146157
### :keyboard: Activity: Pull the latest code to the Codespace repo.
147158

148159
> **Note**
149160
> Pull MUST be done prior to the next activity.
150-
161+
151162
1. Use the VS Code terminal to pull the latest code:
152163

153164
```
154165
git pull
155166
```
156-
167+
157168
### :keyboard: Activity: Add another Javascript method and view all suggestions
158169

159170
1. From inside the codespace in the VS Code explorer window, create a new file. Note: If you closed the Codespace from above please open it back up or create a new Codespace.
@@ -165,29 +176,29 @@ Keep in mind that as you continue to use copilot, you may not want some of the s
165176
4. Stop typing and view the Copilot suggestion by hovering over the red squiggly and select the `...`
166177
5. Click `Open Completions Panel`. Copilot will synthesize around 10 different code suggestions. You should see something like this:
167178
![Screen Shot 2023-04-27 at 10 06 55 AM](https://user-images.githubusercontent.com/26442605/234937592-d196bd5e-8ac2-4d9a-87f4-94e8a9b6a417.png)
168-
6. Find a solution you like and click `Accept Solution`.
179+
6. Find a solution you like and click `Accept Solution`.
169180
7. Your `member.js` file will be updated with your solution.
170-
181+
171182
### :keyboard: Activity: Push code to your repository from the codespace
172183

173184
1. Use the VS Code terminal to add the `member.js` file to the repository:
174-
185+
175186
```
176187
git add member.js
177188
```
178189

179190
2. Next from the VS code terminal stage and commit the changes to the repository:
180-
191+
181192
```
182193
git commit -m "Copilot second commit"
183194
```
184-
195+
185196
3. Finally from the VS code terminal push to code to the repository:
186-
197+
187198
```
188199
git push
189200
```
190-
201+
191202

192203
**Wait about 60 seconds then refresh your repository landing page for the next step.**
193204

@@ -198,21 +209,21 @@ Keep in mind that as you continue to use copilot, you may not want some of the s
198209

199210
_Nicely done utilizing the Copilot tab!_ :partying_face:
200211

201-
You now have leveraged the Copilot quick tab auto-suggest as well as the Copilot hub to accept AI generated suggestions.
212+
You now have leveraged the Copilot quick tab auto-suggest as well as the Copilot hub to accept AI generated suggestions.
202213

203214
Now lets see how you can leverage comments to generate Copilot suggestions!
204215

205216
### :keyboard: Activity: Pull the latest code to the Codespace repo.
206217

207218
> **Note**
208219
> Pull MUST be done prior to the next activity.
209-
220+
210221
1. Use the VS Code terminal to pull the latest code:
211222

212223
```
213224
git pull
214225
```
215-
226+
216227
### :keyboard: Activity: Generate Copilot suggested code from comments.
217228

218229
1. From inside the codespace in the VS Code explorer window, create a new file. (If you closed the Codespace from above, please open it back up or create a new Codespace.)
@@ -226,30 +237,30 @@ Now lets see how you can leverage comments to generate Copilot suggestions!
226237
6. Hover over the red squggly and select the `...`
227238
> **Note**
228239
> If you don't see the copilot code block suggestion or the red squiggly and the three dots `...`, you can type `control + enter` to bring up the GitHub Copilot completions panel.
229-
240+
230241
7. Click `Open Completions Panel`. Copilot will synthesise around 10 different code suggestions. You should see somethig like this:
231242
![Screen Shot 2023-04-25 at 3 59 42 PM](https://user-images.githubusercontent.com/26442605/234425509-74ea96e0-bbd6-417b-84c5-73546ac7b2cd.png)
232-
8. Find a solution you like and click `Accept Solution`.
243+
8. Find a solution you like and click `Accept Solution`.
233244
7. Your `comments.js` file will be updated with your solution.
234-
245+
235246
### :keyboard: Activity: Push code to your repository from the codespace
236247

237248
1. Use the VS Code terminal to add the `comments.js` file to the repository:
238-
249+
239250
```
240251
git add comments.js
241252
```
242253

243254
2. Next from the VS code terminal stage and commit the changes to the repository:
244-
255+
245256
```
246257
git commit -m "Copilot third commit"
247258
```
248-
259+
249260
3. Finally from the VS code terminal push to code to the repository:
250-
261+
251262
```
252-
git push
263+
git push
253264
```
254265

255266
**Wait about 60 seconds then refresh your repository landing page for the next step.**
@@ -271,7 +282,7 @@ Here's a recap of all the tasks you completed:
271282
* Leverage comments to have Copilot auto-suggest code.
272283

273284
### Additional learning and resources
274-
285+
275286
- [Copilot for Individuals](https://docs.github.com/en/copilot/overview-of-github-copilot/about-github-copilot-for-individuals)
276287
- [Copilot for Business](https://docs.github.com/en/copilot/overview-of-github-copilot/about-github-copilot-for-business)
277288
- [Getting started with Copilot](https://docs.github.com/en/copilot/getting-started-with-github-copilot/getting-started-with-github-copilot-in-visual-studio-code)
@@ -289,6 +300,6 @@ Here's a recap of all the tasks you completed:
289300

290301
---
291302

292-
Get help: [TBD-support](TBD-support-link) &bull; [Review the GitHub status page](https://www.githubstatus.com/)
303+
Get help: [Post in our discussion board](https://github.com/skills/.github/discussions) &bull; [Review the GitHub status page](https://www.githubstatus.com/)
293304

294-
&copy; 2022 TBD-copyright-holder &bull; [Code of Conduct](https://www.contributor-covenant.org/version/2/1/code_of_conduct/code_of_conduct.md) &bull; [CC-BY-4.0 License](https://creativecommons.org/licenses/by/4.0/legalcode)
305+
&copy; 2022 GitHub &bull; [Code of Conduct](https://www.contributor-covenant.org/version/2/1/code_of_conduct/code_of_conduct.md) &bull; [MIT License](https://gh.io/mit)

0 commit comments

Comments
 (0)