Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions 04-Harnessing-GitHub-Copilot-with-JavaScript/README.MD
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const siteProps = {

### 🔎 Step 2: Animate the social media icons with a prompt

An animation can make the social media section more eye-catching. Next, lets ask Copilot’s help to animate the icons. Write the following prompt in the `src/styles.css` file:
An animation can make the social media section more eye-catching. Ask Copilot’s help to animate the icons. Write the following prompt in the `src/styles.css` file:

```css
/* add an amazing animation to the social icons */
Expand All @@ -91,11 +91,16 @@ img.socialIcon:hover {
}
```

### 🚀 Step 3: Work with the suggestion
### 🚀 Step 3: Find out how to run the app
Open GitHub Copilot chat by clicking on the chat icon on the left side bar and use the input section to ask the following:

Accept the suggestion by pressing the tab key. If you don't receive the exact same suggestion, then you can either experiment with the suggestion provided or keep typing the CSS code until it matches.
```
@workspace I want to understand how can I run this React application
```

Your site should already be running in your Codespace, and the change will reload onto the page automatically. To see them, hover over one of your social media icons in the footer to see the magic!
The prompts uses `@workspace` which is a special feature of GitHub Copilot chat that allows you to include more context for a more complete answer. Try out other queries using the chat panel for a more interactive workflow.

### Conclusion
Your site should already be running in your Codespace, and the change will reload onto the page automatically. To see them, hover over one of your social media icons in the footer to see the magic!

Congratulations, through the exercise, you haven't only used copilot to generate code but also done it in an interactive and fun way! You can use GitHub Copilot to not only generate code, but write documentation, test your applications and more.
Congratulations, through the exercise, you have use GitHub Copilot to generate code and also done it in an interactive and fun way! You can use GitHub Copilot to not only generate code, but write documentation, test your applications and more.
11 changes: 2 additions & 9 deletions 05-Harnessing-GitHub-Copilot-with-Python/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,21 +56,14 @@ Next, generate a new endpoint with GitHub Copilot by adding the comment:
# Create a FastAPI endpoint that accepts a POST request with a JSON body containing a single field called "text" and returns a checksum of the text
```

### 🐍 Step 3: Add necessary imports
### 🐍 Step 3: Explain code

The generated code causes the application to crash. The crash happens because the `base64` and `os` modules aren't imported. Add the following lines to the top of the file:

```python
import base64
import os
```
The `generate()` route creates a pseudo-random token ID using a single line that might be difficult to fully understand. Select the whole function, and then right click on the selection, then select the Copilot menu item, and then the _"Explain This"_ option. The GitHub Copilot chat interface will open to the left and provide you a useful explanation which you can use to interactively ask more questions.

Finally, verify the new endpoint is working by trying it out by going to the `/docs` endpoint and confirming that the endpoint shows up.


🚀 Congratulations, through the exercise, you haven't only used copilot to generate code but also done it in an interactive and fun way! You can use GitHub Copilot to not only generate code, but write documentation, test your applications and more.


## Legal Notices

Microsoft and any contributors grant you a license to the Microsoft documentation and other content
Expand Down