fix: Update terms and images to latest versions (#38)

Author: chriswblake

.github/steps/1-preparing.md

@@ -17,8 +17,8 @@ GitHub Copilot has been proven to increase developer productivity and accelerate
 Your most common interactions will likely be:
 
 - **Inline suggestions**: As you type, Copilot uses the nearby context to suggest code directly in your editor. This will be a familiar interaction if you have used code completion tools like [Intellisense](https://code.visualstudio.com/docs/editor/intellisense), except that the completions may be entire functions.
-- **Copilot Chat**: A dedicated chat panel that lets you ask coding related questions. This will feel familiar if you have used online AI assistant chats. The big difference however, is that your project files will provide automatic context to provide tailored responses.
-- **Copilot Edits**: Similar to Copilot Chat, but less conversational and more big picture or goal oriented.
+- **Copilot - Ask Mode**: A dedicated chat panel that lets you ask coding related questions. This will feel familiar if you have used online AI assistant chats. The big difference however, is that your project files will provide automatic context to provide tailored responses.
+- **Copilot - Edit Mode**: Similar to Copilot Chat, but less conversational. Copilot will make changes to your files to implement your request.
 
 > [!TIP]
 > 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!
@@ -52,11 +52,11 @@ Let's start up our development environment, use copilot to learn a bit about the
 
    <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. If this is your first time using GitHub Copilot, you will need to accept the usage terms to continue.
 
 1. Enter the below prompt to ask Copilot to introduce you to the project.
 
-   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
    >
    > ```prompt
    > @workspace Please briefly explain the structure of this project.
@@ -92,9 +92,9 @@ Great work! Now that we are familiar with the app and we know it works, let's as
 
 1. Within the new terminal window use the keyboard shortcut `Ctrl + I` (windows) or `Cmd + I` (mac) to bring up **Copilot's Terminal Inline Chat**.
 
-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.
 
-   > <img width="13px" src="http://github.com/%3C/span%3Ehttps://%3Cspan%20class="x x-first x-last">github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
    >
    > ```prompt
    > Hey copilot, how can I create and publish a new Git branch?
@@ -109,7 +109,7 @@ 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}
    ```
 
-   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
    >
    > ```prompt
    > Awesome! Thanks, Copilot! Let's use the

.github/steps/2-first-introduction.md

@@ -23,9 +23,9 @@ In short, you can think of Copilot like a very specialized coworker. To be effec
 
 ### :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 in **Ask mode** and ask the following.
 
-   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
    >
    > ```prompt
    > @workspace Students are able to register twice for an activity.
@@ -100,7 +100,7 @@ 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.
 
-   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
    >
    > ```prompt
    > Add 2 more sports related activities, 2 more artistic

.github/steps/3-copilot-edits.md

@@ -2,7 +2,7 @@
 
 In our previous steps, we used features of Copilot that require more hands-on guidance and they produced mostly localized results. Now, we will explore Copilot Edits, a feature that allows working more holistically on our repo.
 
-[Copilot Edits](https://code.visualstudio.com/docs/copilot/copilot-edits) is an AI-powered code editing session to make changes across **multiple files** using **natural language**, and applies the edits directly in the editor, where you can review them in-place, with the full context of the surrounding code.
+[Copilot - Edit Mode](https://code.visualstudio.com/docs/copilot/copilot-edits) is an AI-powered code editing session to make changes across **multiple files** using **natural language**, and applies the edits directly in the editor, where you can review them in-place, with the full context of the surrounding code.
 
 #### Key features
 
@@ -23,21 +23,21 @@ In our previous steps, we used features of Copilot that require more hands-on gu
 
 1. If the Copilot Chat panel is not visible, please reopen it.
 
-1. In the top left part of Copilot Chat window, click the **Copilot Edits** icon to switch modes.
+1. At the bottom of Copilot Chat window, use the dropdown to switch to **Edit** mode.
 
-   <img width="200" alt="image" src="https://github.com/user-attachments/assets/0b17c5bd-d03b-41b1-b97d-624fcbf8ccd1" />
+   <img width="350" alt="image" src="https://github.com/user-attachments/assets/646fc94a-7d60-4821-b9cf-9ec6f4fd03d7" />
 
 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.
 
    - `src/static/app.js`
    - `src/static/index.html`
    - `src/static/styles.css`
 
-   > **Tip:** You can also use the **Attach files...** button to provide other sources of context items, like a GitHub issue, the entire codebase, or the results of a terminal window.
+   > **Tip:** You can also use the **Add Context...** button to provide other sources of context items, like a GitHub issue, the entire codebase, or the results of a terminal window.
 
 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.
 
-   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
    >
    > ```prompt
    > Hey Copilot, can you please edit the activity cards to add a participants section.

.github/steps/3b-copilot-agent-mode.md

@@ -18,13 +18,13 @@ Now, let's give **Agent** mode a try! 👩‍🚀
 
 Let's experiment with some more open-ended requests that will add more functionality to our web application. Remember, AI assistants often produce different results, even if the same prompt is provided. If you don't get the desired results, you can try other models or provided followup feedback to refine the results.
 
-1. Open the **Copilot** side panel and use the dropdown menu to switch to **Agent** mode.
+1. Open the **Copilot** chat panel and use the dropdown menu to switch to **Agent** mode.
 
-   <img width="250" alt="image" src="https://github.com/user-attachments/assets/201e08ab-14a0-48bf-824e-ba4f8f43f8ab" />
+   <img width="250" alt="image" src="https://github.com/user-attachments/assets/8c537e2a-d89a-4908-8d35-77c7f0830805" />
 
 1. Time for our test! Let's ask Copilot to add functionality for removing participants.
 
-   > <img width="13px" src="https://github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
    >
    > ```prompt
    > #codebase Please add a delete icon next to each participant and hide the bullet points.
@@ -38,7 +38,7 @@ Let's experiment with some more open-ended requests that will add more functiona
 
 1. Ask Copilot to fix a registration bug.
 
-   > <img width="13px" src="http://github.com/%3C/span%3Ehttps://%3Cspan%20class="x x-first x-last">github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
    >
    > ```prompt
    > #codebase I've noticed there seems to be a bug.
@@ -63,7 +63,7 @@ Just for fun, let's try something even more difficult and open-ended to see what
 
 1. Ask Copilot to install a local database service.
 
-   > <img width="13px" src="http://github.com/%3C/span%3Ehttps://%3Cspan%20class="x x-first x-last">github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
    >
    > ```prompt
    > Please install a local mongodb server for development reasons.
@@ -76,7 +76,7 @@ Just for fun, let's try something even more difficult and open-ended to see what
 
 1. Ask Copilot to change our app to use the database service. 🤯
 
-   > <img width="13px" src="http://github.com/%3C/span%3Ehttps://%3Cspan%20class="x x-first x-last">github.com/user-attachments/assets/98fd5d2e-ea29-4a4a-9212-c7050e177a69" /> **Prompt**
+   > ![Static Badge](https://img.shields.io/badge/-Prompt-text?style=social&logo=github%20copilot)
    >
    > ```prompt
    > #codebase I don't like that we are storing the data in memory.