You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .github/steps/1-step.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,11 @@ Welcome to your **"Getting Started with GitHub Copilot"** exercise! :robot:
4
4
5
5
In this exercise, you will be using different GitHub Copilot features to work on a website that allows students of Mergington High School to sign up for extracurricular activities. 🎻 ⚽️ ♟️
6
6
7
-
<imgwidth="600"alt="screenshot of Mergington High School WebApp"src="../images/mergington-high-school-webapp.png" />
7
+
<imgwidth="600"alt="screenshot of Mergington High School WebApp"src="https://github.com/terioki/skills-getting-started-with-github-copilot/blob/main/.github/images/mergington-high-school-webapp.png?raw=true" />
GitHub Copilot is an AI coding assistant that helps you write code faster and with less effort, allowing you to focus more energy on problem solving and collaboration.
14
14
@@ -47,19 +47,19 @@ Let's start up our development environment, use copilot to learn a bit about the
47
47
48
48
1. In the left sidebar, click the extensions tab and verify that the `GitHub Copilot` and `Python` extensions are installed and enabled.
49
49
50
-
<imgwidth="350"alt="copilot extension for VS Code"src="../images/copilot-extension-vscode.png" />
50
+
<imgwidth="350"alt="copilot extension for VS Code"src="https://github.com/terioki/skills-getting-started-with-github-copilot/blob/main/.github/images/copilot-extension-vscode.png?raw=true" />
51
51
52
-
<imgwidth="350"alt="python extension for VS Code"src="../images/python-extension-vscode.png" />
52
+
<imgwidth="350"alt="python extension for VS Code"src="https://github.com/terioki/skills-getting-started-with-github-copilot/blob/main/.github/images/python-extension-vscode.png?raw=true" />
53
53
54
54
1. At the top of VS Code, locate and click the **Toggle Chat icon** to open a Copilot Chat side panel.
> 🪧 **Note:** If this is your first time using GitHub Copilot, you will need to accept the usage terms to continue.
59
59
60
60
1. Make sure you are in **Ask Mode** for our first interaction
61
61
62
-
<imgwidth="350"alt="screenshot showing Ask Mode selection in Copilot Chat"src="../images/ask-mode-selection.png" />
62
+
<imgwidth="350"alt="screenshot showing Ask Mode selection in Copilot Chat"src="https://github.com/terioki/skills-getting-started-with-github-copilot/blob/main/.github/images/ask-mode-selection.png?raw=true" />
63
63
64
64
1. Enter the below prompt to ask Copilot to introduce you to the project.
65
65
@@ -81,13 +81,13 @@ Let's start up our development environment, use copilot to learn a bit about the
81
81
82
82
1. Now that we know a bit more about the project, let's actually try running it! In the left sidebar, select the `Run and Debug` tab and then press the **Start Debugging** icon.
1. We want to see our webpage running in a browser, so let's find the url and port. If it isn't visible, expand the lower panel and select the **Ports** tab.
87
87
88
88
1. In the list, find port `8000` and the related link. Hover over the link and select the **Open in browser** icon.
Copy file name to clipboardExpand all lines: .github/steps/2-step.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -50,7 +50,7 @@ In short, you can think of Copilot like a very specialized coworker. To be effec
50
50
# Validate student is not already signed up
51
51
```
52
52
53
-
<img width="700" alt="Copilot shadow text suggestion in the editor" src="../images/shadow-text.gif" />
53
+
<img width="700" alt="Copilot shadow text suggestion in the editor" src="https://github.com/terioki/skills-getting-started-with-github-copilot/blob/main/.github/images/shadow-text.gif?raw=true" />
54
54
55
55
1. Press `Tab` to accept Copilot's suggestion and convert the shadow text to code.
56
56
@@ -91,7 +91,7 @@ In new project developments, it's often helpful to have some realistic looking f
91
91
92
92
1. Highlight the entire `activities` dictionary by clicking and dragging your mouse from the top to the bottom of the dictionary. This will help provide context to Copilot for our next prompt.
93
93
94
-
<imgwidth="700"alt="Highlighted activities dictionary before opening inline chat"src="../images/activities-dict-highlighted.png" />
94
+
<imgwidth="700"alt="Highlighted activities dictionary before opening inline chat"src="https://github.com/terioki/skills-getting-started-with-github-copilot/blob/main/.github/images/activities-dict-highlighted.png?raw=true" />
95
95
96
96
97
97
1. Bring up Copilot inline chat by using the keyboard command `Ctrl + I` (windows) or `Cmd + I` (mac).
@@ -188,7 +188,7 @@ Nice work fixing that bug and expanding the example activities! Now let's get ou
188
188
189
189
1. Find the `app.py` file and press the `+` sign to collect your changes together in the staging area.
1. Open the files related to our webpage then drag each editor window (or file) to the chat panel, informing Copilot to use them as context.
44
44
@@ -48,7 +48,7 @@ Let's use Copilot to change the website to display signed up students under each
48
48
49
49
> 🪧 **Note:** Adding files as context is optional. If you skip this, Copilot Agent Mode can still use tools like `#codebase` to search for relevant files from your prompt. Adding specific files helps point Copilot in the right direction, which is especially useful in larger codebases.
50
50
51
-
<imgwidth="400"alt="image showing files added to context"src="../images/files-added-to-context.png" />
51
+
<imgwidth="400"alt="image showing files added to context"src="https://github.com/terioki/skills-getting-started-with-github-copilot/blob/main/.github/images/files-added-to-context.png?raw=true" />
52
52
53
53
> 💡 **Tip:** You can also use the **Add Context...** button to provide other sources of context items, like a GitHub issue or the results of a terminal window.
54
54
@@ -66,14 +66,14 @@ Let's use Copilot to change the website to display signed up students under each
66
66
67
67
Using the **Keep** buttons shown below, you can accept/discard all changes or review and decide change by change. This can be done either from the chat panel view or while inspecting each edited file.
68
68
69
-
<img width="900" alt="buttons to keep or discard changes" src="../images/review-changes-buttons.png" />
69
+
<img width="900" alt="buttons to keep or discard changes" src="https://github.com/terioki/skills-getting-started-with-github-copilot/blob/main/.github/images/review-changes-buttons.png?raw=true" />
70
70
71
71
72
72
1. Before we simply accept the changes, please check our website again and verify everything is updated as expected.
73
73
74
74
Here is an example of an updated activity card. You may need to restart the app or refresh the page.
75
75
76
-
<img width="350" alt="Activity card with participant info" src="../images/activity-card-with-participants.png" />
76
+
<img width="350" alt="Activity card with participant info" src="https://github.com/terioki/skills-getting-started-with-github-copilot/blob/main/.github/images/activity-card-with-participants.png?raw=true" />
77
77
78
78
> 🪧 **Note:** Your activity card may look different. Copilot won't always produce the same results.
79
79
@@ -99,11 +99,11 @@ If you don't get the desired results, you can try other models or provide follow
99
99
100
100
1. Make sure your Copilot is still in **Agent** mode.
Copy file name to clipboardExpand all lines: .github/steps/5-step.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,11 +29,11 @@ Both **Copilot pull request summaries** and **Copilot code review** have limited
29
29
30
30
1. (Optional) In the PR description toolbar click the **Copilot** icon and **Summary** action. After a moment, Copilot will add a description based on your changes. :memo:
1. (Optional) In the right side information panel at the top, locate the **Reviewers** section and click the **Request** button next to a **Copilot icon**. Wait a moment for Copilot to add a review comment to your pull request!
-**Who is this for**: Developers at any experience level looking to accelerate their code workflow.
8
-
-**What you'll learn**: The different ways to interact with Copilot to explain, write, plan, and develop code.
9
-
-**What you'll build**: You will guide Copilot to update Mergington High School's extracurricular activities website.
10
-
-**Prerequisites**:
11
-
- Skills exercise: [Introduction to GitHub](https://github.com/skills/introduction-to-github)
12
-
- Familiarity with [VS Code](https://code.visualstudio.com/)
13
-
- Basic coding principles
14
-
-**How long**: This exercise takes less than one hour to complete.
7
+
Mona here. I'm done preparing your exercise. Hope you enjoy! 💚
15
8
16
-
In this exercise, you will:
9
+
Remember, it's self-paced so feel free to take a break! ☕️
17
10
18
-
1. Use a preconfigured Codespace to run VS Code in your browser.
19
-
1. Learn different interaction options to develop and plan with GitHub Copilot.
20
-
1. Use Copilot to summarize and review your pull request.
21
-
22
-
### How to start this exercise
23
-
24
-
Simply copy the exercise to your account, then give your favorite Octocat (Mona) **about 20 seconds** to prepare the first lesson, then **refresh the page**.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments