feat: Adjustments from review feedback (#9)

chriswblake · web-flow · commit 6edb9dac8ebe · 2025-03-13T15:00:11.000-05:00
diff --git a/.github/steps/1-preparing.md b/.github/steps/1-preparing.md
@@ -4,8 +4,12 @@ Welcome to your **"Getting Started with GitHub Copilot"** exercise! :robot:
 
 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. 🎻 ⚽️ ♟️
 
+<img width="600" alt="screenshot of Mergington High School WebApp" src="https://github.com/user-attachments/assets/472398fd-1aa1-4084-b443-4e242deb30d9" />
+
 ### What is GitHub Copilot?
 
+<img width="150" align="right" alt="copilot logo" src="https://github.com/user-attachments/assets/4d22496d-850b-4785-aafe-11cba03cd5f2" />
+
 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.
 
 GitHub Copilot has been proven to increase developer productivity and accelerate the pace of software development. For more information, see [Research: quantifying GitHub Copilot’s impact on developer productivity and happiness in the GitHub blog.](https://github.blog/news-insights/research/research-quantifying-github-copilots-impact-on-developer-productivity-and-happiness/)
@@ -17,16 +21,13 @@ Your most common interactions will likely be:
 - **Copilot Edits**: Similar to Copilot Chat, but less conversational and more big picture or goal oriented.
 
 > [!TIP]
-> You can learn more about current and preview features in the [GitHub Copilot Features](https://docs.github.com/en/copilot/about-github-copilot/github-copilot-features) documentation.
-
-> [!TIP]
-> You can also select different [models](https://docs.github.com/en/github-models) and [extensions](https://github.com/features/copilot/extensions), but that's for a different lesson!
+> You can learn more about current and upcoming features in the [GitHub Copilot Features](https://docs.github.com/en/copilot/about-github-copilot/github-copilot-features) documentation. You can also select different [models](https://docs.github.com/en/github-models) and make your own [extensions](https://github.com/features/copilot/extensions), but that's for a different lesson!
 
 ### How can I use GitHub Copilot?
 
 As you work, you'll find GitHub Copilot can help out in several places across the website and in your favorite coding environments such as VS Code, Jet Brains, and Xcode! For today's coding though, we will practice with VS Code in a preconfigured development environment known as [Codespace](https://github.com/features/codespaces).
 
-### :keyboard: Activity: Get a project intro from Copilot Chat :robot:
+### :keyboard: Activity: Get a project intro from Copilot Chat
 
 Let's start up our development environment, use copilot to learn a bit about the project, and then give it a test run.
 
@@ -43,52 +44,56 @@ Let's start up our development environment, use copilot to learn a bit about the
 
 1. In the left sidebar, click the extensions tab and verify that the `GitHub Copilot` and `Python` extensions are installed and enabled.
 
-   <img width="350" alt="image" src="https://github.com/user-attachments/assets/ef1ef984-17fc-4b20-a9a6-65a866def468" />
-
-   <img width="350" alt="image" src="https://github.com/user-attachments/assets/3040c0f5-1658-47e2-a439-20504a384f77" />
+   <img width="350" alt="copilot extension for VS Code" src="https://github.com/user-attachments/assets/ef1ef984-17fc-4b20-a9a6-65a866def468" />
 
+   <img width="350" alt="python extension for VS Code" src="https://github.com/user-attachments/assets/3040c0f5-1658-47e2-a439-20504a384f77" />
 
 1. At the top of VS Code, locate and click the **Copilot icon** to open a Copilot Chat panel.
 
+   <img width="150" alt="image" src="https://github.com/user-attachments/assets/5e64db46-95cb-415d-badc-b6b8677f10c1" />
+
+1. If this is your first, time using GitHub Copilot, you will have to accept the usage terms to continue.
+
 1. Enter the below prompt to ask Copilot to introduce you to the project.
 
-   ```txt
-   @workspace Please briefly explain the structure of this project. What should I do to run it?
-   ```
+   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   >
+   > ```prompt
+   > @workspace Please briefly explain the structure of this project.
+   > What should I do to run it?
+   > ```
 
-   > **Tip**: No need to follow Copilot's recommended steps. We already prepared the environment for you.
+   > **Note**: It is not necesesary to follow Copilot's recommended instructions. We have already prepared the environment for you.
 
 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.
 
    <img width="300" alt="image" src="https://github.com/user-attachments/assets/50b27f2a-5eab-4827-9343-ab5bce62357e" />
 
-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 the lower panel and select the **Ports** tab.
+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.
 
 1. In the list, find port `8000` and the related link. Hover over the link and select the **Open in browser** icon.
 
    ![image](https://github.com/user-attachments/assets/92d5642e-ce99-4a66-850c-2d311a673596)
 
-   > **Tip:** If the webpage doesn't open, make sure you still have the program running.
-
-### :keyboard: Activity: Use Copilot to help remember a terminal command :robot:
+### :keyboard: Activity: Use Copilot to help remember a terminal command 🙋
 
 Great work! Now that we are familiar with the app and we know it works, let's ask copilot for help starting a branch so we can do some customizing.
 
 1. If not already there, return to VS Code.
 
 1. In the bottom panel, select the **Terminal** tab. On the right side, click the plus `+` sign to create a new terminal window.
 
-   > **Tip:** This will avoid stopping the existing debug session that is hosting our web application service.
+   > **Note:** This will avoid stopping the existing debug session that is hosting our web application service.
 
-1. Within the new terminal window, `right click` and select `Copilot` then `Terminal Inline Chat`.
+1. Within the new terminal window, `right click` and select `Copilot` then `Terminal Inline Chat`. Alternately, you can use the keyboard shortcut `Ctrl + I` (windows) or `Cmd + I` (mac).
 
-   > **Pro Tip:** You can also open inline chat with the keyboard shortcut `Ctrl + I` (windows) or `Cmd + I` (mac).
+1. Let's ask Copilot to help us remember a command we have forgotten: creating a branch and publishing it
 
-1. Let's ask Copilot to help us remember a command we have forgotten, creating a branch and publishing it.
-
-   ```txt
-   Hey copilot, how can I create and publish a new Git branch?
-   ```
+   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   >
+   > ```prompt
+   > Hey copilot, how can I create and publish a new Git branch?
+   > ```
 
    > **Tip:** This is a simple example, but Copilot is great at providing more tailored commands that might involve loops, pattern matching, file modification, and more! Don't be afraid to ask Copilot for a suggestion. Just remember it is a suggestion and you should always verify it first to be safe.
 
@@ -99,17 +104,20 @@ Great work! Now that we are familiar with the app and we know it works, let's as
    git push -u origin {new_branch_name}
    ```
 
-   ```text
-   Awesome! Thanks, Copilot! Let's use the branch name "accelerate-with-copilot".
-   ```
+   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   >
+   > ```prompt
+   > Awesome! Thanks, Copilot! Let's use the
+   > branch name "accelerate-with-copilot".
+   > ```
 
    > **Tip:** If Copilot doesn't give you quite what you want, you can always continue explaining what you need. Copilot will remember the conversation history for follow-up responses.
 
 1. Now that we are happy with the command, press the `Run` button to let Copilot run it for us. No need to copy and paste!
 
 1. After a moment, look in the VS Code lower status bar, on the left, to see the active branch. It should now say `accelerate-with-copilot`. If so, you are all done with this step!
 
-1. Mona should already be busy checking your work. Give her a moment and keep watch of the comments. You will see her respond with progress info and the next lesson.
+1. Now that your branch is pushed to GitHub, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next lesson.
 
 <details>
 <summary>Having trouble? 🤷</summary><br/>
diff --git a/.github/steps/2-first-introduction.md b/.github/steps/2-first-introduction.md
@@ -20,15 +20,18 @@ In short, you can think of Copilot like a very focused coworker. To be effective
 
 ### :keyboard: Activity: Use Copilot to fix our registration bug :bug:
 
-1. Let's ask Copilot to suggest where our bug might be coming from. Open the Copilot Chat panel and ask the following.
+1. Let's ask Copilot to suggest where our bug might be coming from. Open the **Copilot Chat** panel and ask the following.
 
-   ```text
-   @workspace Students are able to register twice for an activity. Where could this bug be coming from?
-   ```
+   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   >
+   > ```prompt
+   > @workspace Students are able to register twice for an activity.
+   > Where could this bug be coming from?
+   > ```
 
-1. Now that we know the issue is in the `src/appy.py` file and the `signup_for_activity` method, let's go fix it (semi-manually). We'll start with a comment and let Copilot finish the correction.
+1. Now that we know the issue is in the `src/appy.py` file and the `signup_for_activity` method, let's follow Copilot's recommendation and go fix it (semi-manually). We'll start with a comment and let Copilot finish the correction.
 
-   1. In VS Code, select the **Navigation** tab to show the project files and open the `src/app.py` file.
+   1. In VS Code, select the file **Explorer tab** to show the project files and open the `src/app.py` file.
 
    1. Scroll near the bottom of the file and find the `signup_for_activity` method.
 
@@ -71,12 +74,11 @@ In short, you can think of Copilot like a very focused coworker. To be effective
 
    </details>
 
-### :keyboard: Activity: Let Copilot generate sample data :robot:
+### :keyboard: Activity: Let Copilot generate sample data 📋
 
-In new project developments, it's often helpful to have some realistic looking fake data for testing. Copilot is excellent at this task, so let's add some more sample activities and introduce another way to interact with Copilot: **Inline Chat**
+In new project developments, it's often helpful to have some realistic looking fake data for testing. Copilot is excellent at this task, so let's add some more sample activities and introduce another way to interact with Copilot using **Inline Chat**
 
-> [!TIP]  
-> **Inline Chat** and the **Copilot Chat** panel are very similar tools, but with slightly different automatic context. As such, while Copilot Chat is good at explaining about the project, inline chat might feel more natural for asking about a particular line or function.
+**Inline Chat** and the **Copilot Chat** panel are very similar tools, but with slightly different automatic context. As such, while Copilot Chat is good at explaining about the project, inline chat might feel more natural for asking about a particular line or function.
 
 1. If not already open, open the `src/app.py` file.
 
@@ -88,9 +90,12 @@ In new project developments, it's often helpful to have some realistic looking f
 
 1. Enter the following prompt text and press enter or the **Send and Dispatch** button.
 
-   ```text
-   Add 2 more sports related activities, 2 more artistic activities, and 2 more intellectual activities.
-   ```
+   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   >
+   > ```prompt
+   > Add 2 more sports related activities, 2 more artistic
+   > activities, and 2 more intellectual activities.
+   > ```
 
 1. After a moment, Copilot will directly start making changes to the code. The changes will be stylized differently to make any additions and removals easy to identify. Take a moment to inspect and then press the **Accept** button.
 
@@ -161,7 +166,7 @@ activities = {
 
 </details>
 
-### :keyboard: Activity: Use Copilot to describe our work :robot:
+### :keyboard: Activity: Use Copilot to describe our work 💬
 
 Nice work fixing that bug and expanding the example activities! Now let's get our work committed and pushed to GitHub, again with the help of Copilot!
 
@@ -179,7 +184,7 @@ Nice work fixing that bug and expanding the example activities! Now let's get ou
 
 1. To the right of the **Message** text box, find and click the **Generate Commit Message with Copilot** button (sparkles icon).
 
-1. Press the **Commit** button and **Sync Changes** button push your chagnes to GitHub.
+1. Press the **Commit** button and **Sync Changes** button to push your changes to GitHub.
 
 1. Wait a moment for Mona to check your work, provide feedback, and share the next lesson.
 
diff --git a/.github/steps/3-copilot-edits.md b/.github/steps/3-copilot-edits.md
@@ -37,9 +37,12 @@ In our previous steps, we used features of Copilot that require more hands-on gu
 
 1. Ask Copilot to update our project to display the current participants of activities. Wait a moment for the edit suggestions to arrive and be applied.
 
-   ```txt
-   Hey Copilot, can you please edit the area where activities are listed on the website to show what participants are already signed up for that activity.
-   ```
+   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   >
+   > ```prompt
+   > Hey Copilot, can you please edit the area where activities are
+   > listed on the website to show what participants are already signed up for that activity.
+   > ```
 
    - An extra icon has appeared next to the file names and open editor windows indicating they have suggested edits.
    - A suggested edits panel has appeared in the bottom right of the editor window providing controls to jump to the recommended changes.
@@ -57,10 +60,12 @@ In our previous steps, we used features of Copilot that require more hands-on gu
 
    </details>
 
-1. Before we simply accept the changes, please check our website again and verify everything is updated as expected. Here is an example of an updated activity card. **Important:** Your results may look slightly different!
+1. Before we simply accept the changes, please check our website again and verify everything is updated as expected. Here is an example of an updated activity card. You may need to restart the app or refresh the page.
 
    <img width="350" alt="Activity card with participant info" src="https://github.com/user-attachments/assets/59fe792e-d587-487d-8525-2548ac0a7adf" />
 
+   > **Note:** Your activity card may look different. Copilot won't always produce the same results.
+
    <details>
    <summary>Need help? 🤷</summary><br/>
    If the website is not loading, here are some things to check.
diff --git a/.github/steps/4-copilot-on-github.md b/.github/steps/4-copilot-on-github.md
@@ -1,6 +1,6 @@
 ## Step 4: Using GitHub Copilot within a pull request
 
-Congratulations! You are finished with coding for this exercise. Now it's time to merge our work. :tada: To wrap up, let's learn about two limited-access Copilot features that can speed up our pull requests!
+Congratulations! You are finished with coding for this exercise (and VS Code). Now it's time to merge our work. :tada: To wrap up, let's learn about two limited-access Copilot features that can speed up our pull requests!
 
 #### Copilot Pull Request Summaries
 
@@ -13,7 +13,7 @@ Typically, you would review your notes and commit messages then summarize them f
 
 More eyes on our work is always useful so let's ask Copilot to do a first pass before we do a normal peer review process. Copilot is great at catching common mistakes that can are fixed by simple adjustment, but please remember to use it responsibily.
 
-> [!IMPORTANT]  
+> [!NOTE]  
 > This is in **Public Preview** for organizations. [[docs]](https://docs.github.com/en/copilot/using-github-copilot/code-review/using-copilot-code-review)
 
 ### :keyboard: Activity: Summarize and review a PR with Copilot
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,7 +5,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "FastAPI: Launch Mergington",
+      "name": "Launch Mergington WebApp",
       "type": "debugpy",
       "request": "launch",
       "module": "uvicorn",
diff --git a/README.md b/README.md
@@ -3,23 +3,26 @@
 ![](../../actions/workflows/1-preparing.yml/badge.svg)
 ![](../../actions/workflows/2-first-introduction.yml/badge.svg)
 ![](../../actions/workflows/3-copilot-edits.yml/badge.svg)
-![](../../actions/workflows/4-copilot-on-github.yml/badge.svg)
+![](../../actions/workflows/4a-copilot-on-github.yml/badge.svg)
 
 _Get started using GitHub Copilot in less than an hour._
 
 ## Welcome
 
-- **Who is this for**: Developers at any experience level that are looking to speed up their code workflow
-- **What you'll learn**: We'll introduce you to several GitHub Copilot features.
-- **What you'll build**: You will work on a simple Python API and a single static page.
-- **Prerequisites**: Basic programming skills.
+- **Who is this for**: Developers at any experience level looking to accelerate their code workflow.
+- **What you'll learn**: The different ways to interact with Copilot to explain, write, debug, and develop code.
+- **What you'll build**: You will guide Copilot to update Mergington High School's extracurricular activities website.
+- **Prerequisites**:
+  - Skills exercise: [Introduction to GitHub](https://github.com/skills/introduction-to-github)
+  - Familiarity with [VS Code](https://code.visualstudio.com/)
+  - Basic coding principles
 - **How long**: This exercise takes less than one hour to complete.
 
 In this exercise, you will:
 
-1. Use a preconfigured Codespace to run VS Code in your browser
-1. Learn different ways on how to use Copilot to accelerate your coding process
-1. Use Copilot to summarize and review your pull requests
+1. Use a preconfigured Codespace to run VS Code in your browser.
+1. Learn different interaction options to develop with GitHub Copilot.
+1. Use Copilot to summarize and review your pull request.
 
 ### How to start this exercise
 
@@ -35,10 +38,11 @@ In this exercise, you will:
    - 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).
    - Scroll down and click the **Create repository** button at the bottom of the form.
 
-3. After your new repository is created, wait about 20 seconds for the exercise to be prepared.
+3. After your new repository is created, wait about 20 seconds for the exercise to be prepared and buttons updated. You will continue working from your copy of the exercise.
 
    - The **Copy Exercise** button will deactivate, changing to gray.
    - The **Start Exercise** button will activate, changing to green.
+   - You will likely need to refresh the page.
 
 4. Click **Start Exercise**. Follow the step-by-step instructions and feedback will be provided as you progress.
 

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`"version": "0.2.0",`
`6`	`6`	`"configurations": [`
`7`	`7`	`{`
`8`		`- "name": "FastAPI: Launch Mergington",`
	`8`	`+ "name": "Launch Mergington WebApp",`
`9`	`9`	`"type": "debugpy",`
`10`	`10`	`"request": "launch",`
`11`	`11`	`"module": "uvicorn",`