Jearleycha main/winui first app tutorial (#5100)

* move step 2 Enable Developer Mode to step 1 and step 1 Install Visual Studio to step 2. Set Required workloads and components to 2.2. Identified link to download to the button.

* add more context for new developers, swap two steps in installation steps, add solution explorer content, update solution explore image and file table to include numbers, add how to restart app content, removed event handeler and review ref docs for StackPanel from Recap section

* Fix typo in Visual Studio download instructions

* Fix formatting and minor text adjustments

---------

Co-authored-by: Jessica Earley-Cha <[email protected]>
Co-authored-by: John Kennedy <[email protected]>

Author: 3 people

hub/apps/get-started/start-here.md

@@ -16,21 +16,36 @@ Welcome to Windows app development. This guide will take you through the steps n
 > [Microsoft Copilot](https://copilot.microsoft.com) is a great resource if you have questions about getting started writing Windows apps.
 
 
-## 1. Install Visual Studio
+## 1. Enable Developer Mode
+
+Windows has a special mode for developers that adjusts security settings in order to let you run the apps you're working on. You'll need to enable Developer Mode before you can build, deploy, and test your app using Visual Studio.
+
+> [!TIP]
+> If you don't enable it now, you'll be prompted to enable it when you try to build your app in Visual Studio.
+
+To enable Developer Mode:
+
+* Open Windows Settings and navigate to the **[System > For developers](ms-settings:developers)** page.
+* Toggle the Developer Mode switch to **On** and confirm your choice in the confirmation dialog.
+
+For more information about Developer Mode, see [Enable your device for development](/windows/apps/get-started/enable-your-device-for-development).
+
+
+## 2. Install Visual Studio
 
 You'll use [Visual Studio](/visualstudio/ide/), Microsoft's comprehensive integrated development environment (IDE), to create your WinUI app. It's the preferred development tool of many Windows developers and it will help you write, debug, and deploy your apps. The project templates in Visual Studio will quickly get you started with projects for Windows and many other platforms.
 
 > [!TIP]
 > Before installing these tools, make sure your development computer meets the [system requirements for Windows app development](../windows-app-sdk/system-requirements.md).
 
-Use this link to download and install the latest Visual Studio. The installer will walk you through the steps, but if you find you need detailed instructions, see [Install Visual Studio](/visualstudio/install/install-visual-studio).
+Use the link below to download and install the latest Visual Studio. The installer will walk you through the steps, but if you find you need detailed instructions, see [Install Visual Studio](/visualstudio/install/install-visual-studio).
 
 > [!div class="button"]
 > [Download Visual Studio](https://visualstudio.microsoft.com/downloads/)
 
 The free Visual Studio Community Edition includes everything you need to create your apps. If you're working with a development team or enterprise, you might need Visual Studio Professional or Visual Studio Enterprise. See [What is Visual Studio?](/visualstudio/get-started/visual-studio-ide) for more info.
 
-### Required workloads and components
+### 2.2 Required workloads and components
 
 While installing Visual Studio, you need to install the workloads and components required for developing with WinUI and the Windows App SDK. After installation, you can open the Visual Studio Installer app and select **Modify** to add workloads and components.
 
@@ -57,19 +72,6 @@ On the **Workloads** tab of the Visual Studio Installer app, select the followin
 
 ---
 
-## 2. Enable Developer Mode
-
-Windows has a special mode for developers that adjusts security settings in order to let you run the apps you're working on. You'll need to enable Developer Mode before you can build, deploy, and test your app using Visual Studio.
-
-> [!TIP]
-> If you don't enable it now, you'll be prompted to enable it when you try to build your app in Visual Studio.
-
-To enable Developer Mode:
-
-* Open Windows Settings and navigate to the **[System > For developers](ms-settings:developers)** page.
-* Toggle the Developer Mode switch to **On** and confirm your choice in the confirmation dialog.
-
-For more information about Developer Mode, see [Enable your device for development](/windows/apps/get-started/enable-your-device-for-development).
 
 ## 3. Create and launch your first WinUI app
 

hub/apps/how-tos/hello-world-winui3.md

@@ -47,29 +47,32 @@ This separation of **business logic** and **presentation** concerns lets you bin
 
 ### The project's file structure
 
-Let's review the project's file structure before making code changes.
+Let's review the project's file structure before making code changes. This is located in the [Solution Explorer](/visualstudio/ide/use-solution-explorer).
+
+> [!TIP]
+> To locate features like the Solution Explorer, click on Search on navigation bar and use the Feature Search option.  :::image type="content" source="images/hello-world/feature-search.png" alt-text="Feature Search":::
 
 The project's file structure currently looks like this:
 
 :::image type="content" source="images/hello-world/expanded-file-structure.png" alt-text="File structure overview":::
 
 This table describes the files, starting from the top and working down:
 
-| Item | Description |
+| File Name and <br> Image Reference Number | Description |
 |--|--|
-| `Solution 'Hello World'` | This is a **solution file**, a logical container for your **projects**. Projects are often apps, but they can also be supporting class libraries. |
-| `Hello World` | This is a **project file**, a logical container for your app's files. |
-| `Dependencies` | Your app depends on **frameworks** (like [.NET](/dotnet/fundamentals/) and the [Windows SDK](https://developer.microsoft.com/windows/downloads/windows-sdk/)) and **packages** (like [Windows App SDK](https://www.nuget.org/packages/Microsoft.WindowsAppSDK/#versions-body-tab)). As you introduce more sophisticated functionality and third-party libraries into your app, additional dependencies will appear here. |
-| `Properties` | By convention, WinUI 3 projects place publish profiles and launch configuration files in this folder. |
-| `PublishProfiles` | Your **publish profiles** specify your app's publishing configuration across a variety of platforms. |
-| `launchSettings.json` | This file lets you configure **launch profiles** that can be used when running your app via `dotnet run`. |
-| `Assets` | This folder contains your app's logo, images, and other media assets. |
-| `app.manifest` | This app manifest file contains configuration related to the way that Windows displays your app when installed on user devices. |
-| `App.xaml` | This markup file specifies the shared, globally accessible resources that your app depends on. |
-| `App.xaml.cs` | This code-behind file represents the entry point to your app's business logic. It's responsible for creating and activating an instance of your `MainWindow`. |
-| `MainWindow.xaml` | This markup file contains the presentation concerns for your app's main window. |
-| `MainWindow.xaml.cs` | This code-behind file contains the business logic concerns associated with your app's main window. |
-| `Package.appxmanifest` | This [package manifest file](/uwp/schemas/appxpackage/uapmanifestschema/generate-package-manifest) lets you configure publisher information, logos, processor architectures, and other details that determine how your app appears in the Windows Store. |
+| `Solution 'Hello World'`<br> 1. | This is a **solution file**, a logical container for your **projects**. Projects are often apps, but they can also be supporting class libraries. |
+| `Hello World` <br> 2. | This is a **project file**, a logical container for your app's files. |
+| `Dependencies` <br> 3. | Your app depends on **frameworks** (like [.NET](/dotnet/fundamentals/) and the [Windows SDK](https://developer.microsoft.com/windows/downloads/windows-sdk/)) and **packages** (like [Windows App SDK](https://www.nuget.org/packages/Microsoft.WindowsAppSDK/#versions-body-tab)). As you introduce more sophisticated functionality and third-party libraries into your app, additional dependencies will appear here. |
+| `Properties` <br> 4. | By convention, WinUI 3 projects place publish profiles and launch configuration files in this folder. |
+| `PublishProfiles` <br> 5. | Your **publish profiles** specify your app's publishing configuration across a variety of platforms. |
+| `launchSettings.json` <br> 6. | This file lets you configure **launch profiles** that can be used when running your app via `dotnet run`. |
+| `Assets` <br> 7. | This folder contains your app's logo, images, and other media assets. |
+| `app.manifest` <br> 8. | This app manifest file contains configuration related to the way that Windows displays your app when installed on user devices. |
+| `App.xaml` <br> 9. | This markup file specifies the shared, globally accessible resources that your app depends on. |
+| `App.xaml.cs` <br> 10. | This code-behind file represents the entry point to your app's business logic. It's responsible for creating and activating an instance of your `MainWindow`. |
+| `MainWindow.xaml` <br> 11. | This markup file contains the presentation concerns for your app's main window. |
+| `MainWindow.xaml.cs` <br> 12. | This code-behind file contains the business logic concerns associated with your app's main window. |
+| `Package.appxmanifest` <br> 13. | This [package manifest file](/uwp/schemas/appxpackage/uapmanifestschema/generate-package-manifest) lets you configure publisher information, logos, processor architectures, and other details that determine how your app appears in the Windows Store. |
 
 ## Display "Hello world!"
 
@@ -112,7 +115,9 @@ public sealed partial class MainWindow : Window
 }
 ```
 
-If you restart your app, you should see a red `Hello world!`:
+Reset your app by selecting Build > Rebuild Solution from the menu or pressing Ctrl + Shift + B. Then Start your app again by clicking the "Start" button in the Visual Studio toolbar or by pressing F5.
+
+The app will update and you should see a red `Hello world!`:
 
 :::image type="content" source="images/hello-world/red-hello.png" alt-text="A red 'Hello world!'":::