docs: update getting started tutorial to use StackBlitz web-containers (angular#44085)

Previous commits changed the docs to use web-container versions for StackBlitz examples.
This commit updates the content of the tutorial to match.

Fixes angular#44079

PR Close angular#44085

Author: petebacondarwin

aio/content/images/guide/start/create-new-terminal.png

@@ -53,6 +53,10 @@ To save your work:
 1. Fork the project you generated.
 1. Save periodically.
 
+<div class="lightbox">
+  <img src="generated/images/guide/start/fork-the-project.png" alt="Fork the project">
+</div>
+
 In StackBlitz, the preview pane on the right shows the starting state of the example application.
 The preview features two areas:
 
@@ -162,13 +166,20 @@ The alert checks the product's price, and, if the price is greater than $700, di
 
 This section walks you through creating a child component, `ProductAlertsComponent` that can receive data from its parent component, `ProductListComponent`.
 
-1. Right click on the `app` folder and use the `Angular Generator` to generate a new component named `product-alerts`.
+1. Click on the plus sign above the current terminal to create a new terminal to run the command to generate the component.
 
   <div class="lightbox">
-    <img src="http://github.com/generated/images/guide/start/%3Cspan%20class="x x-first x-last">generate-component.png" alt="StackBlitz command to generate component">
+    <img src="http://github.com/generated/images/guide/start/%3Cspan%20class="x x-first x-last">create-new-terminal.png" alt="StackBlitz command to generate component">
   </div>
 
-    The generator creates starter files for the three parts of the component:
+1. In the new terminal, generate a new component named `product-alerts` by running the following command.
+
+  ```sh
+  ng generate component product-alerts
+  ```
+
+  The generator creates starter files for the three parts of the component:
+
     * `product-alerts.component.ts`
     * `product-alerts.component.html`
     * `product-alerts.component.css`
@@ -199,11 +210,11 @@ This section walks you through creating a child component, `ProductAlertsCompone
 
   <code-example header="src/app/product-alerts/product-alerts.component.html" path="getting-started/src/app/product-alerts/product-alerts.component.1.html"></code-example>
 
-1. To make `ProductAlertsComponent` available to other components in the application, add it to `AppModule`'s declarations in `app.module.ts`.
+1. The generator automatically added the `ProductAlertsComponent` to the `AppModule` to make it available to other components in the application.
 
   <code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="declare-product-alerts"></code-example>
 
-1. Finally, to display `ProductAlertsComponent` as a child of `ProductListComponent`, add the selector, `<app-product-alerts>` to `product-list.component.html`.
+1. Finally, to display `ProductAlertsComponent` as a child of `ProductListComponent`, add the `<app-product-alerts>` element to `product-list.component.html`.
   Pass the current product as input to the component using property binding.
 
   <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.5.html" region="app-product-alerts"></code-example>

aio/content/images/guide/start/download-project.png

@@ -25,13 +25,15 @@ This section walks you through adding a **Buy** button and setting up a cart ser
 
 ### Define a cart service
 
-1. To generate a cart service, right click on the `app` folder, choose **Angular Generator**, and choose **Service**.
-    Name the new service `cart`.
+This section walks you through creating the `CartService` that tracks products added to shopping cart.
 
-    <code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.1.ts"></code-example>
+1. In the terminal generate a new `cart` service by running the following command:
 
-1. Import the `Product` interface from `./products.js`.
-1. In the `CartService` class, define an `items` property to store the array of the current products in the cart.
+    ```sh
+    ng generate service cart
+    ```
+
+1. Import the `Product` interface from `./products.ts` into the `cart.service.ts` file, and in the `CartService` class, define an `items` property to store the array of the current products in the cart.
 
     <code-example path="getting-started/src/app/cart.service.ts" header="src/app/cart.service.ts" region="props"></code-example>
 
@@ -99,13 +101,19 @@ For customers to see their cart, you can create the cart view in two steps:
 
  To create the cart view, follow the same steps you did to create the `ProductDetailsComponent` and configure routing for the new component.
 
-1. Generate a cart component named `cart` by right-clicking the `app` folder, choosing **Angular Generator**, and **Component**.
+1. Generate a new component named `cart` in the terminal by running the following command:
+
+    ```sh
+    ng generate component cart
+    ```
+
+    This command will generate the `cart.component.ts` file and it associated template and styles files.
 
     <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.1.ts"></code-example>
 
     StackBlitz also generates an `ngOnInit()` by default in components.  You can ignore the `CartComponent` `ngOnInit()` for this tutorial.
 
-1. Ensure that the newly created `CartComponent` is added to the module's `declarations` in `app.module.ts`.
+1. Note that the newly created `CartComponent` is added to the module's `declarations` in `app.module.ts`.
 
     <code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="declare-cart">
     </code-example>
@@ -230,7 +238,13 @@ For more information about Angular's `HttpClient`, see the [Client-Server Intera
 
 Now that you've configured your application to retrieve shipping data, you can create a place to render that data.
 
-1. Generate a new component named `shipping` by right-clicking the `app` folder, choosing **Angular Generator**, and selecting **Component**.
+1. Generate a cart component named `shipping` in the terminal by running the following command:
+
+    ```sh
+    ng generate component shipping
+    ```
+
+    This command will generate the `shipping.component.ts` file and it associated template and styles files.
 
     <code-example header="src/app/shipping/shipping.component.ts" path="getting-started/src/app/shipping/shipping.component.1.ts"></code-example>
 
@@ -240,7 +254,7 @@ Now that you've configured your application to retrieve shipping data, you can c
     <code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="shipping-route"></code-example>
 
     There's no link to the new shipping component yet, but you can see its template in the preview pane by entering the URL its route specifies.
-    The URL has the pattern: `https://getting-started.stackblitz.io/shipping` where the `getting-started.stackblitz.io` part may be different for your StackBlitz project.
+    The URL has the pattern: `https://angular-ynqttp--4200.local.webcontainer.io/shipping` where the `angular-ynqttp--4200.local.webcontainer.io` part may be different for your StackBlitz project.
 
 ### Configuring the `ShippingComponent` to use `CartService`
 

aio/content/images/guide/start/fork-the-project.png

@@ -20,25 +20,26 @@ A best practice is to run your project locally before you deploy it. To run your
 
 ## Running your application locally
 
-1. Download the source code from your StackBlitz project by clicking the `Download Project` icon in the left menu, across from `Project`, to download your files.
+1. Download the source code from your StackBlitz project by clicking the `Download Project` icon in the left menu, across from `Project`, to download your project as a zip archive.
 
-1. Create a new Angular CLI workspace using the [`ng new`](cli/new "CLI ng new command reference") command, where `my-project-name` is what you would like to call your project:
+    <div class="lightbox">
+      <img src="generated/images/guide/start/download-project.png" alt="Download the stackblitz project">
+    </div>
+
+
+1. Unzip the archive change directory to the newly created project. For example:
 
     ```sh
-    ng new my-project-name
+    cd angular-ynqttp
     ```
 
-    This command displays a series of configuration prompts. For this tutorial, accept the default settings for each prompt.
-
-1. In your newly CLI-generated application, replace the `/src` folder with the `/src` folder from your `StackBlitz` download.
-
 1. Use the following CLI command to run your application locally:
 
     ```sh
     ng serve
     ```
 
-1. To see your application in the  browser, go to http://localhost:4200/.
+1. To see your application in the browser, go to http://localhost:4200/.
     If the default port 4200 is not available, you can specify another port with the port flag as in the following example:
 
      ```sh

aio/content/start/index.md

@@ -18,10 +18,13 @@ The application already uses the Angular `Router` to navigate to the `ProductLis
 This section shows you how to define a route to show individual product details.
 
 1. Generate a new component for product details.
-    In the file list, right-click the `app` folder, choose `Angular Generator` and `Component`.
-    Name the component `product-details`.
+    In the terminal generate a new `product-details` component by running the following command:
 
-1. In `app.module.ts`, add a route for product details, with a `path` of `products/:productId` and `ProductDetailsComponent` for the `component`, include `ProductDetailsComponent` in `AppModule`'s declarations.
+    ```sh
+    ng generate component product-details
+    ```
+
+1. In `app.module.ts`, add a route for product details, with a `path` of `products/:productId` and `ProductDetailsComponent` for the `component`.
 
     <code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="product-details-route">
     </code-example>