Draft of new codelab for review

src/site/codelabs/darrrt/index.markdown

 ---
-layout: default
-title: "Try Dart"
+layout: tutorial
+title: "Code Lab: Ready the Pirates"
 description: "Write some Dart code. Learn some stuff."

[sethladd, 2014/01/14 22:44:06]

can we convey this is a great place to starting learning dart? how do we convey
this can be Step One?

[mem, 2014/01/15 23:22:51]

Done.

 snippet_img: images/piratemap.jpg
 has-permalinks: true
 tutorial:
   id: trydart
 js:
 - url: /js/os-switcher.js
   defer: true
 - url: /js/editor-downloads-analytics.js
   defer: true
 - url: /js/editor-version.js
@@ skipping 41 matching lines @@
 In this step, you download Dart and get the sample code.
 
 
 ### <i class="fa fa-anchor"> </i> Get Dart.
 
 <div class="trydart-step-details" markdown="1">
 If you haven't already done so,
 get the Dart download.
 Unzip the ZIP file, which creates a directory called `dart`.
 
+<!--style here is a hack to remove the arrow, which was only partially showing. -->
+<div style="padding-left: 10px"> 

[sethladd, 2014/01/14 22:44:06]

does this happen only in the code lab?

[mem, 2014/01/15 23:22:51]

It's about centering...

If the button is centered, the arrow is at the left of the button as it should
be. In the tutorial the button is aligned to the left of the page, so the
arrow's position is off.

I tried tracking it down, but it was a rabbit hole and I didn't want to get
distracted.



On 2014/01/14 22:44:06, sethladd wrote:

 {% include downloads/_dart-editor.html buttonclass="btn btn-primary btn-lg" %}
+</div>
 
 <p class="os-choices" markdown="1">
   The Dart tools
   work in recent versions of
   {% include os-choices.html %}
 </p>
 </div>
 
 ### <i class="fa fa-anchor"> </i> Start the editor.
 
@@ skipping 21 matching lines @@
 use **File > Open Existing Folder...**
 to open the `one-hour-codelab-master` directory.
 </div>
 
 <div class="row"> <div class="col-md-7" markdown="1">
 
 ![The files and directories in the piratebadge directory.](images/filesanddirs.png)
 
 </div> <div class="col-md-5" markdown="1">
 
-<i class="fa fa-key"> </i> <strong> Key Information </strong>
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
 
 * The `packages` directory, as well as the `pubspec.yaml` and `pubspec.lock` files are
 related to package dependencies.
 This project has all the dependencies set up for you.
 Dart Editor automatically installs the necessary packages.
 
 * Several numbered directories contain the completed code for each step.
 `1-blankbadge` contains the skeletal version of the app that you begin with.
 `6-piratebadge_json` contains the final version of the app.
 
@@ skipping 68 matching lines @@
     [[highlight]]<script src="packages/browser/dart.js"></script>[[/highlight]]
   </body>
 </html>
 {% endprettify %}
 
 </div>
 <div class="trydart-filename">piratebadge.html</div>
 
 </div> <div class="col-md-5" markdown="1">
 
-<i class="fa fa-key"> </i> <strong> Key Information </strong>
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
 
 * During this code lab,
 all the changes you make to `piratebadge.html` are within
 the &lt;div&gt; element identified with the class `widgets`.
 
 * In later steps,
 the &lt;span&gt; element with the ID `badgeName`
 is programmatically updated by the Dart code
 based on user input.
 
@@ skipping 88 matching lines @@
   </div>[[/highlight]]
 </div>
 ...
 {% endprettify %}
 </div>
 
 <div class="trydart-filename">piratebadge.html</div>
 
 </div> <div class="col-md-5" markdown="1">
 
-<i class="fa fa-key"> </i> <strong> Key Information </strong>
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
 
 * The ID for the input element is `inputName`.
 Dart uses CSS selectors, like this ID,
 to get elements from the DOM.
 
 &nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
 
 </div> </div>
 
 ### <i class="fa fa-anchor"> </i> Edit piratebadge.dart.
@@ skipping 162 matching lines @@
   </div>[[/highlight]]
 </div>
 ...
 {% endprettify %}
 </div>
 
 <div class="trydart-filename">piratebadge.html</div>
 
 </div> <div class="col-md-5" markdown="1">
 
-<i class="fa fa-key"> </i> <strong> Key Information </strong>
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
 
 * The button has the ID `generateButton` so
 the Dart code can get the element.
 
 </div> </div>
 
 ### <i class="fa fa-anchor"> </i> Edit piragebadge.dart.
 
 <div class="trydart-step-details" markdown="1">
 Below the import, declare a top-level variable to hold the `ButtonElement`.
@@ skipping 275 matching lines @@
 import 'dart:html';
 
 [[highlight]]import 'dart:math' show Random;[[/highlight]]
 {% endprettify %}
 </div>
 
 <div class="trydart-filename">piratebadge.dart</div>
 
 </div> <div class="col-md-5" markdown="1">
 
-<i class="fa fa-key"> </i> <strong> Key Information </strong>
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
 
 * Using the `show` keyword,
 you can import only the classes, functions, or properties you need.
 
 * `Random` provides a random number generator.
 
 </div></div>
 
 <div class="trydart-step-details" markdown="1">
 
@@ skipping 338 matching lines @@
 import 'dart:math' show Random;
 [[highlight]]
 import 'dart:convert' show JSON;[[/highlight]]
 {% endprettify %}
 </div>
 
 <div class="trydart-filename">piratebadge.dart</div>
 
 </div> <div class="col-md-5" markdown="1">
 
-<i class="fa fa-key"> </i> <strong> Key Information </strong>
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
 
 * `JSON` provides convenient access to the most common JSON use cases.
 
 </div> </div>
 
 <div class="trydart-step-details" markdown="1">
 
 <hr>
 
 Add a named constructor to the PirateName class.
@@ skipping 262 matching lines @@
             "Queasy", "Rat", "Sandy", "Tired",
             "Ugly", "Vile", "Weak", "Xeric",
             "Yellow", "Zesty"]}
 {% endprettify %}
 </div>
 
 <div class="trydart-filename">piratenames.json</div>
 
 </div> <div class="col-md-5" markdown="1">
 
-<i class="fa fa-key"> </i> <strong> Key Information </strong>
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
 
 * The file contains a JSON-encoded map,
 which contains two lists of strings.
 
 </div> </div>
 
 ### <i class="fa fa-anchor"> </i> Edit piratebadge.html.
 
 <div class="trydart-step-details" markdown="1">
 Disable the input field and the button.
@@ skipping 381 matching lines @@
 on our [Samples page](/samples/).
 </div>
 
 ### <i class="fa fa-anchor"> </i> Read the tutorials.
 
 <div class="trydart-step-details" markdown="1">
 Learn more about Dart from
 the [Dart tutorials](/docs/tutorials/).
 </div>