Adjustments to make it more beginner and non-developer friendly (#3)

Author: chriswblake

.devcontainer/devcontainer.json

@@ -5,7 +5,11 @@
   "postCreateCommand": "pip install -r requirements.txt",
   "customizations": {
     "vscode": {
-      "extensions": ["GitHub.copilot"]
+      "extensions": [
+        "GitHub.copilot",
+        "ms-python.python",
+        "ms-python.debugpy"
+      ]
     }
   }
 }

.github/steps/1-preparing.md

@@ -1,18 +1,33 @@
-## Step 1: Preparing
+## Step 1: Hello Copilot
 
-Welcome to **"Accelerate with GitHub Copilot"** exercise! :robot:
+Welcome to your **"Accelerate 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 :student:
+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. 🎻 ⚽️ ♟️
 
 ### What is GitHub Copilot?
 
 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/)
 
+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 be familiar if you have used only AI assistant chats. The big difference however, is that your files can provide automatic context for copilot to provide tailored responses.
+
+> [!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 those are different lessons!
+
 ### How can I use GitHub Copilot?
 
-### :keyboard: Activity: Getting to know basic Copilot features :robot:
+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, 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:
+
+Let's start up our development environment, use copilot to learn a bit about the project, and then give it a test run.
 
 1. Right-click the below button to open the **Create Codespace** page in a new tab. Use the default configuration.
 
@@ -25,49 +40,81 @@ GitHub Copilot has been proven to increase developer productivity and accelerate
 
 1. Wait a moment for Visual Studio Code to load in your browser.
 
-1. Click the extensions sidebar tab and verify that `GitHub Copilot` extension is installed.
+1. In the left sidebar, click the extensions tab and verify that the `GitHub Copilot` and `Python` extensions are installed and enabled.
 
    ![image](https://github.com/user-attachments/assets/c1ddca93-723d-4c62-a309-5944e5dfc6f4)
 
+   <!-- Change above image to also display the python and python debugger extensions. -->
+
+1. At the top of VS Code, locate and click the **Copilot icon** to open a Copilot Chat panel.
 
-1. Search for the Copilot Icon on the top right section of your editor.
-   Open up Copilot Chat and ask Copilot to introduce you to the project.
+1. Enter the below prompt to ask Copilot to introduce you to the project.
 
    ```txt
-   @workspace Briefly explain the structure of the codebase in this repository.
+   @workspace Please briefly explain the structure of this project. What should I do to run it?
    ```
 
-1. Run the project by using  `Run and Debug` section in the left sidebar of VS Code.
+   > **Tip**: No need to follow these steps. The environment is already configured.
+
+1. Now that we know a bit more about the project, let's actually try runnning it! In the left sidebar, select the `Run and Debug` tab and then press the **Start Debuggin** 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. 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)
 
-1. Then head to the ports tab and open the application available on port `8000`
+   > **Tip:** If the webpage doesn't open, make sure you still have the program running.
 
-  ![image](https://github.com/user-attachments/assets/92d5642e-ce99-4a66-850c-2d311a673596)
+### :keyboard: Activity: Use Copilot to help remember a terminal command :robot:
 
+Great work! Now that you are familiar with our app, let's ask copilot for helping starting a branch so we can do some customizing.
 
-1. Great! Now that you know what we will be working with, let's have your first interaction with Copilot.
+1. If not already there, return to VS Code.
 
-   Open up a terminal a new terminal window in VS Code so you won't interrupt the debug session you just started in the current one.
+1. In the bottom panel, select the **Terminal** tab. On the right side, click the plus `+` sign to create a new terminal window.
 
-   Next, `Right click` within the newly created terminal window, then click `Copilot` => `Terminal Inline Chat`.
+   > **Tip:** This will avoid stopping the existing debug session that is hosting our web application service.
 
-   This feature can help you with any shell commands, in our case let's ask Copilot
+1. Within the new terminal window, `right click` and select `Copilot` then `Terminal Inline Chat`.
+
+   > **Pro Tip:** You can also open inline chat with the keyboard shortcut `Ctrl + I` (windows) `Cmd + I` (mac).
+
+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? The branch should be named accelerate-with-copilot
+   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 suggestion and you should always verify it first to be safe.
+
+1. Copilot probably gave us a command like the following. Rather than manually modify it, let's respond back to tell Copilot to use a particular name.
+
+   ```bash
+   git checkout -b {new_branch_name}
+   git push -u origin {new_branch_name}
+   ```
+
+   ```text
+   Awesome! Thanks, Copilot! Let's use the branch name "accelerate-with-copilot".
    ```
 
-   Copilot will provide you with a list of commands that it thinks you should run. If something feels off, you can Ask Copilot to fix or customize the commands further and when you are ready, press `Run` and Copilot will run the commands for you in your terminal!
+   > **Tip:** If something is incorrect in the response, you can always continue explaining what you need. Copilot will remember the conversation history in 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. Wait a moment for the bot to check your work. You will see a comment with progress info and the next lesson.
+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.
 
-   <details>
-   <summary>Having trouble? 🤷</summary><br/>
+<details>
+<summary>Having trouble? 🤷</summary><br/>
 
-   If you don't get feedback, here are some things to check:
+If you don't get feedback, here are some things to check:
 
-   - Make sure your created the branch with the exact name `accelerate-with-copilot`. No prefixes or suffixes.
+- Make sure your created the branch with the exact name `accelerate-with-copilot`. No prefixes or suffixes.
+- Make sure the branch was indeed published to your repository.
 
-   </details>
+</details>