From 0d6483c5a559933d2c8533e8ba3d6e510e8498ce Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Thu, 15 Dec 2016 11:53:45 -0800
Subject: [PATCH] docs(quickstart): faster to setup and the learning path
 (#2946)

---
 public/docs/ts/latest/guide/setup.jade | 18 +++++++++++-------
 public/docs/ts/latest/quickstart.jade  | 16 +++++++++-------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/public/docs/ts/latest/guide/setup.jade b/public/docs/ts/latest/guide/setup.jade
index ee04e66a78..c672b77d8d 100644
--- a/public/docs/ts/latest/guide/setup.jade
+++ b/public/docs/ts/latest/guide/setup.jade
@@ -20,6 +20,12 @@ a#develop-locally
   Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
   maintained [on github](!{_qsRepo} "Install the github QuickStart repo"). 
 
+.l-sub-section
+  :marked
+    The <live-example title="QuickStart Seed in Plunker">QuickStart seed live-example</live-example> is QuickStart
+    _plus_ the `app.module.ts` and `main.ts` application files ([described below](#app-files "QuickStart application files")) that facilitate richer application examples.
+
+:marked
   Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
   Then ...
   1. Create a project folder (you can call it `quickstart` and rename it later).
@@ -56,15 +62,13 @@ code-example(language="sh" class="code-shell").
 
 block qs-seed
   :marked
-    The **QuickStart seed** contains the same application as the QuickStart playground
-    and even has <live-example>its own _playground_</live-example> 
-    that accomodates development of richer examples in a live coding environment.
-    
+    The **QuickStart seed** contains the same application as the QuickStart playground.
     But it's true purpose is to provide a solid foundation for _local_ development.
     Consequently, there are _many more files_ in the project folder on your machine, 
     most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
 
 block core-files
+  a#app-files
   :marked
     Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder.
 
@@ -123,7 +127,7 @@ table(width="100%")
   :marked
     ### Next Step
 
-    If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).
+    If you're new to Angular, we recommend staying on the [learning path](learning-angular.html "Angular learning path").
 
 br
 br
@@ -155,7 +159,7 @@ block install-tooling
   :marked
     ## Appendix: Why develop locally
 
-    <live-example>Live coding</live-example> in the browser is a great way to explore Angular.
+    <live-example title="QuickStart Seed in Plunker">Live coding</live-example> in the browser is a great way to explore Angular.
 
     Links on almost every documentation page open completed samples in the browser.
     You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
@@ -171,7 +175,7 @@ block install-tooling
     * transpiling TypeScript in the browser is slow
     * the type support, refactoring, and code completion only work in your local IDE
 
-    Use the <live-example><i>live coding</i></live-example> environment as a _playground_, 
+    Use the <live-example title="QuickStart Seed in Plunker"><i>live coding</i></live-example> environment as a _playground_, 
     a place to try the documentation samples and experiment on your own.
     It's the perfect place to reproduce a bug when you want to
     <a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="File a documentation issue">file a documentation issue</a> or
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 2e953900c6..da35bccbbc 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -1,6 +1,6 @@
 block includes
   include _util-fns
-  - var _on_Plunkr = 'on Plunkr';
+  - var _on_Plunkr = 'on Plunker';
 
 :marked
   Angular applications are made up of _components_.
@@ -8,10 +8,14 @@ block includes
 
 +makeExample('app/app.component.ts')(format='.')
 
-:marked
-  You can try this out without installing anything. Open the <live-example>QuickStart example !{_on_Plunkr}</live-example> in another tab
-  and follow along.
 
+.l-sub-section
+  :marked
+    Try this **<live-example>QuickStart example !{_on_Plunkr}</live-example>** without installing anything.
+    Try it locally with the [***QuickStart seed***](guide/setup.html "Setup for local development with the QuickStart seed")
+    and prepare for development of a real Angular application.
+
+:marked
   Every component begins with an `@Component` [!{_decorator}](glossary.html#!{_decorator} '"!{_decorator}" explained')
   <span if-docs="ts">function</span> that
   <span if-docs="ts">takes a _metadata_ object. The metadata object</span> describes how the HTML template and component class work together.
@@ -39,7 +43,5 @@ block includes
     :marked
         ### Next step
 
-        To learn how to write a real application, your next step is to set up a local development
-        environment and begin exploring with code. The [**Developer Guide**](guide/index.html)
-        shows you how.
+        Start [**learning Angular**](guide/learning-angular.html "Learning Angular").