Course Setup: VS Code page was adjusted with feedback

src/content/docs/learning-course/getting-started/vscode-overview.mdx

@@ -9,54 +9,92 @@ next: learning-course/learning-course/getting-started/forking-and-cloning
 
 Visual Studio Code (VS Code) is a free and open source code editor created by Microsoft.
 It's available on Windows, macOS, and Linux and can support virtually every programming language through available extensions on its Extension Marketplace.
-Some main features include IntelliSense which is a code completion tool and it allows for you to quickly look at documentation for a specific command.
 It also has integrated Git support which lets you stage, commit, push, pull, and view diffs from the Source Control panel without leaving the editor.
 
----
+In a previous page, you downloaded the WPILib tools which downloads WPILib VSCode.
+In FRC, this is the VS Code that you want to use.
+WPILib VS Code is installed with the other WPILib tools and is it's own separate application.
+If you've installed VSCode before, make sure to use the WPILib specific one to program your robot.
 
-## Welcome Screen
+The WPILib VS Code has a different icon compared to VS Code.
+As shown in the photo, the WPILib VSCode has the WPILib logo while VS Code is the blue logo.
 
 <ContentFigure
-    width="564"
-    height="300"
-    alt="VS Code welcome screen (credit: WPILib docs)"
-    src="/learning-course/getting-started/vscode-overview/IMG_0156.webp"
+    width="200px"
+    height="200px"
+    alt="VS Code interface"
+    src="/learning-course/getting-started/vscode-overview/wpilib-vscode.webp"
 />
 
-When you first open up VS Code, you are greeted with a welcome screen that has a few options.
-It lets you quickly customize settings and also lets you watch some tutorial videos.
-It also has options to create a file, open a file, open a project, and clone a Git repository.
+## Welcome Screen
+
+When you first open up WPILib VS Code, you are greeted with a welcome screen that has a few options.
+The most helpful options are:
+
+1. New file
+2. Open file
+3. Open folder
+
+New File creates a new file.
+Open file lets you open a file from your computer.
+Open folder lets you open a folder from your computer.
+This will be the most helpful when going through each stage of this website.
+
+<ContentFigure
+    width="564px"
+    height="300px"
+    alt="VS Code welcome page"
+    src="/learning-course/getting-started/vscode-overview/welcomescreen.webp"
+/>
 
 ---
 
+These options are always available by selecting "File" on the top right of the screen.
+This will bring down a new window and you can select the needed option.
+
+<ContentFigure
+    width="564px"
+    height="300px"
+    alt="VS Code welcome page with the file dropdown shown"
+    src="/learning-course/getting-started/vscode-overview/welcomescreen2.webp"
+/>
+
+<Aside type="note">
+    When opening a new folder, VS Code will have a message that asks "Do you
+    trust the authors of the files in this folder?" For this website, you can
+    click "Yes, I trust the authors".
+</Aside>
+
 ## Navigating the Interface
 
 VS Code's layout is categorized into a few key regions:
 
-- The **Activity Bar** which is in the far left, consists of vertical icons which can be used to switch between the major views (Explorer, Search, Source Control, Run & Debug, Extensions).
-- Next, the **Side Bar** which is next to the activity bar shows details for the selected view (for example: file tree in Explorer).
-- After that, the **Editor** is the center area.
-  The editor is star of the show and it is where you can view and edit files.
-- Next, the **Panel** is at the bottom of the screen.
-  It has four main views, which are the Terminal, Problems, Output, and Debug Console.
-- Finally, the **Command Palette** is accesed through `Ctrl+Shift+P` / `Cmd+Shift+P` and it allows for you to search and run any command in VS Code.
+1. **Activity Bar** which is in the far left, consists of vertical icons which can be used to switch between the major views (Explorer, Search, Source Control, Run & Debug, Extensions).
+2. **Side Bar** which is next to the activity bar shows details for the selected view (for example: file tree in Explorer).
+3. **Editor** is the center area.
+   The editor is star of the show and it is where you can view and edit files.
+4. **Panel** is at the bottom of the screen.
+   It has four main views, which are the Terminal, Problems, Output, and Debug Console.
+5. **Command Palette** is accessed through `Ctrl+Shift+P` / `Cmd+Shift+P` and it allows for you to search and run any command in VS Code.
 
 <ContentFigure
-    width="564"
-    height="300"
+    width="564px"
+    height="300px"
     alt="VS Code interface"
-    src="/learning-course/getting-started/vscode-overview/IMG_0157.webp"
+    src="/learning-course/getting-started/vscode-overview/vscode-explained.webp"
 />
 
-**Useful keyboard shortcuts:**
+### WPILib Command Palette
 
-- `Ctrl+P` / `Cmd+P` is Quick Open which allows you to open any file by name
-- `Ctrl+Shift+P` / `Cmd+Shift+P` opens the Command Palette
-- `` Ctrl+` `` allows you to quickly open and close the integrated terminal
-- `Ctrl+B` / `Cmd+B` allows you to toggle sidebar visibility
-- `Ctrl+Tab` allows for you switch between the open editors
+One key feature of WPILib VS Code is the commands available that are specific to FRC, such as **Build** which lets you compile the robot code and check for errors on-device, and **Deploy** which builds the code and sends it over the network connection with the robot to Systemcore.
+These commands are available through the Command Palette.
 
----
+<ContentFigure
+    width="564px"
+    height="300px"
+    alt="WPILib Commands Palette"
+    src="/learning-course/getting-started/vscode-overview/commandpalette.webp"
+/>
 
 ## Saving and Opening Files
 
@@ -73,26 +111,25 @@ VS Code's layout is categorized into a few key regions:
 - **Save as (new name/location):** `Ctrl+Shift+S` / `Cmd+Shift+S`
 - **Save all open files:** `Ctrl+K S` / `Cmd+K S`
 
-<Aside type="tip">**Auto Save:** can be enabled via `File > Auto Save` which saves your work automatically after a pause, making it way harder to lose your work. </Aside>
+<Aside type="tip">**Auto Save** can be enabled via `File > Auto Save` which saves your work automatically after a pause, making it way harder to lose your work. </Aside>
 
 A dot on a file's tab indicates **unsaved changes**; it turns into an "X" (close icon) once the file is saved.
 
----
-
-## WPILib VS Code
-
-For FRC, you use a separate version of VS Code developed by WPILib which is part of the WPILib installer.
-If you already have VS Code installed on your computer, the WPILib VS Code installs seperately with the WPILib extension already installed and some settings changed.
-
-### WPILib Commands
-
-One key feature of WPILib VS Code and the WPILib extension is the commands available that are specific to FRC, such as **Build** which lets you compile the robot code and check for errors on-device, and **Deploy** which builds the code and sends it over the network connection with the robot to Systemcore.
-
 <ContentFigure
-    width="564"
-    height="300"
-    alt="WPILib Commands"
-    src="/learning-course/getting-started/vscode-overview/IMG_0155.webp"
+    width="600px"
+    height="600px"
+    alt="Left side shows the file DriveTrain.java with a dot next to the name, right side shows the same file with an X next to the name instead."
+    src="/learning-course/getting-started/vscode-overview/savedunsaved.webp"
 />
 
-To access the WPILib commands, which are shows in the large red box on the screenshot, you can either open the command palette using the keyboard shortcut `Ctrl+Shift+P` / `Cmd+Shift+P`, or by clicking the WPILib logo in the top right corner, where the arrow is pointing to on the screenshot.
+## Keyboard shortcuts
+
+VS Code has many useful keyboard shortcuts.
+They also have a [list that you can refer to.](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)
+However, the most useful ones are:
+
+- `Ctrl+P` / `Cmd+P` is Quick Open which allows you to open any file by name
+- `Ctrl+Shift+P` / `Cmd+Shift+P` opens the Command Palette
+- `` Ctrl+` `` allows you to quickly open and close the integrated terminal
+- `Ctrl+B` / `Cmd+B` allows you to toggle sidebar visibility
+- `Ctrl+Tab` allows for you switch between the open editors