Merge pull request #194 from microsoft/csharp-visuals

fix: remove image dimensions from README.md for better responsiveness

Author: scubaninja

Using-GitHub-Copilot-with-CSharp/README.md

@@ -57,7 +57,7 @@ To get started:
 1. Click the Copilot Chat icon in the top-right corner of the Codespace window:
 
 <div align="left">
-<img src="./images/001-chat.jpg" alt="Open GitHub Copilot Chat" width="500" height="300">
+<img src="./images/001-chat.jpg" alt="Open GitHub Copilot Chat">
 </div>
 
 2. Instead of manually exploring the BackEnd and Front folders, try asking Copilot for an overview. In the chat pane, type '/' to view available slash commands — these offer quick, structured ways to interact with Copilot.
@@ -73,13 +73,13 @@ To get started:
 3. In lieu of using natural language, type `/explain` into the chat pane. The output from GitHub Copilot will go into details of how the project is structured, including further information of the Frontend and Backend details.
 
 <div align="left">
-<img src="./images/002explainoutput.gif" alt="Output of /Explain" width="500" height="300">
+<img src="./images/002explainoutput.gif" alt="Output of /Explain">
 </div>
 
 4. As a visual learner, you can ask GitHub Copilot to 'create a diagram of the workflow of the application'. This could be saved into a README for further documentation.
 
 <div align="left">
-<img src="./images/movingdiagram.gif" alt="Output of application diagram" width="500" height="300">
+<img src="./images/movingdiagram.gif" alt="Output of application diagram">
 </div>
 
 In the above exercises we achieved the following: 
@@ -91,13 +91,13 @@ In the above exercises we achieved the following:
 1. Ask GitHub Copilot in the chat pane to "run and debug" the backend project (you can also do this from the 'run and debug' panel in the editor). Start Debugging the selected project.
 
 <div align="left">
-<img src="./images/003RunBackEndProject.jpg" alt="Run and Debug in the Panel" width="300" height="300">
+<img src="./images/003RunBackEndProject.jpg" alt="Run and Debug in the Panel">
 </div>
 
 2. The BackEnd project for our Weather API will now be running in port 8080. If you used Copilot to Run and Debug, it will output the URL for you in the chat pane. Simply click the text and it will open a new tab with the published URL. Ensure that `/weatherforecast` is in the published URL. 
 
 <div align="left">
-<img src="./images/004rundebugURL.jpg" alt="Run and Debug Output" width="300" height="500">
+<img src="./images/004rundebugURL.jpg" alt="Run and Debug Output">
 </div>
 
 If the URL is not loading properly, check the format and use the below format for the final URL:
@@ -109,7 +109,7 @@ https://< your url>.app.github.dev/weatherforecast
 **NOTE:** If you chose to run and debug the application from the run and debug panel, you will see the URL for the website in the _Ports_ tab in the editor:
 
 <div align="left">
-<img src="./images/005ports.jpg" alt="port view in the editor" width="500" height="300">
+<img src="./images/005ports.jpg" alt="port view in the editor">
 </div>
 
 1. In this next step we want to refactor some code and generate a new record for our Weather API. The goal is to add a new record that includes the name of the city. We are going to achieve this by asking Copilot directly from the file using code comments. From the file pane, navigate to the following path `SampleApp\BackEnd\Program.cs` and open `Program.cs`. Navigate to the end of the file and type in (or copy):
@@ -121,13 +121,13 @@ https://< your url>.app.github.dev/weatherforecast
 The output should be similar to this: 
 
 <div align="left">
-<img src="./images/006internalrecord.jpg" alt="changes to existing record" width="500" height="300">
+<img src="./images/006internalrecord.jpg" alt="changes to existing record">
 </div>
 
 4. Now we want to use the inline feature of Copilot. Using the inline feature we can focus on the code in front of us and make progressive changes as needed in our code base. Next, we will create a new C# class by creating a new file under the `Backend` folder: `SampleApp\BackEnd\Customer.cs`. 
 
 <div align="left">
-<img src="./images/007customerfile.png" alt="New file customer.cs" width="500" height="300">
+<img src="./images/007customerfile.png" alt="New file customer.cs">
 </div>
 
 From the top of the editor, press `CTRL + I` to open the inline chat and type (or copy) in: 
@@ -144,7 +144,7 @@ From the top of the editor, press `CTRL + I` to open the inline chat and type (o
 Review the suggestions from Copilot and verify the output. **Note:** It is important to always verify the output from Copilot.
 
 <div align="left">
-<img src="./images/008regexvalid.jpg" alt="Validate Regex" width="500" height="300">
+<img src="./images/008regexvalid.jpg" alt="Validate Regex">
 </div>
 
 6. You can further highlight the method and ask inline (or select `CTRL + Shift + I`) to open chat and ask Copilot 'Explain what IsValidEmail() does'. This provides another way to interact with Copilot, verify it's output and to further understand the code that is written.
@@ -154,7 +154,7 @@ Review the suggestions from Copilot and verify the output. **Note:** It is impor
 **Note:** In the case that you do not see [Next Edit Suggestions](https://code.visualstudio.com/blogs/2025/02/12/next-edit-suggestions) appear in your editor, check that they are enabled in your editor. 
 
 <div align="left">
-<img src="./images/NextEdit.gif" alt="Output of /Explain" width="500" height="300">
+<img src="./images/NextEdit.gif" alt="Output of /Explain">
 </div>
 
 In the above exercises we achieved the following: 
@@ -174,7 +174,7 @@ In the above exercises we achieved the following:
 1. Open GitHub Copilot Chat. Notice in the text box you can 'add context', which allows you to attach files, folders and other items to the context of Copilot so that it can better understand your codebase. Agent mode should be selected by default. You have the capability to choose your model as well. Also note, the open tab `Program.cs` is being referenced for context. 
 
 <div align="left">
-<img src="./images/009agentview.jpg" alt="Output of /Explain" width="500" height="300">
+<img src="./images/009agentview.jpg" alt="Output of /Explain">
 </div>
 
 2. Give Agent mode a detailed prompt. For this example we are going to ask Copilot to make several improvements to our project. Copy and paste the prompt below into the Chat window.
@@ -191,19 +191,19 @@ In the above exercises we achieved the following:
 When executing in Agent mode, Copilot will take a bit longer to work through all of the tasks. It will first parse your intent from the prompt above. It will plan and execute the various tasks. 
 
 <div align="left">
-<img src="./images/010agentbackimplement.jpg" alt="Output Agent Mode Implementation" width="500" height="300">
+<img src="./images/010agentbackimplement.jpg" alt="Output Agent Mode Implementation">
 </div>
 
 But where Agent mode really shines is that it will iterate on its own output until it resolves errors and reaches a working solution. As agent mode is running, we can see it is running tests to check and verify its own code:
 
 <div align="left">
-<img src="./images/agentmodetests.gif" alt="Output Agent Mode Implementation" width="500" height="300">
+<img src="./images/agentmodetests.gif" alt="Output Agent Mode Implementation">
 </div>
 
 While Agent Mode is working, we can also view that it has created documentation per our requirements outlined in the tasks that it was given: 
 
 <div align="left">
-<img src="./images/011agentmodedocs.jpg" alt="Output Agent Mode Implementation" width="500" height="300">
+<img src="./images/011agentmodedocs.jpg" alt="Output Agent Mode Implementation">
 </div>
 
 For this step in the workshop, agent mode should have taken several minutes to complete your tasks. Review the various changes and confirm that they have achieved all of the given output. With Agent mode, it also outputs what changes were made. The following summary of changes that were made are summarized below: