Cleaning up apps codelab

chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html

Index: chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html
diff --git a/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html b/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html
index d56c94152389e9d30432165542b7b71f390fd15f..67785562ef2353d1c3ae4ce64283bb19f4d17f00 100644
--- a/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html
+++ b/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html
@@ -1,22 +1,31 @@
-<h1 id="lab_2_work_with_code">Lab 2 - Work with code</h1>
+<h1 id="lab_2_work_with_code">Create Basic App</h1>
 
-<h2 id="create_your_first_chrome_app">Create your first Chrome app</h2>
-
-<p>There are three core pieces to any Chrome app:</p>
+<p>There are three core pieces to any Chrome packaged app:</p>
 
 <ul>
-<li>The manifest that descibes meta-information about your applicaiton: name, description, version number and how to launch your application</li>
-<li>The background script, which sets up how your application responds to system events such as the user installing and launching the app and the system suspending it</li>
-<li>The view (which is optional, but you normally need to show the user something)</li>
+<li>The manifest that describes meta-information about your application:
+name, description, version number and how to launch your application</li>
+<li>The background script,
+which sets up how your application responds to system events
+such as the user installing and launching the app and the system suspending it</li>
+<li>The view
+(which is optional, but you normally need to show the user something)</li>
 </ul>
 
-<p>Let&#39;s look at each of these components at their simplest level. </p>
+<p>Let&#39;s look at each of these components at their simplest level.</p>
 
-<ol>
-<li><p>In an empty directory (let&#39;s call it <code>&lt;myappdir&gt;</code>), create three files:</p>
+<p class="note"><b>Tip:</b>
+If you use the Sublime Text editor with
+<a href="http://www.youtube.com/watch?v=x_FTILqlbsg&hd=1">our plugin</a>,
+you can create these three files with a click (Chrome -&gt; New App -&gt; Hello World).
+</p>
+
+<h2 id="manifest">Create manifest</h2>
+
+<p>In an empty directory (let&#39;s call it <code>&lt;myappdir&gt;</code>),
+create the manifest file: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/manifest.json">manifest.json</a>
+</p>
 
-<ul>
-<li>Manifest: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/manifest.json">manifest.json</a>
 <pre>
 {
   &quot;manifest_version&quot;: 2,
@@ -28,8 +37,13 @@
     }
   }
 }
-</pre></li>
-<li>Background script: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/main.js">main.js</a>
+</pre>
+
+<h2 id="background">Create background script</h2>
+
+<p>In the same directory,
+create the background script: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/main.js">main.js</a>
+
 <pre>
 chrome.app.runtime.onLaunched.addListener(function() {
   chrome.app.window.create(&#39;index.html&#39;, {
@@ -39,8 +53,12 @@ chrome.app.runtime.onLaunched.addListener(function() {
     }
   });
 });
-</pre></li>
-<li>User interface: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/index.html">index.html</a>
+</pre>
+
+<h2 id="view">Create view</h2>
+
+<p>Create the user interface: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/index.html">index.html</a>
+
 <pre>
 &lt;html&gt;
   &lt;head&gt;
@@ -51,9 +69,9 @@ chrome.app.runtime.onLaunched.addListener(function() {
       &lt;h1&gt;Hello, World!&lt;/h1&gt;
   &lt;/body&gt;
 &lt;/html&gt;
-</pre></li>
-</ul></li>
-<li><p>Install and execute your sample app: </p>
+</pre>
+
+<h2 id="install">Install and execute sample app</h2>
 
 <ul>
 <li>Go to <code>chrome://extensions</code>.</li>
@@ -61,36 +79,59 @@ chrome.app.runtime.onLaunched.addListener(function() {
 <li>Select the <code>&lt;myappdir&gt;</code> directory.</li>
 <li>Open a new Chrome tab.</li>
 <li>Click on the &quot;My First App&quot; icon.</li>
-</ul></li>
-</ol>
-
-<h2 id="you_should_also_read">You should also read</h2>
-
-<ul>
-<li><a href="http://developer.chrome.com/trunk/apps/first_app.html">Create Your First App</a></li>
-<li><a href="http://developer.chrome.com/trunk/apps/app.runtime.html">chrome.app.runtime</a></li>
-<li><a href="http://developer.chrome.com/trunk/apps/app.window.html">chrome.app.window</a></li>
 </ul>
 
-<h2 id="debug_fix_and_reload_app">Debug, fix, and reload app</h2>
+<h2 id="debug_fix_and_reload_app">Debug, fix, and reload</h2>
 
-<p class="note"><b>Tip:</b>  If you have enabled Developer mode in <code>chrome://extensions</code>, your apps can be inspected and debugged using the Chrome Developer Tools just like any standard web page: right-click on page, select Inspect Element. For the background page, which doesn&#39;t have UI, you can either right-click on any app window and select <code>Inspect Background Page</code> or go to <code>chrome://extensions</code> and click on Inspect Views...</p>
+<p class="note"><b>Tip:</b>
+If you have enabled Developer mode in <code>chrome://extensions</code>,
+your apps can be inspected and debugged using the Chrome Developer Tools.
+Just like any standard web page, right-click on page and select Inspect Element.
+For the background page which doesn&#39;t have UI,
+you can either right-click on any app window and
+select <code>Inspect Background Page</code> or
+go to <code>chrome://extensions</code> and click on Inspect Views...</p>
 
 <ol>
-<li><p>Change the text &quot;Hello world&quot; to &quot;My first app&quot; in index.html.</p></li>
-<li><p>Change the <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/main.js">main.js</a> background script to create two windows instead of one. Don&#39;t bother to create another html. For now, you can open index.html on both.</p></li>
-<li><p>After changing code, right-click on your app and select Reload App to reload the changed files. All Developer Tools windows will be reopened when you reload your app.</p></li>
-<li><p>Launch the app in a new tab page. Move the top window and you will see the second window behind it. </p></li>
+<li><p>Change the text &quot;Hello world&quot;
+to &quot;My first app&quot; in index.html.</p></li>
+<li><p>Change the
+<a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/main.js">main.js</a> background script to create two windows instead of one.
+Don&#39;t bother to create another html.
+For now, you can open index.html on both.</p></li>
+<li><p>After changing code,
+right-click on your app and select Reload App to reload the changed files.
+All Developer Tools windows will be reopened when you reload your app.</p></li>
+<li><p>Launch the app in a new tab page.
+Move the top window and you will see the second window behind it.</p></li>
 </ol>
 
-<h1 id="takeaways">Takeaways</h1>
+<h2 id="takeaways">Takeaways</h2>
+
+<ul>
+<li>Chrome packaged apps have three basic pieces.
+The first and foremost is the manifest, which describes your app,
+requests special permissions, defines important meta information and much more.
+The second part is the background script,
+which contains all logic not tied to a specific user interface.
+The last part is the user interface: HTML, CSS, JavaScripts related to the interface, images, etc.</li>
+<li>Chrome packaged apps can be debugged just like standard web pages
+using the Chrome Developer Tools.
+But since an app doesn&#39;t have the Reload control of a browser,
+a Reload App option has been added when you run in Developer mode.</li>
+</ul>
+
+<h2 id="you_should_also_read">You should also read</h2>
 
 <ul>
-<li>Chrome apps have three basic pieces. The first and foremost is the manifest.json, which describes your app, requests special permissions, defines important meta information and much more. The second part is the background script, which contains all logic not tied to a specific user interface. The last part is the user interface: HTML, CSS, JavaScripts related to the interface, images, etc.</li>
-<li>Chrome apps can be debugged just like standard web pages using the Chrome Developer Tools. But since an app doesn&#39;t have the Reload control of a browser, a Reload App option has been added when you run in Developer mode.</li>
+<li><a href="http://developer.chrome.com/trunk/apps/first_app.html">Create Your First App</a> tutorial</li>
+<li><a href="http://developer.chrome.com/trunk/apps/app.runtime.html">chrome.app.runtime</a> reference</li>
+<li><a href="http://developer.chrome.com/trunk/apps/app.window.html">chrome.app.window</a> reference</li>
 </ul>
 
-<h1 id="what_39_s_next_">What&#39;s next?</h1>
+<h2 id="what_39_s_next_">What's next?</h2>
 
-<p>In <a href="app_codelab3_mvc.html">lab3_mvc</a>,
-you will use the <a href="http://angularjs.org/">AngluarJS framework</a> to build your app.</p>
+<p>In <a href="app_codelab3_mvc.html">3 - Create MVC</a>,
+you will use either pure JavaScript or
+<a href="http://angularjs.org/">AngluarJS</a>
+to build your app's model, view, and controller.</p>