Merge pull request #47398 from ShawnKupfer/WB1498

v-regandowner · web-flow · commit 5499a28c2435 · 2024-10-09T16:50:18.000-04:00
AB#1003041: Build your first web app with Blazor
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/1-introduction.yml b/learn-pr/aspnetcore/build-your-first-blazor-web-app/1-introduction.yml
@@ -4,7 +4,7 @@ title: Introduction
 metadata:
   title: Introduction
   description: Build your first web app with Blazor.
-  ms.date: 01/26/2024
+  ms.date: 10/09/2024
   author: danroth27
   ms.author: daroth
   ms.manager: markl
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/2-configure-environment.yml b/learn-pr/aspnetcore/build-your-first-blazor-web-app/2-configure-environment.yml
@@ -4,7 +4,7 @@ title: Configure your development environment
 metadata:
   title: Configure your development environment
   description: Learn how to set up your environment for Blazor development.
-  ms.date: 01/26/2024
+  ms.date: 10/09/2024
   author: danroth27
   ms.author: daroth
   ms.manager: markl
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/3-exercise-configure-environment.yml b/learn-pr/aspnetcore/build-your-first-blazor-web-app/3-exercise-configure-environment.yml
@@ -4,7 +4,7 @@ title: Exercise - Create and run a Blazor web app
 metadata:
   title: Exercise - Create and run a Blazor web app
   description: Set up your environment for Blazor development and build your first Blazor web app.
-  ms.date: 01/26/2024
+  ms.date: 10/09/2024
   author: danroth27
   ms.author: daroth
   ms.manager: markl
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/4-blazor-components.yml b/learn-pr/aspnetcore/build-your-first-blazor-web-app/4-blazor-components.yml
@@ -4,7 +4,7 @@ title: Razor components
 metadata:
   title: Razor components
   description: Learn what razor components are and how they can be shared across projects.
-  ms.date: 01/26/2024
+  ms.date: 10/09/2024
   author: danroth27
   ms.author: daroth
   ms.manager: markl
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/5-exercise-add-component.yml b/learn-pr/aspnetcore/build-your-first-blazor-web-app/5-exercise-add-component.yml
@@ -4,7 +4,7 @@ title: Exercise - Add a component
 metadata:
   title: Exercise - Add a component
   description: Reuse components across pages of a Blazor web app and pass parameters in to modify behavior.
-  ms.date: 01/26/2024
+  ms.date: 10/09/2024
   author: danroth27
   ms.author: daroth
   ms.manager: markl
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/6-knowledge-check.yml b/learn-pr/aspnetcore/build-your-first-blazor-web-app/6-knowledge-check.yml
@@ -4,7 +4,7 @@ title: Knowledge check
 metadata:
   title: Knowledge check
   description: Check your knowledge about building and using Blazor components.
-  ms.date: 01/26/2024
+  ms.date: 10/09/2024
   author: danroth27
   ms.author: daroth
   ms.manager: markl
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/7-summary.yml b/learn-pr/aspnetcore/build-your-first-blazor-web-app/7-summary.yml
@@ -4,7 +4,7 @@ title: Summary
 metadata:
   title: Summary
   description: Summary of building your first Blazor web app.
-  ms.date: 01/26/2024
+  ms.date: 10/09/2024
   author: danroth27
   ms.author: daroth
   ms.manager: markl
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/includes/1-introduction.md b/learn-pr/aspnetcore/build-your-first-blazor-web-app/includes/1-introduction.md
@@ -1,9 +1,9 @@
-Get ready to build your first Blazor web app! If you're looking to get started with web development using the power and flexibility of the .NET platform, then you're at the right place. Blazor is a modern frontend web framework based on HTML, CSS, and C# that helps you build web apps *fast*.
+Get ready to build your first Blazor web app! If you're looking to get started with web development using the power and flexibility of the .NET platform, then you're in the right place. Blazor is a modern frontend web framework based on HTML, CSS, and C# that helps you build web apps *fast*.
 
 To get started building with Blazor, you first need to set up your development environment by installing the .NET SDK and a preferred code editor. You can then create your first Blazor web app project and start to learn the fundamentals of working with Blazor components.
 
-In this module, you'll learn everything you need to know to set up your .NET development environment and get your first Blazor created and running in just a few minutes. You'll learn how to create and use components, how to turn a component into a page, and how to do basic event handling and data binding. You'll then use everything you learned to build a basic to-do list app.
+In this module, you'll learn everything you need to know to set up your .NET development environment and get your first Blazor app created and running in just a few minutes. You'll learn how to create and use components, how to turn a component into a page, and how to do basic event handling and data binding. You'll then use everything you learned to build a basic to-do list app.
 
-By the end of this module you should have a working Blazor development environment, a basic understanding of Blazor components, and a running Blazor web app that you built yourself.
+By the end of this module, you should have a working Blazor development environment, a basic understanding of Blazor components, and a running Blazor web app that you built yourself.
 
 Let's get started!
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/includes/2-configure-environment.md b/learn-pr/aspnetcore/build-your-first-blazor-web-app/includes/2-configure-environment.md
@@ -4,9 +4,9 @@ To get started with Blazor, you first need to install the .NET SDK and an approp
 
 The .NET SDK is available for download from the [.NET website](https://dot.net). .NET provides installers and installation instructions for various different platforms and architectures. The .NET SDK includes the .NET runtime and tools for creating, building, running, publishing, and testing .NET projects. You can interact directly with the .NET SDK using the .NET command-line interface (CLI).
 
-The .NET SDK includes templates for creating different kinds of .NET projects. You create a new project using the `dotnet new <template-name>` command. For example, to create a new Blazor web app project you can run `dotnet new blazor`. Tools, like Visual Studio and Visual Studio Code, provide convenient user interfaces for creating .NET projects using the  templates in the .NET SDK.
+The .NET SDK includes templates for creating different kinds of .NET projects. You create a new project using the `dotnet new <template-name>` command. For example, to create a new Blazor web app project, you can run `dotnet new blazor`. Tools like Visual Studio and Visual Studio Code provide convenient user interfaces for creating .NET projects using the  templates in the .NET SDK.
 
-Once you create a new .NET project, you can build and run the project using the `dotnet build` and `dotnet run` commands. The `dotnet watch` command can be used to build and run a project and then automatically apply code changes as they're made. You can run and debug .NET projects from within Visual Studio and Visual Studio Code.
+Once you create a new .NET project, you can build and run the project using the `dotnet build` and `dotnet run` commands. You can use the `dotnet watch` command to build and run a project, then automatically apply code changes as they're made. You can run and debug .NET projects from within Visual Studio and Visual Studio Code.
 
 ## Blazor tooling
 
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/includes/3-exercise-configure-environment.md b/learn-pr/aspnetcore/build-your-first-blazor-web-app/includes/3-exercise-configure-environment.md
@@ -10,7 +10,7 @@ This module gives you the option to use the [.NET CLI](/dotnet/core/tools/), [Vi
 
 To create a new Blazor web app project in Visual Studio Code with the C# Dev Kit:
 
-1. Bring up the Command Palette using Ctrl+Shift+P and then type ".NET".
+1. Bring up the Command Palette using **Ctrl** + **Shift** + **P** and then type *.NET*.
 
 1. Find and select the **.NET: New Project** command.
 
@@ -20,7 +20,9 @@ To create a new Blazor web app project in Visual Studio Code with the C# Dev Kit
 
 1. Name the project **BlazorApp** and press **Enter** to confirm.
 
-1. View your new Blazor app project in the **Solution Explorer**.
+1. Select **Create Project**.
+
+1. View your new Blazor app project in the **Explorer**.
 
 ## Optional: Create a new Blazor app with the .NET CLI
 
@@ -91,7 +93,7 @@ To create a new Blazor web app using Visual Studio:
 
     ![Screenshot of Visual Studio 2022 'Configure Your Project' screen and recommended settings from step 3.](../media/visual-studio-2022-configure-project.png)
 
-1. In the **Additional information** window, select **.NET 8.0 (Long Term Support)** in the **Framework** drop-down if not already selected and click the **Create** button.
+1. In the **Additional information** window, select **.NET 8.0 (Long Term Support)** in the **Framework** drop-down if not already selected and select the **Create** button.
 
     When creating a Blazor Web App you can select from various options, like whether to enable authentication, what interactive render modes to enable, and how much of the app you want to be interactive. For this app, make sure the defaults are selected as follows:
 
@@ -116,19 +118,19 @@ Several files were created to give you a simple Blazor app that is ready to run:
 
 ## Run the app
 
-Click on the **Start Debugging** button (green arrow) in the Debug Toolbar in Visual Studio to run your app.
+Select the **Start Debugging** button (green arrow) in the Debug Toolbar in Visual Studio to run your app.
 
 ![Screenshot of the Debug Toolbar in Visual Studio with the Start Debugging button highlighted.](../media/click-debug-button.png)
 
-Once the app is running, you can apply code changes to the running app by clicking the **Hot Reload** button.
+Once the app is running, you can apply code changes to the running app by selecting the **Hot Reload** button.
 
 ![Screenshot of the Debug Toolbar in Visual Studio with the Hot Reload button highlighted.](../media/hot-reload.png)
 
-You can stop the app at any time by clicking on the **Stop** button in the top toolbar.
+You can stop the app at any time by selecting the **Stop** button in the top toolbar.
 
 ![Screenshot of the Debug Toolbar in Visual Studio with the Stop Debugging button highlighted.](../media/stop-debug.png)
 
-The first time you run a web app in Visual Studio, it will set up a development certificate for hosting the app over HTTPS and then prompt you to trust the certificate. We recommend agreeing to trust the certificate. The certificate is only used for local development, and without it most browsers complain about the security of the website.
+The first time you run a web app in Visual Studio, it sets up a development certificate for hosting the app over HTTPS and then prompts you to trust the certificate. We recommend agreeing to trust the certificate. The certificate is only used for local development, and without it most browsers complain about the website's security.
 
 Wait for the app to launch in the browser. Once you get to the following page, you've successfully run your first Blazor app!
 
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/includes/4-blazor-components.md b/learn-pr/aspnetcore/build-your-first-blazor-web-app/includes/4-blazor-components.md
@@ -2,7 +2,7 @@ Now that you have your development environment set up, let's explore the structu
 
 ## The Home page
 
-The home page for the app is defined by the *Home.razor* file located inside the *Components/Pages* directory. *Home.razor* contains the following code:
+The app's home page is defined by the *Home.razor* file located inside the *Components/Pages* directory. *Home.razor* contains the following code:
 
 ```razor
 @page "/"
@@ -22,13 +22,13 @@ Razor is a markup syntax based on HTML and C#. A Razor file (.razor) contains pl
 
 ## What are Razor components?
 
-If you explore the files in the Blazor project, you can see that most of the files that make up the project are *.razor* files. In Blazor, a Razor file defines a reusable component that makes up a portion of the app UI. Components define what HTML to render and how to handle user events.
+If you explore the files in the Blazor project, you notice that most of the files that make up the project are *.razor* files. In Blazor, a Razor file defines a reusable component that makes up a portion of the app UI. Components define what HTML to render and how to handle user events.
 
 At compile time, each Razor component is built into a C# class. The class can include common UI elements like state, rendering logic, lifecycle methods, and event handlers. Because Blazor components authored in Razor are just C# classes, you can use arbitrary .NET code from your components.
 
 ## Using components
 
-To use a component from another component, you add an HTML-style tag with a name that matches the name of the component. For example, if you have a component named *MyButton.razor*, you can add a `MyButton` component to another component by adding a `<MyButton />` tag.
+To use a component from another component, you add an HTML-style tag with a name that matches the component name. For example, if you have a component named *MyButton.razor*, you can add a `MyButton` component to another component by adding a `<MyButton />` tag.
 
 ## Component parameters
 
@@ -40,9 +40,9 @@ The `@code` block in a Razor file is used to add C# class members (fields, prope
 
 ## Try the Counter
 
-In the running app, navigate to the Counter page by clicking the Counter tab in the sidebar on the left. The following page should then be displayed:
+In the running app, navigate to the Counter page by selecting the Counter tab in the sidebar on the left. The following page should then be displayed:
 
-![Counter Screenshot.](../media/counter.png)
+![Screenshot of the Counter in the running app.](../media/counter.png)
 
 Select the **Click me** button to increment the count without a page refresh. Incrementing a counter in a webpage normally requires writing JavaScript, but with Blazor, you can use C#.
 
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/includes/7-summary.md b/learn-pr/aspnetcore/build-your-first-blazor-web-app/includes/7-summary.md
@@ -10,4 +10,4 @@ Congratulations on building your first Blazor web app!
 
 - [Blazor homepage](https://blazor.net)
 - [Blazor docs](/aspnet/core/blazor)
-- [Project structure for Blazor apps](/aspnet/core/blazor/project-structure)
+- [ASP.NET Core Blazor project structure](/aspnet/core/blazor/project-structure)
diff --git a/learn-pr/aspnetcore/build-your-first-blazor-web-app/index.yml b/learn-pr/aspnetcore/build-your-first-blazor-web-app/index.yml
@@ -3,7 +3,7 @@ uid: learn.build-web-app-blazor-webassembly-vscode
 metadata:
   title: Build your first web app with Blazor
   description: Learn how to build your first web app with Blazor.
-  ms.date: 01/26/2024
+  ms.date: 10/09/2024
   author: danroth27
   ms.author: daroth
   manager: coxford
@@ -18,7 +18,7 @@ abstract: |
   - Create a new Blazor web app project.
   - Add component logic to a Blazor web app.
 prerequisites: |
-  - Knowledge of what Blazor is and how it works at the beginner level
+  - Knowledge of Blazor and how it works at the beginner level
   - Basic knowledge of web app concepts
   - C# and .NET experience at the beginner level
 iconUrl: /training/achievements/build-your-first-blazor-web-app.svg
