docs: place download section in toh to the top (#36567)

this is part of a larger effort to standardise download sections on angular.io

This commit partially addresses #35459

PR Close #36567

aio/content/tutorial/toh-pt0.md

@@ -9,6 +9,11 @@ In this part of the tutorial, you'll do the following:
 3. Serve the application.
 4. Make changes to the application.
 
+<div class="alert is-helpful">
+
+  For the sample app that this page describes, see the <live-example></live-example>.
+
+</div>
 
 ## Set up your environment
 
@@ -113,9 +118,6 @@ Open `src/styles.css` and add the code below to the file.
 
 ## Final code review
 
-The source code for this tutorial and the complete _Tour of Heroes_ global styles
-are available in the <live-example></live-example>.
-
 Here are the code files discussed on this page.
 
 <code-tabs>

aio/content/tutorial/toh-pt1.md

@@ -4,6 +4,12 @@ The application now has a basic title.
 Next you will create a new component to display hero information
 and place that component in the application shell.
 
+<div class="alert is-helpful">
+
+  For the sample app that this page describes, see the <live-example></live-example>.
+
+</div>
+
 ## Create the heroes component
 
 Using the Angular CLI, generate a new component named `heroes`.
@@ -201,7 +207,7 @@ Note that `AppModule`  declares both application components, `AppComponent` and
 
 ## Final code review
 
-Your app should look like this <live-example></live-example>. Here are the code files discussed on this page.
+Here are the code files discussed on this page.
 
 <code-tabs>
 

aio/content/tutorial/toh-pt2.md

@@ -3,6 +3,12 @@
 In this page, you'll expand the Tour of Heroes app to display a list of heroes, and
 allow users to select a hero and display the hero's details.
 
+<div class="alert is-helpful">
+
+  For the sample app that this page describes, see the <live-example></live-example>.
+
+</div>
+
 
 ## Create mock heroes
 
@@ -220,8 +226,6 @@ The finished `<li>` looks like this:
 
 ## Final code review
 
-Your app should look like this <live-example></live-example>.
-
 Here are the code files discussed on this page, including the `HeroesComponent` styles.
 
 <code-tabs>

aio/content/tutorial/toh-pt3.md

@@ -10,6 +10,12 @@ In this page, you'll take the first step in that direction by moving the hero de
 The `HeroesComponent` will only present the list of heroes.
 The `HeroDetailComponent` will present details of a selected hero.
 
+<div class="alert is-helpful">
+
+  For the sample app that this page describes, see the <live-example></live-example>.
+
+</div>
+
 ## Make the `HeroDetailComponent`
 
 Use the Angular CLI to generate a new component named `hero-detail`.
@@ -136,7 +142,7 @@ without touching the parent `HeroesComponent`.
 
 ## Final code review
 
-Here are the code files discussed on this page and your app should look like this <live-example></live-example>.
+Here are the code files discussed on this page.
 
 <code-tabs>
 

aio/content/tutorial/toh-pt4.md

@@ -5,6 +5,13 @@ The Tour of Heroes `HeroesComponent` is currently getting and displaying fake da
 After the refactoring in this tutorial, `HeroesComponent` will be lean and focused on supporting the view.
 It will also be easier to unit-test with a mock service.
 
+<div class="alert is-helpful">
+
+  For the sample app that this page describes, see the <live-example></live-example>.
+
+</div>
+
+
 ## Why services
 
 Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data.
@@ -387,7 +394,7 @@ the selection. Use the "clear" button to clear the message history.
 
 ## Final code review
 
-Here are the code files discussed on this page and your app should look like this <live-example></live-example>.
+Here are the code files discussed on this page.
 
 <code-tabs>
 

aio/content/tutorial/toh-pt5.md

@@ -7,6 +7,12 @@ There are new requirements for the Tour of Heroes app:
 * When users click a hero name in either view, navigate to a detail view of the selected hero.
 * When users click a *deep link* in an email, open the detail view for a particular hero.
 
+<div class="alert is-helpful">
+
+  For the sample app that this page describes, see the <live-example></live-example>.
+
+</div>
+
 When you’re done, users will be able to navigate the app like this:
 
 <div class="lightbox">
@@ -466,7 +472,7 @@ from heroes list to the mini detail to the hero details and back to the heroes a
 
 ## Final code review
 
-Here are the code files discussed on this page and your app should look like this <live-example></live-example>.
+Here are the code files discussed on this page.
 
 {@a approutingmodule}
 {@a appmodule}

aio/content/tutorial/toh-pt6.md

@@ -7,7 +7,11 @@ Angular's `HttpClient`.
 * Users can add, edit, and delete heroes and save these changes over HTTP.
 * Users can search for heroes by name.
 
-When you're done with this page, the app should look like this <live-example></live-example>.
+<div class="alert is-helpful">
+
+  For the sample app that this page describes, see the <live-example></live-example>.
+
+</div>
 
 ## Enable HTTP services
 
@@ -519,8 +523,6 @@ If you enter characters that match any existing hero names, you'll see something
 
 ## Final code review
 
-Your app should look like this <live-example></live-example>.
-
 Here are the code files discussed on this page (all in the `src/app/` folder).
 
 {@a heroservice}