docs: Add additional explanations and screenshots to steps (#2)

* chore: add *.temp* to .gitignore to exclude temporary files

* fix: clarify instructions for creating a Codespace with default configuration

* fix: update Python version in devcontainer configuration to 3.13

* docs: update instructions for using Copilot Chat with codebase explanation

* feat: add port forwarding for development server in devcontainer configuration

* docs: Add additional explanations/screenshots to step1

* docs: Update comment, add ports screenshot to step 1

* docs: add example suggestion for Copilot usage in introduction step

* docs: Add extra documentation and screenshots for step 2

* docs: Update docs for step3 with screenshots

Author: FidelusAleksander

.devcontainer/devcontainer.json

@@ -1,11 +1,7 @@
 {
   "name": "Python 3",
-  "image": "mcr.microsoft.com/vscode/devcontainers/python:3.9",
-  "features": {
-    "ghcr.io/devcontainers/features/python:1": {
-      "version": "3.13"
-    }
-  },
+  "image": "mcr.microsoft.com/vscode/devcontainers/python:3.13",
+  "forwardPorts": [8000],
   "postCreateCommand": "pip install -r requirements.txt",
   "customizations": {
     "vscode": {

.github/steps/1-preparing.md

@@ -14,14 +14,10 @@ GitHub Copilot has been proven to increase developer productivity and accelerate
 
 ### :keyboard: Activity: Getting to know basic Copilot features :robot:
 
-1. Right-click the below button to open the **Create Codespace** page in a new tab.
+1. Right-click the below button to open the **Create Codespace** page in a new tab. Use the default configuration.
 
    [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1)
 
-   - The free tier of Codespaces that comes with all GitHub accounts is fine, assuming you still have minutes available.
-   - The default Codespace settings are fine.
-   - This repository will provide the additional settings and files for making your extension.
-
 1. Confirm the **Repository** field is your copy of the exercise, not the original, then click the green **Create Codespace** button.
 
    - ✅ Your copy: `/{{{full_repo_name}}}`
@@ -31,18 +27,29 @@ GitHub Copilot has been proven to increase developer productivity and accelerate
 
 1. Click the extensions sidebar tab and verify that `GitHub Copilot` extension is installed.
 
-   <!-- TODO: Add screenshot -->
+   ![image](https://github.com/user-attachments/assets/c1ddca93-723d-4c62-a309-5944e5dfc6f4)
+
 
 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, to do that type `/explain` in the Chat Window.
-   <!-- TODO: Add screenshot -->
-1. Run the project by using  `Run and Debug` section in the left sidebar of VS Code. Then head to the ports tab and open the application available on port 8000
+   Open up Copilot Chat and ask Copilot to introduce you to the project.
+
+   ```txt
+   @workspace Briefly explain the structure of the codebase in this repository.
+   ```
+
+1. Run the project by using  `Run and Debug` section in the left sidebar of VS Code.
+
+   <img width="300" alt="image" src="https://github.com/user-attachments/assets/50b27f2a-5eab-4827-9343-ab5bce62357e" />
+
+
+1. Then head to the ports tab and open the application available on port `8000`
+
+  ![image](https://github.com/user-attachments/assets/92d5642e-ce99-4a66-850c-2d311a673596)
 
-   <!-- TODO: Add screenshot -->
 
 1. Great! Now that you know what we will be working with, let's have your first interaction with Copilot.
 
-   Open up a terminal in VS Code so you won't interrupt the debug session you just started.
+   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.
 
    Next, `Right click` within the newly created terminal window, then click `Copilot` => `Terminal Inline Chat`.
 

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

@@ -26,6 +26,30 @@ There are many Copilot Features and interaction modes. In this step you will get
 
    Press `Tab` to accept your first Copilot suggestion :tada: :robot:
 
+
+   <details>
+   <summary>Example suggestion</summary><br/>
+
+   ```python
+   @app.post("/activities/{activity_name}/signup")
+   def signup_for_activity(activity_name: str, email: str):
+      """Sign up a student for an activity"""
+      # Validate activity exists
+      if activity_name not in activities:
+         raise HTTPException(status_code=404, detail="Activity not found")
+
+      # Validate student is not already signed
+      if email in activities[activity_name]["participants"]:
+         raise HTTPException(status_code=400, detail="Student is already signed up")
+      
+      activity = activities[activity_name]
+
+      # Add student
+      activity["participants"].append(email)
+      return {"message": f"Signed up {email} for {activity_name}"}
+   ```
+   </details>
+
    > **TIP**: If you would like to see other suggestions, instead of pressing `Tab`, hover over the suggestion and a small panel will show up. On it's right side click the three dots `...` and select `Open Completions Panel`
 
 
@@ -36,6 +60,7 @@ There are many Copilot Features and interaction modes. In this step you will get
    ```
 
    On the bottom part of Copilot Chat you can choose what AI Model Copilot should use. Different models can provide different results.
+   ![image](https://github.com/user-attachments/assets/2668c5f8-1f28-4361-bf07-0b67d6a4e7c4)
 
 1. You can use Copilot Chat inline to stay in the flow. It's often used when you are dealing with problems or want to understand a specific part of the code.
 
@@ -54,6 +79,9 @@ There are many Copilot Features and interaction modes. In this step you will get
    1. On the right side of the commit message window click :sparkles: to generate commit message with copilot
    1. Commit and sync your changes with the automatically generated message
 
+   ![image](https://github.com/user-attachments/assets/7d3daf4e-4125-4775-88a7-33251cd7293e)
+
+
 1. Wait a moment for the bot to check your work. You will see a comment with progress info and the next lesson.
 
    <details>

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

@@ -22,7 +22,10 @@
 
 ### :keyboard: Activity: Let's add a feature!
 
-1. In the top left part of Copilot Chat window, switch the Copilot Edits.
+1. In the top left part of Copilot Chat window, switch to Copilot Edits.
+
+ ![image](https://github.com/user-attachments/assets/0b17c5bd-d03b-41b1-b97d-624fcbf8ccd1)
+
 1. Add the following files to the working set. Use the attach button in the bottom left corner of Copilot Edits view.
     - `src/static/app.js`
     - `src/static/index.html`
@@ -35,7 +38,18 @@
 
     Copilot will generate inline edits for you. You can accept them or if this wasn't what you were hoping for, provide Copilot additional instructions.
 
-   > **TIP:** On the bottom part of Copilot Edits you can choose what AI Model Copilot should use. Different models can provide different results.
+    > **TIP:** On the bottom part of Copilot Edits you can choose what AI Model Copilot should use. Different models can provide different results.
+
+   <details>
+   <summary>Having trouble? 🤷</summary><br/>
+
+   Remember, to add the relevant files to the working set.
+    
+    
+   ![image](https://github.com/user-attachments/assets/bdd7318b-50e3-46d0-88ce-7615f45ce334)
+
+    
+   </details>
 
 1. Head back to the website and see your changes!
     <details>

.gitignore

@@ -1,3 +1,5 @@
+*.temp*
+
 # Compiled source #
 ###################
 *.com