Blocks to js 2 (#1340)

* added lesson

* added images

* missing comma

docs/courses.md

@@ -48,6 +48,11 @@ Fun project courses - make and experiment while learning about science and progr
 
 ```codecard
 [{
+  "name": "Blocks to JavaScript",
+  "description": "Learn to code using JavaScript",
+  "url": "/courses/blocks-to-javascript",
+  "imageUrl": "/static/courses/blocks-to-javascript.png"
+}, {
   "name": "SparkFun Inventor's Kit",
   "description": "Your map for navigating the waters of beginning embedded electronics, robotics and citizen science using the micro:bit.",
   "url": "https://learn.sparkfun.com/tutorials/sparkfun-inventors-kit-for-microbit-experiment-guide/introduction-to-the-sparkfun-inventors-kit-for-microbit",

docs/courses/blocks-to-javascript.md

@@ -14,11 +14,20 @@ Are you ready to try JavaScript to write your code?
         "name": "Hello JavaScript",
         "description": "Learn to convert your block code in JavaScript",
         "url": "/courses/blocks-to-javascript/hello-javascript",
-        "cardType": "side"
+        "cardType": "side",
+        "imageUrl": "/static/courses/blocks-to-javascript/hello-javascript.png"
+    },
+    {
+        "name": "Starter Blocks",
+        "description": "Start from blocks to jump into JavaScript",
+        "url": "/courses/blocks-to-javascript/starter-blocks",
+        "cardType": "side",
+        "imageUrl": "/static/courses/blocks-to-javascript/starter-blocks.png"
     }
 ]
 ```
 
 ## See Also
 
-[Hello JavaScript](/courses/blocks-to-javascript/hello-javascript)
+[Hello JavaScript](/courses/blocks-to-javascript/hello-javascript), 
+[Starter Blocks](/courses/blocks-to-javascript/starter-blocks)

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

@@ -0,0 +1,111 @@
+# Starter Blocks
+
+## ~ hint
+
+Use your blocks knownledge to learn JavaScript faster.
+
+## ~
+
+MakeCode can convert your blocks to JavaScript and back. Start from blocks and jump into JavaScript for an easier start.
+
+## Do it blocks then convert
+
+So you are pretty familiar with the blocks editor and still getting used to JavaScript. MakeCode can convert any block code into JavaScript. Let's see it in action.
+
+* create a simple program in the code editor
+
+```blocks
+input.onButtonPressed(Button.A, function () {
+    basic.showLeds(`
+        . . . . .
+        . . . . .
+        . . # . .
+        . . . . .
+        . . . . .
+        `)
+})
+```
+
+* click on the **{} JavaScript** button in the top menu to convert the blocks to JavaScript. Voila!
+
+```typescript
+input.onButtonPressed(Button.A, function () {
+    basic.showLeds(`
+        . . . . .
+        . . . . .
+        . . # . .
+        . . . . .
+        . . . . .
+        `)
+})
+```
+
+## Go back to blocks
+
+Do you feel like editing blocks again? MakeCode can convert back your JavaScript code into blocks.
+
+* replace a few dots '.' with hashmarks '#'
+
+```typescript
+input.onButtonPressed(Button.A, function () {
+    basic.showLeds(`
+        . . . . .
+        . . # . .
+        . # # # .
+        . . # . .
+        . . . . .
+        `)
+})
+```
+
+### ~ hint
+
+So you change your JavaScript code and nothing works anymore, there are tons of red squiggle and you don't understand why... Don't panic, use the **Undo** button to revert your changes until everything works again.
+
+### ~
+
+* click on the **Blocks** button in the top to convert the JavaScript back to blocks.
+
+```blocks
+input.onButtonPressed(Button.A, function () {
+    basic.showLeds(`
+        . . . . .
+        . . # . .
+        . # # # .
+        . . # . .
+        . . . . .
+        `)
+})
+```
+
+## Grey blocks are a good sign!
+
+If you start to writing more complex JavaScript (good job!), MakeCode might not be able to convert it back to blocks. In that case, you will see _grey blocks_ in your block code. They represent chunks of JavaScript that are too complicated for blocks.
+ 
+* go back to **JavaScript** and add a second frame to create animation. This is something you can do in JavaScript but not in blocks.
+
+```typescript
+input.onButtonPressed(Button.A, function () {
+    basic.showLeds(`
+        . . . . .    . . . . . 
+        . . # . .    . # # # .
+        . # # # .    . # # # .
+        . . # . .    . # # # .
+        . . . . .    . . . . .
+        `)
+})
+```
+
+* go to the **Blocks** editor and you will see a big **grey** block in the button handler. This is because you are creating code too complex for the blocks. Take it as a compliment!
+
+```blocks
+input.onButtonPressed(Button.A, function () {
+    basic.showLeds(`
+        . . . . .    . . . . . 
+        . . # . .    . # # # .
+        . # # # .    . # # # .
+        . . # . .    . # # # .
+        . . . . .    . . . . .
+        `)
+})
+```