diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
index 0c8d3da7..43e5acb4 100644
--- a/docs/SUMMARY.md
+++ b/docs/SUMMARY.md
@@ -137,6 +137,8 @@
             * [Project](/courses/csintro/finalproject/project)
             * [Examples](/courses/csintro/finalproject/examples)
             * [Standards](/courses/csintro/finalproject/standards)
+    * [Blocks to JavaScript](/courses/blocks-to-javascript)
+            * [Hello JavaScript](/courses/blocks-to-javascript/hello-javascript)
     * [Science experiments](/courses/ucp-science)
         * [Data collection](/courses/ucp-science/data-collection)
             * [Overview](/courses/ucp-science/data-collection/overview)
diff --git a/docs/courses/blocks-to-javascript.md b/docs/courses/blocks-to-javascript.md
new file mode 100644
index 00000000..ce89182c
--- /dev/null
+++ b/docs/courses/blocks-to-javascript.md
@@ -0,0 +1,24 @@
+# Blocks to JavaScript
+
+## ~ avatar
+
+Are you ready to try JavaScript to write your code?
+
+## ~
+
+### Projects
+
+```codecard
+[
+    {
+        "name": "Hello JavaScript",
+        "description": "Learn to convert your block code in JavaScript",
+        "url": "/courses/blocks-to-javascript/hello-javascript",
+        "cardType": "side"
+    }
+]
+```
+
+## See Also
+
+[Hello JavaScript](/courses/blocks-to-javascript/hello-javascript)
\ No newline at end of file
diff --git a/docs/courses/blocks-to-javascript/hello-javascript.md b/docs/courses/blocks-to-javascript/hello-javascript.md
new file mode 100644
index 00000000..16dd9ffa
--- /dev/null
+++ b/docs/courses/blocks-to-javascript/hello-javascript.md
@@ -0,0 +1,170 @@
+# Hello JavaScript
+
+## ~ avatar
+
+Want to learn to code the @boardname@ using JavaScript? Follow along this step-by-step project to get started.
+
+## ~
+
+## 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.
+
+```blocks
+basic.forever(function () {
+    basic.showLeds(`
+        . # . # .
+        # # # # #
+        # # # # #
+        . # # # .
+        . . # . .
+        `)
+    basic.showLeds(`
+        . . . . .
+        . . . . .
+        . . . . .
+        . . . . .
+        . . . . .
+        `)
+})
+```
+
+## Step 2 Converting blocks to JavaScript
+
+Click on the **{} JavaScript** button on the top of the editor to **convert your blocks into JavaScript**.
+
+![Toggle to JavaScript](/static/mb/blocks2js/toggle.gif)
+
+Once the JavaScript editor is loaded, your code will look like this:
+
+```typescript
+basic.forever(function () {
+    basic.showLeds(`
+        . # . # .
+        # # # # #
+        # # # # #
+        . # # # .
+        . . # . .
+        `)
+    basic.showLeds(`
+        . . . . .
+        . . . . .
+        . . . . .
+        . . . . .
+        . . . . .
+        `)
+})
+```
+
+Although it looks really different, the JavaScript code (text) has the same meaning as your blocks. Let's add comments in the code to explain what it does. Comments are lines that start with ``//``.
+
+```typescript
+// this is the "forever" block.
+// It makes the code inside of it run in a loop, over and over again.
+basic.forever(function () {
+    // this is the "show leds" block. 
+    // It reads the text (. # . ...) to figure out which LED is on.
+    // '.' means off and '#' means on
+    basic.showLeds(`
+        . # . # .
+        # # # # #
+        # # # # #
+        . # # # .
+        . . # . .
+        `)
+    // this is the second "show leds" block. 
+    // all LEDs are off so it only contains '.' characters.
+    basic.showLeds(`
+        . . . . .
+        . . . . .
+        . . . . .
+        . . . . .
+        . . . . .
+        `)
+// Every open bracket '{' or parenthesis '(' needs to be closed with a matching '}' or a ')'
+})
+```
+
+## 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.
+
+```typescript
+basic.forever(function () {
+    basic.showLeds(`
+        . # . # .
+        # # # # #
+        # # # # #
+        . # # # .
+        . . # . .
+        `)
+    // turning on a few LEDs
+    basic.showLeds(`
+        . . . . .
+        . # # # .
+        . # . # .
+        . . # . .
+        . . . . .
+        `)
+})
+```
+
+## 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.
+
+![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! 
+
+![JavaScript with squiggles and message](/static/mb/blocks2js/squigglesmessage.png)
+
+This is OK, simply use **Undo** to trace back your changes until you are back to code that does not have any errors.
+
+* 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
+
+![Example of dragging a code snippet](/static/mb/blocks2js/dragblock.gif)
+
+Writing new code is a bit harder than modifying it since you don't know the syntax yet.
+Good news though, you can drag snippets of code from the toolbox... just like in blocks. Click on the **Basic** category, then drag the ``||basic:show leds||`` code block into the JavaScript editor to add a new image.
+
+```typescript
+basic.forever(function () {
+    basic.showLeds(`
+        . # . # .
+        # # # # #
+        # # # # #
+        . # # # .
+        . . # . .
+        `)
+    basic.showLeds(`
+        . . . . .
+        . # # # .
+        . # . # .
+        . . # . .
+        . . . . .
+        `)
+    // this is the new code snippet dragged over from the toolbox
+    basic.showLeds(`
+. . . . .
+. . . . .
+. . # . .
+. . . . .
+. . . . .
+`)
+})
+```
+
+## ~ avatar
+
+Well done! You've just coded using a "text programming" language! Starting from blocks, you learned to convert them to JavaScript and then modify the code in the blocks as text. Wow, your're a pro now! Go back to [Blocks To JavaScript](/projects/blocks-to-javascript) to continue with another challenge.
+
+## ~
diff --git a/docs/static/mb/blocks2js/dragblock.gif b/docs/static/mb/blocks2js/dragblock.gif
new file mode 100644
index 00000000..f90f4cc1
Binary files /dev/null and b/docs/static/mb/blocks2js/dragblock.gif differ
diff --git a/docs/static/mb/blocks2js/squiggles.png b/docs/static/mb/blocks2js/squiggles.png
new file mode 100644
index 00000000..eeabd3e0
Binary files /dev/null and b/docs/static/mb/blocks2js/squiggles.png differ
diff --git a/docs/static/mb/blocks2js/squigglesmessage.png b/docs/static/mb/blocks2js/squigglesmessage.png
new file mode 100644
index 00000000..fd2d3d91
Binary files /dev/null and b/docs/static/mb/blocks2js/squigglesmessage.png differ
diff --git a/docs/static/mb/blocks2js/toggle.gif b/docs/static/mb/blocks2js/toggle.gif
new file mode 100644
index 00000000..3b5b2841
Binary files /dev/null and b/docs/static/mb/blocks2js/toggle.gif differ
diff --git a/targetconfig.json b/targetconfig.json
index 70b7ecc1..6cacb1f3 100644
--- a/targetconfig.json
+++ b/targetconfig.json
@@ -78,6 +78,7 @@
         "Science": "projects/science",
         "Tools": "projects/tools",
         "Turtle": "projects/turtle",
+        "Blocks To JavaScript": "courses/blocks-to-javascript",
         "Examples": "examples"
     }
 }