Include unplugged intro step in tutorials (#1376)

docs/projects/coin-flipper.md

@@ -1,7 +1,11 @@
 # Coin Flipper
 
+## Introduction @unplugged
+
 Let's create a coin flipping program to simulate a real coin toss. We'll use icon images to represent a ``heads`` or ``tails`` result.
 
+![Simulating coin toss](/static/mb/projects/coin-flipper/coin-flipper.gif)
+
 ## Step 1
 
 Get an ``||input:on button A pressed||`` block from the ``||input:Input||`` drawer in the toolbox. We'll put our coin flipping code in here.

docs/projects/flashing-heart.md

@@ -1,5 +1,11 @@
 # Flashing Heart
 
+## Introduction @unplugged
+
+Learn how to use the LEDs and make a flashing heart!
+
+![Heart shape in the LEDs](/static/mb/projects/flashing-heart/show-leds.gif)
+
 ## Step 1 @fullscreen
 
 Place the ``||basic:show leds||`` block in the ``||basic:on start||`` block and draw a heart.
@@ -26,16 +32,16 @@ basic.showLeds(`
     . # # # .
     . . # . .`);
 basic.showLeds(`
-    . # . # .
+    . . . . .
-    # . # . #
+    . . . . .
-    # . . . #
+    . . . . .
-    . # . # .
+    . . . . .
-    . . # . .`);
+    . . . . .`);
 ```
 
 ## Step 3 @fullscreen
 
-Move the blocks inside the ``||basic:forever||`` to repeat the animation.
+But we only see the heart blink once. To have it continue to blink, move the blocks inside the ``||basic:forever||`` to make the animation repeat.
 
 ```blocks
 basic.forever(() => {
@@ -47,17 +53,18 @@ basic.forever(() => {
         . . # . .`
         );
     basic.showLeds(`
-        . # . # .
+        . . . . .
-        # . # . #
+        . . . . .
-        # . . . #
+        . . . . .
-        . # . # .
+        . . . . .
-        . . # . .`);
+        . . . . .`
+        );
 })
 ```
 
 ## Step 4 @fullscreen
 
-Place more ``||basic:show leds||`` blocks to create your own animation.
+Now let's get fancy and place more ``||basic:show leds||`` blocks to create your own animation.
 
 ```blocks
 basic.forever(() => {

docs/projects/love-meter.md

@@ -1,6 +1,11 @@
 # Love Meter
 
+## Introduction @unplugged
+
 Make a love meter, how sweet! The @boardname@ is feeling the love, then sometimes not so much!
+Tell everyone who you are. Show you name on the LEDs.
+
+![Love meter banner message](/static/mb/projects/love-meter/love-meter.gif)
 
 ## Step 1
 

docs/projects/name-tag.md

@@ -1,5 +1,11 @@
 # Name Tag
 
+## Introduction @unplugged
+
+Tell everyone who you are. Show you name on the LEDs.
+
+![Name scrolling on the LEDs](/static/mb/projects/name-tag/name-tag.gif)
+
 ## Step 1 @fullscreen
 
 Place the ``||basic:show string||`` block in the ``||basic:on start||`` block. Change the text to your name.

docs/projects/smiley-buttons.md

@@ -1,5 +1,11 @@
 # Smiley Buttons
 
+## Introduction @unplugged
+
+Code the buttons on the @boardname@ to show that it's happy or sad.
+
+![Pressing the A and B buttons](/static/mb/projects/smiley-buttons/smiley-buttons.gif)
+
 ## Step 1 @fullscreen
 
 Place a ``||input:on button pressed||`` block to run code when button **A** is pressed.