Draft of new codelab for review

src/site/codelabs/darrrt/index.markdown

Index: src/site/codelabs/darrrt/index.markdown
diff --git a/src/site/codelabs/darrrt/index.markdown b/src/site/codelabs/darrrt/index.markdown
index 0982675898957f7ff57a51bec4372140d6ee90f9..ec4c568c0bba0cb6fa3b52225771ee566036cae6 100644
--- a/src/site/codelabs/darrrt/index.markdown
+++ b/src/site/codelabs/darrrt/index.markdown
@@ -1,6 +1,6 @@
 ---
-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
@@ -63,7 +63,10 @@ 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
@@ -105,7 +108,7 @@ to open the `one-hour-codelab-master` directory.
 
 </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.
@@ -194,7 +197,7 @@ Get familiar with the HTML and the Dart code for the skeleton version of the app
 
 </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
@@ -303,7 +306,7 @@ within the `widgets` &lt;div&gt;.
 
 </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,
@@ -486,7 +489,7 @@ Add the &lt;button&gt; tag below the input field.
 
 </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.
@@ -782,7 +785,7 @@ import 'dart:html';
 
 </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.
@@ -1141,7 +1144,7 @@ import 'dart:convert' show JSON;[[/highlight]]
 
 </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.
 
@@ -1424,7 +1427,7 @@ Put the file in `1-blankbadge` alongside the Dart and HTML files you've been edi
 
 </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.