Shawn videos (#1690)

* inclued in tutorials

* adding sim images to large icons

* added landing page

* restoring gifs in intro

* updated links

docs/behind-the-makecode-hardware.md

@@ -0,0 +1,28 @@
+# Behind the MakeCode Hardware
+
+* [Watch Playlist on Youtube](https://www.youtube.com/watch?v=qqBmvHD5bCw&list=PLMMBk9hE-SeqDYtw9pGNPsQ10V_EGMyGe)
+
+## Videos
+
+```codecard
+[
+    {
+        "name": "LEDs",
+        "description": "A fun video to learn how lights work",
+        "youTubeId": "qqBmvHD5bCw",
+        "imageUrl": "/static/mb/behindhardware/leds.jpg"
+    },
+    {
+        "name": "Buttons",
+        "description": "A fun video to learn how buttons work",
+        "youTubeId": "t_Qujjd_38o",
+        "imageUrl": "/static/mb/behindhardware/buttons.jpg"
+    },
+    {
+        "name": "Accelerometer",
+        "description": "A fun video to learn how the accelerometer detect motion",
+        "youTubeId": "byngcwjO51U",
+        "imageUrl": "/static/mb/behindhardware/accelerometer.jpg"
+    }
+]
+```

docs/projects/dice.md

@@ -2,12 +2,15 @@
 
 ## Introduction @unplugged
 
+Let's turn the @boardname@ into a dice!
+(Want to learn how the accelerometer works? [Watch this video](https://youtu.be/byngcwjO51U)).
+
 ![A microbit dice](/static/mb/projects/dice.png)
 
-Let's turn the @boardname@ into a dice! To do this, we need 3 pieces of code: one to detect a throw (shake), another to pick a random number, and then one to show the number.
-
 ## Step 1 @fullscreen
 
+We need 3 pieces of code: one to detect a throw (shake), another to pick a random number, and then one to show the number.
+
 Place the ``||input:on shake||`` block onto the editor workspace. It runs code when you shake the @boardname@.
 
 ```blocks

docs/projects/flashing-heart.md

@@ -2,9 +2,11 @@
 
 ## Introduction @unplugged
 
-Learn how to use the LEDs and make a flashing heart!
+Learn how to use the LEDs and make a flashing heart! 
+(Want to learn how lights work? [Watch this video](https://youtu.be/qqBmvHD5bCw)).
 
-![Heart shape in the LEDs](/static/mb/projects/flashing-heart/show-leds.gif)
+
+![Heart shape in the LEDs](/static/mb/projects/flashing-heart/sim.gif)
 
 ## Step 1 @fullscreen
 

docs/projects/smiley-buttons.md

@@ -3,8 +3,9 @@
 ## Introduction @unplugged
 
 Code the buttons on the @boardname@ to show that it's happy or sad.
+(Want to learn how the buttons works? [Watch this video](https://youtu.be/t_Qujjd_38o)).
 
-![Pressing the A and B buttons](/static/mb/projects/smiley-buttons/smiley-buttons.gif)
+![Pressing the A and B buttons](/static/mb/projects/smiley-buttons/sim.gif)
 
 ## Step 1 @fullscreen
 

docs/tutorials.md

@@ -10,6 +10,7 @@ Here are some cool tutorials to get you started with your @boardname@!
   "url":"/projects/flashing-heart",
   "description": "Make an animated flashing heart.",
   "imageUrl": "/static/mb/projects/a1-display.png",
+  "largeImageUrl": "/static/mb/projects/flashing-heart/sim.gif",
   "cardType": "tutorial",
   "label": "New? Start Here!",
   "labelClass": "purple ribbon large"
@@ -24,6 +25,7 @@ Here are some cool tutorials to get you started with your @boardname@!
   "url":"/projects/smiley-buttons",
   "description": "Show different smiley images by pressing the buttons.",
   "imageUrl": "/static/mb/projects/a2-buttons.png",
+  "largeImageUrl": "/static/mb/projects/smiley-buttons/sim.gif",
   "cardType": "tutorial"
 }, {
   "name": "Dice",

targetconfig.json

@@ -105,7 +105,8 @@
         "Tools": "projects/tools",
         "Turtle": "projects/turtle",
         "Blocks To JavaScript": "courses/blocks-to-javascript",
-        "Courses": "courses"
+        "Courses": "courses",
+        "Behind the MakeCode Hardware": "behind-the-makecode-hardware"
     },
     "electronManifest": {
         "latest": "v1.2.7"