Add 'Writing Functions' lesson to Blocks2JS (#1530)

* Add 'Writing Functions' lesson to Block2JS

* Minor edits to 'hello-js'

* better blocks2js transition flow

* 'lines' to 'blocks'

* Base off master

docs/courses/blocks-to-javascript/hello-javascript.md

@@ -6,7 +6,7 @@ Want to learn to code the @boardname@ using JavaScript? Follow along this step-b
 
 ## ~
 
-## Step 1 Flashing heart
+## Step 1 - Flashing heart
 
 Let's start with dragging out the blocks to create a **flashing heart** animation.
 You can do that by stacking two ``||basic:show leds||`` blocks in a ``||basic:forever||`` loop.
@@ -30,7 +30,7 @@ basic.forever(function () {
 })
 ```
 
-## Step 2 Converting blocks to JavaScript
+## Step 2 - Converting blocks to JavaScript
 
 Click on the **{} JavaScript** button on the top of the editor to **convert your blocks into JavaScript**.
 
@@ -86,7 +86,9 @@ basic.forever(function () {
 })
 ```
 
-## Step 3 Changing some LEDs
+The comments will show up in the blocks too. Quickly switch over to **Blocks** and back if you want to see what it looks like.
+
+## Step 3 - Changing some LEDs
 
 Let's draw a small heart in the second ``basic.show leds`` string. We'll do that by replacing some of the ``.`` characters with a ``#``. As you make your changes, the simulator should restart and modify the animation just like when you're coding with blocks.
 
@@ -110,17 +112,15 @@ basic.forever(function () {
 })
 ```
 
-## Step 4 "I broke my code!"
+## Step 4 - "I broke my code!"
 
 Javascript can be very picky with the _syntax_ (syntax is the proper use of words and symbols) of your code. Just one misplaced letter and it will refuse to run again. **It is quite normal to make lots of mistakes!** Let's see how you can handle most situations with a magical trick: **Undo**.
 
-Let's break the code by adding some random text in the editor. After a few seconds, you should see squiggles show up under the code,
-just like you do a typo when writing a message.
+Let's break the code by adding some random text in the editor. After a few seconds, you should see squiggles show up under the code, just like you do a typo when writing a message.
 
 ![JavaScript with squiggles](/static/mb/blocks2js/squiggles.png)
 
-The code editor really needs this error fixed before it can run your code. If you hover over the squiggle with your mouse, 
-you'll get an explanation for what's wrong... that might sound even more confusing! 
+The code editor really needs this error fixed before it can run your code. If you hover over the squiggle with your mouse, you'll get an explanation for what's wrong... that might sound even more confusing! 
 
 ![JavaScript with squiggles and message](/static/mb/blocks2js/squigglesmessage.png)
 
@@ -129,7 +129,7 @@ This is OK, simply use **Undo** to trace back your changes until you are back to
 * Click the **Undo** button (bottom toolbar) until your code is correct again. 
 * If you go too far in undoing, click **Redo** to bring the previous code back.
 
-## Step 5 Dragging code from the toolbox
+## Step 5 - Dragging code from the toolbox
 
 ![Example of dragging a code snippet](/static/mb/blocks2js/dragblock.gif)