Make settings compile

support for settings package
1.4.2
2019-10-09 08:53:48 -07:00 · 2019-10-09 08:12:22 -07:00 · 2019-10-08 22:19:50 -07:00 · 2019-10-08 22:19:34 -07:00 · 2019-10-08 21:58:33 -07:00 · 2019-10-08 21:57:55 -07:00
205 changed files with 6156 additions and 7283 deletions
--- a/.gitignore
+++ b/.gitignore
@ -17,6 +17,7 @@ clients/**/bin/**
 clients/**/obj/**
 clients/electron/projects
 libs/**/_locales/**
+package-lock.json

 videos/**

--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - "8.9.0"
+script:
+  - "node node_modules/pxt-core/built/pxt.js travis"
+sudo: false
+cache:
+  directories:
+    - node_modules
--- a/README.md
+++ b/README.md
@ -1,13 +1,8 @@
-# LEGO® MINDSTORMS® Education EV3 for Microsoft MakeCode
+# LEGO® MINDSTORMS® Education EV3 for Microsoft MakeCode [![Build Status](https://travis-ci.org/microsoft/pxt-ev3.svg?branch=master)](https://travis-ci.org/microsoft/pxt-ev3)

-[![Build Status](https://ci2.dot.net/buildStatus/icon?job=Private/pxt_project_rainbow/master/pxt-ev3_Push)](https://ci2.dot.net/job/Private/job/pxt_project_rainbow/job/master/job/pxt-ev3_Push/)
+This repo contains the editor target hosted at https://makecode.mindstorms.com

-This repo contains the editor target hosted at https://makecode.legoeducation.com
-
-LEGO Auth: https://src.education.lego.com/groups/ev3-makecode (use Google Authenticator)
-LEGO Chat: https://chat.internal.education.lego.com/make-code/channels/town-square
-
-## Local Dev setup
+## Local setup

 These instructions assume familiarity with dev tools and languages.

@ -15,10 +10,6 @@ These instructions assume familiarity with dev tools and languages.
 * install Docker; make sure `docker` command is in your `PATH`
 * (optional) install [Visual Studio Code](https://code.visualstudio.com/)

-In a common folder,
-
-* clone https://github.com/Microsoft/pxt to ``pxt`` folder
-* clone https://github.com/Microsoft/pxt-common-packages to ``pxt-common-packages`` folder
 * clone https://github.com/Microsoft/pxt-ev3 to ``pxt-ev3`` folder
 * go to ``pxt`` and run

@ -26,6 +17,18 @@ In a common folder,
 npm install
 ```

+* to run the local server,
+```
+pxt serve --cloud
+```
+
+## Local Dev setup
+
+In the common folder,
+
+* clone https://github.com/Microsoft/pxt to ``pxt`` folder
+* clone https://github.com/Microsoft/pxt-common-packages to ``pxt-common-packages`` folder
+
 * go to ``pxt-common-packages`` and run

 ```
@ -57,12 +60,12 @@ cd libs/core
 pxt deploy
 ```

-### Jenkins build
-https://ci2.dot.net/job/Private/job/pxt_project_rainbow/job/master/
-
 ## License
 MIT

+## Trademarks
+MICROSOFT, the Microsoft Logo, and MAKECODE are registered trademarks of Microsoft Corporation. They can only be used for the purposes described in and in accordance with Microsoft’s Trademark and Brand guidelines published at https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general.aspx. If the use is not covered in Microsoft’s published guidelines or you are not sure, please consult your legal counsel or the MakeCode team (makecode@microsoft.com). 
+
 ## Code of Conduct

 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
--- a/cmds/cmds.ts
+++ b/cmds/cmds.ts
@ -1,14 +0,0 @@
-/// <reference path="../node_modules/pxt-core/built/pxtlib.d.ts" />
-
-import * as fs from 'fs';
-
-const deploy = require("./editor/deploy")
-
-export function deployCoreAsync(resp: pxtc.CompileResult) {
-    return deploy.deployCoreAsync(resp, process.env["PXT_SERIAL"] ? false : true)
-        .then(() => {
-            fs.writeFileSync("built/full-" + pxtc.BINARY_UF2, resp.outfiles[pxtc.BINARY_UF2], {
-                encoding: "base64"
-            })
-        })
-}
--- a/cmds/tsconfig.json
+++ b/cmds/tsconfig.json
@ -1,14 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "es5",
-        "noImplicitAny": true,
-        "noImplicitReturns": true,
-        "declaration": true,
-        "outDir": "../built",
-        "module": "commonjs",
-        "rootDir": ".",
-        "newLine": "LF",
-        "sourceMap": false,
-        "types": ["node"]
-    }
-}
--- a/docfiles/footer.html
+++ b/docfiles/footer.html
@ -11,5 +11,8 @@
        <div class="ui container horizontal small divided link list">
            <a class="ui centered item" href="https://makecode.com/" title="Microsoft MakeCode" target="_blank" rel="noopener">Powered by Microsoft MakeCode</a>
        </div>
+        <div class="ui centered container small list">
+            <p class="item">LEGO, the LEGO logo, MINDSTORMS and the MINDSTORMS EV3 logo are trademarks and/ or copyrights of the LEGO Group. ©2018 The LEGO Group. All rights reserved.</p>
+        </div>
    </div>
 </footer>
--- a/docs/SUMMARY.md
+++ b/docs/SUMMARY.md
@ -4,7 +4,10 @@

 * [Troubleshoot](/troubleshoot)
 * [EV3 Manager](https://ev3manager.education.lego.com/)
+* [Bluetooth](/bluetooth)
+* [Forum](https://forum.makecode.com)
 * [LEGO Support](https://www.lego.com/service/)
+* [FIRST LEGO League](/fll)

 ## Projects #projects

@ -18,11 +21,14 @@
    * [What Animal Am I?](/tutorials/what-animal-am-i)
    * [Music Brick](/tutorials/music-brick)
    * [Run Motors](/tutorials/run-motors)
+    * [Tank ZigZag](/tutorials/tank-zigzag)
    * [Touch to Run](/tutorials/touch-to-run)
    * [Touch Sensor Values](/tutorials/touch-sensor-values)
    * [What Color?](/tutorials/what-color)
    * [Line Following](/tutorials/line-following)
    * [Red Light, Green Light](/tutorials/redlight-greenlight)
+    * [Reflected Light Measure](/tutorials/reflected-light-measure)
+    * [Reflected Light Calibration](/tutorials/reflected-light-calibration)
    * [Object Near?](/tutorials/object-near)
    * [Security Alert](/tutorials/security-alert)

@ -82,12 +88,12 @@
            * [reset](/reference/sensors/gyro/reset)
        * [Ultrasonic](/reference/sensors/ultrasonic)
            * [on event](/reference/sensors/ultrasonic/on-event)
-            * [distance](reference/sensors/ultrasonic/distance)
-            * [pause until](reference/sensors/ultrasonic/pause-until)
+            * [distance](/reference/sensors/ultrasonic/distance)
+            * [pause until](/reference/sensors/ultrasonic/pause-until)
        * [Infrared](/reference/sensors/infrared)
            * [on event](/reference/sensors/infrared/on-event)
-            * [distance](reference/sensors/infrared/proximity)
-            * [pause until](reference/sensors/infrared/pause-until)
+            * [distance](/reference/sensors/infrared/proximity)
+            * [pause until](/reference/sensors/infrared/pause-until)
        * [Infrared beacon](/reference/sensors/beacon)
            * [on event](/reference/sensors/beacon/on-event)
            * [pause until](/reference/sensors/beacon/pause-until)
@ -123,3 +129,7 @@
        * [log](/reference/console/log)
        * [log value](/reference/console/log-value)
        * [send to screen](/reference/console/send-to-screen)
+
+## #misc
+
+## devs
--- a/docs/about.md
+++ b/docs/about.md
@ -28,7 +28,7 @@ program to a **.uf2** file, which you then copy to the **@drivename@** drive. Th

 ### ~ hint

-Not seeing the **@drivename@** drive? Make sure to upgrade your firmware at https://ev3manager.education.lego.com/. Try these [troubleshooting](/troubleshoot) tips if you still have trouble getting the drive to appear.
+**Experimental support** for Bluetooth download is now available. Please read the [Bluetooth](/bluetooth) page for more information.

 ### ~

--- a/docs/about/editor-features.md
+++ b/docs/about/editor-features.md
@ -70,3 +70,12 @@
 | ![Download button](/static/about/download-button.png) |
 | Download Button |

+#### #explorer-images
+
+| |
+|-|
+| ![Explorer button](/static/about/explorer-button.png) |
+| Explorer Button |
+| &nbsp; |
+| ![Explorer File View](/static/about/explorer-view.png) |
+| Explorer File View |
--- a/docs/bluetooth.md
+++ b/docs/bluetooth.md
@ -0,0 +1,62 @@
+# Bluetooth
+
+This page describes the procedure to download MakeCode program to the EV3 brick 
+over Bluetooth.
+
+## ~ hint
+
+### WARNING: EXPERIMENTAL FEATURES AHEAD! 
+
+Support for Bluetooth download relies on [Web Serial](https://wicg.github.io/serial/),
+an experimental browser feature. Web Serial is a work [in progress](https://www.chromestatus.com/feature/6577673212002304); 
+it may change or be removed in future versions without notice.
+
+By enabling these experimental browser features, you could lose browser data or compromise your device security 
+or privacy.
+
+## ~
+
+https://youtu.be/VIq8-6Egtqs
+
+## Supported browsers
+
+* Chrome desktop, version 77 and higher, Windows 10 or Mac OS.
+* [Edge Insider desktop](https://www.microsoftedgeinsider.com), version 77 and higher, Windows 10 or Mac OS.
+
+To make sure your browser is up to date, go to the '...' menu, click "Help" then "About".
+
+Next you need to enable the experimental features (this may change in the future)
+
+* go to **chrome://flags/#enable-experimental-web-platform-features** and **enable** 
+**Experimental Web Platform features**
+
+![A screenshot of the flags page in chrome](/static/bluetooth/experimental.png)
+
+## Machine Setup
+
+* pair your EV3 brick with your computer over Bluetooth. This is the usual pairing procedure.
+
+## Download over Bluetooth
+
+* go to https://makecode.mindstorms.com/
+* click on **Download** to start a file download as usual
+* on the download dialog, you should see a **Bluetooth** button. Click on the
+**Bluetooth** button to enable the mode.
+* **make sure the EV3 brick is not running a program**
+* click on **Download** again to download over bluetooth.
+
+## Choosing the correct serial port
+
+Unfortunately, the browser dialog does not make it easy to select which serial port is the brick.
+
+* On Windows, choose ``Standard Serial over Bluetooth``. There might be multiple of those but only one works. Try your luck! Once you know the COM port number, remember it for the next time around.
+* On Mac OS, choose ``cu.BRICKNAME-SerialPort``
+
+## Known issues
+
+* We do not detect properly that the program is running on the brick. Make sure to stop the program before starting the download procedure.
+* The list of programs on the brick screen is not updated when uploading via bluetooth.
+
+## Feedback
+
+Please send us your feedback through https://forum.makecode.com.
--- a/docs/coding/autonomous-parking.md
+++ b/docs/coding/autonomous-parking.md
@ -12,7 +12,7 @@ Design cars that can park themselves safely without driver intervention.
 * What would it take to ensure that autonomous cars are safe?
 * What types of movements do autonomous cars need to perform?

-## Construct 
+## Construct

 ### Build

@ -20,6 +20,12 @@ Build a @boardname@ vehicle that can park itself safely without driver intervent

 [![EV3- Robot Driving Base](/static/coding/autonomous-parking/ev3-robot-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)

+### ~hint
+
+If clicking the above image doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+### ~
+
 ### Check

 Before you program, check:
@ -28,7 +34,7 @@ Before you program, check:
 * Are the wheels correctly installed?
 * Are the wheels rotating freely?

-### Program 
+### Program

 Write a program that will make the robot turn three times in various ways.

@ -109,7 +115,7 @@ Click Download and follow the instructions to get your code onto your EV3 Brick.

 ### Differentiation

-Create a program that simulates displaying appropriate warning lights while parking. 
+Create a program that simulates displaying appropriate warning lights while parking.

 ### ~hint

@ -164,8 +170,8 @@ Click Download and follow the instructions to get your code onto your EV3 Brick.

 * Click on the JavaScript tab and experiment with changing the values in the code.
 * Add a custom image or sounds from the Brick or Music menus.
-* Create a video of your project, especially your final presentation and your robot’s performance. Explain some important features of your software program. 
-* Include an image of your program with comments. 
-* Add a team photograph! 
+* Create a video of your project, especially your final presentation and your robot’s performance. Explain some important features of your software program.
+* Include an image of your program with comments.
+* Add a team photograph!

 Congratulations! What will you design next?
--- a/docs/coding/line-detection.md
+++ b/docs/coding/line-detection.md
@ -24,6 +24,12 @@ Build red and green “lights” for your robot to detect. You can use LEGO bric

 [![IMAGE: Color Squares](/static/coding/line-detection/ev3-color-squares.jpg)](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/color%20squares-0a88dfd98bb2e64b5b8151fc422bae36.pdf)

+### ~hint
+
+If clicking the above images doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+### ~
+
 ### Check

 Before you program, check:
@ -51,7 +57,7 @@ Consider using these blocks in your solution:

 ```block
 loops.forever(function () {
-	
+
 })
 motors.largeBC.steer(0, 50)
 sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
@ -77,9 +83,9 @@ loops.forever(function () {

 ### Download and test

-Click **Download** and follow the instructions to get your code onto your EV3 Brick. 
+Click **Download** and follow the instructions to get your code onto your EV3 Brick.

-Congratulations! Your robot can stop at a red light. 
+Congratulations! Your robot can stop at a red light.

 Now add to your program and have your robot to drive forward again when the light changes from red to green.

@ -102,7 +108,7 @@ loops.forever(function () {

 ### Download and test

-Click **Download** and follow the instructions to get your code onto your EV3 Brick. 
+Click **Download** and follow the instructions to get your code onto your EV3 Brick.

 ## Contemplate

@ -116,7 +122,7 @@ Draw a dark line with tape or marker for your robot to cross.

 Consider using these blocks in your solution:

-```block 
+```block
 motors.largeBC.steer(0, 50)
 music.playSoundEffect(sounds.systemGeneralAlert)
 ```
@ -143,7 +149,7 @@ loops.forever(function () {

 #### Download and test

-Click **Download** and follow the instructions to get your code onto your EV3 Brick. 
+Click **Download** and follow the instructions to get your code onto your EV3 Brick.

 #### Differentiation

@ -157,7 +163,7 @@ Consider using these blocks in your solution:

 ```block
 while (true) {
-	
+
 }
 motors.largeBC.steer(0, 50)
 ```
@ -166,7 +172,7 @@ motors.largeBC.steer(0, 50)

 ```block
 if (true) {
-	
+
 } else {

 }
@ -184,12 +190,10 @@ if (true) {

 ```blocks
 forever(function () {
-    while (true) {
-        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Black)
+    while (sensors.color3.color() == ColorSensorColor.Black) {
        motors.largeBC.steer(-30, 50)
    }
-    while (true) {
-        sensors.color3.pauseUntilColorDetected(ColorSensorColor.White)
+    while (sensors.color3.color() == ColorSensorColor.White) {
        motors.largeBC.steer(30, 50)
    }
 })
@ -203,11 +207,9 @@ Else the Color Sensor detects the color white, start motors ``B`` and ``C`` (dri

 ```blocks
 forever(function () {
-    if (true) {
-        sensors.color3.pauseUntilColorDetected(ColorSensorColor.Black)
+    if (sensors.color3.color() == ColorSensorColor.Black) {
        motors.largeBC.steer(-30, 50)
    } else {
-        sensors.color3.pauseUntilColorDetected(ColorSensorColor.White)
        motors.largeBC.steer(30, 50)
    }
 })
@ -215,7 +217,7 @@ forever(function () {

 ### Download and test

-Click **Download** and follow the instructions to get your code onto your EV3 Brick. 
+Click **Download** and follow the instructions to get your code onto your EV3 Brick.

 ### Share

@ -232,8 +234,8 @@ Personalize:

 * Click on the **JavaScript** tab and experiment with changing the values in the code.
 * Add a custom image or sounds from the ``||brick:Brick||`` or ``||music:Music||`` menus.
-* Create a video of your project, especially your final presentation and your robot’s performance. Explain some important features of your software program. 
-* Include an image of your program with comments. 
-* Add a team photograph! 
+* Create a video of your project, especially your final presentation and your robot’s performance. Explain some important features of your software program.
+* Include an image of your program with comments.
+* Add a team photograph!

 Congratulations! What will you design next?
--- a/docs/coding/object-detection.md
+++ b/docs/coding/object-detection.md
@ -4,7 +4,7 @@ Design ways to avoid accidents between vehicles and objects in the road.

 ![Deer in the road](/static/coding/object-detection/road-deer.jpg)

-## Connect 
+## Connect

 Think about:

@ -12,7 +12,7 @@ Think about:
 * What do you need to be aware of to avoid collisions with obstacles?
 * What causes traffic jams in high density areas?

-## Construct 
+## Construct

 ### Build

@ -20,10 +20,16 @@ Build a @boardname@ vehicle that can avoid accidents between vehicles and object

 [![EV3 Robot Driving Base](/static/coding/object-detection/ev3-robot-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-ultrasonic-sensor-driving-base-61ffdfa461aee2470b8ddbeab16e2070.pdf)

-Build an obstacle for your robot to detect. You can build the **cuboid model** out of LEGO bricks or an obstacle of your choice. 
+Build an obstacle for your robot to detect. You can build the **cuboid model** out of LEGO bricks or an obstacle of your choice.

 [![Cubiod block](/static/coding/object-detection/ev3-cuboid.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-cuboid-dc93b2e60bed2981e76b3bac9ea04558.pdf)

+### ~hint
+
+If clicking the above images doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+### ~
+
 ### Check

 Before you program, check:
@ -38,7 +44,7 @@ Before you program, check:
 * Program your robot to detect any obstacles that might appear while the robot is moving forward (or backward).
 * Make the robot stop when it detects an object that is less than 20 cm away.

-Before you program, think about:  
+Before you program, think about:
 * How will you program the robot to detect obstacles?
 * How will you program the robot to stop at obstacles?
 * Which programming blocks will you use?
@ -59,7 +65,7 @@ motors.stopAll()

 ### ~

-### Sample Solution 
+### Sample Solution

 1. Start the program when EV3 ``enter`` button is pressed.
 2. Turn motors ``B`` and ``C`` on at speed ``50``.
@ -80,7 +86,7 @@ Click **Download** and follow the instructions to get your code onto your EV3 Br

 ## Contemplate

-On the road, when a driver sees and object, they slow their car down before coming to a full stop. 
+On the road, when a driver sees and object, they slow their car down before coming to a full stop.

 Program your EV3 Driving Base to do the same.

@ -93,7 +99,7 @@ If the Ultrasonic Sensor:
 ### ~hint

 Consider using this block in your solution:
- 
+
 ```block
 if (true) {
 }
@ -101,7 +107,7 @@ if (true) {

 ### ~

-### Sample Solution 
+### Sample Solution

 ```blocks
 loops.forever(function () {
@ -118,7 +124,7 @@ loops.forever(function () {

 Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the ``center`` button on the EV3 Brick to run the program.

-## Continue 
+## Continue

 * Get together with other building teams and make a traffic jam by placing all of your robots in a line with varying amounts of space between them.
 * Have everyone start their robots at the same time and see what happens.
@ -130,8 +136,8 @@ Click **Download** and follow the instructions to get your code onto your EV3 Br

 * Share what you think “efficiency in programming” means.
 * Explore the different solutions other programmers came up with.
-* Create a video of your project, especially your final presentation and your robot’s performance. Explain some important features of your software program. 
-* Include an image of your program with comments. 
-* Add a team photograph! 
+* Create a video of your project, especially your final presentation and your robot’s performance. Explain some important features of your software program.
+* Include an image of your program with comments.
+* Add a team photograph!

 Congratulations! What will you design next?
--- a/docs/design-engineering/make-it-communicate.md
+++ b/docs/design-engineering/make-it-communicate.md
@ -1,6 +1,6 @@
 # Make A System That Communicates

-## Connect 
+## Connect

 ### Design Brief

@ -20,10 +20,10 @@ Think about:
 * What kind of motorized mechanism can be used to control the movements of a robot?
 * How can the robot sense where it is along the path?
 * How can the robot communicate its position?
- 
+
 ![EV3 + LEGO Bricks](/static/lessons/make-it-communicate/ev3-plus-parts.jpg)

-## Construct 
+## Construct

 ### Build

@ -37,13 +37,19 @@ More building ideas:

 [![Color Sensor 2](/static/lessons/make-it-communicate/ev3-color-sensor2.jpg)](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/color%20sensor_v2-e7fd54b6fa3cdfe36f414c1d2510f9cb.pdf)

+### ~hint

-Build a path for your robot to follow. You can use electrical tape on a floor, or marker on paper. You can use objects as milestones to indicate a path that can be detected by either the Touch Sensor, Color Sensor, or Ultrasonic Sensor. 
+If clicking the above images doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.

-### Program 
+### ~
+
+
+Build a path for your robot to follow. You can use electrical tape on a floor, or marker on paper. You can use objects as milestones to indicate a path that can be detected by either the Touch Sensor, Color Sensor, or Ultrasonic Sensor.
+
+### Program
+
+Before you program, think about:

-Before you program, think about: 
- 
 * How will you program the robot to follow a path?
 * How will you program the robot to communicate its position?
 * Which programming blocks will you use?
@ -54,7 +60,7 @@ Explore the different Motor and Sensor blocks in the programming menu.

 ### ~

-### Sample Solution 
+### Sample Solution

 [![Video: EV3 Track Rover](/static/lessons/make-it-communicate/ev3-track-rover.jpg)](https://legoeducation.23video.com/v.ihtml/player.html?token=79c99735f906403a4dd7f2909935983d&source=embed&photo%5fid=19857954)

@ -70,15 +76,21 @@ Two copies of the tracks are built: one for the right side and a mirror image fo

 [![Track rover assembled](/static/lessons/make-it-communicate/ev3-track-rover2.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/ev3-dep/building%20instructions/track-rover-bi-6aadb1b053df0c58a0dea108b5ce0eea.pdf)

-### Sample Program Solution 
+### ~hint

-This program works with the Track Rover. If you create a different robot, adjust the program to fit your solution. 
+If clicking the above image doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.

-Program summary: 
+### ~
+
+### Sample Program Solution
+
+This program works with the Track Rover. If you create a different robot, adjust the program to fit your solution.
+
+Program summary:

 * If the Color Sensor sees black, Motor B runs at -50 power and Motor C turns off.
 * If the Color Sensor sees white, Motor B turns off and Motor C runs at -50 power.
-* If the Color Sensor sees green, all motors stop and the green sound plays. 
+* If the Color Sensor sees green, all motors stop and the green sound plays.
 * The robot waits one second, then motors move forward.
 * If the Color Sensor sees red, all motors stop, and the red sound plays.
 * The robot waits one second, then motors move forward.
@ -108,44 +120,44 @@ forever(function () {

 Click Download and follow the instructions to get your code onto your EV3 Brick. Press the center button on the EV3 Brick to run the program.

-## Contemplate 
+## Contemplate

-### Test and Analyze 
+### Test and Analyze

 As you work on your solution:

-1. Describe one part of your design that worked especially well. 
-2. Describe one design change that you had to make. 
-3. What will you try next? 
+1. Describe one part of your design that worked especially well.
+2. Describe one design change that you had to make.
+3. What will you try next?


-### Review and Revise 
+### Review and Revise

-Take a moment to reflect on your robot solution. 
+Take a moment to reflect on your robot solution.

 Think about:

-* Can the robot’s movement be more accurate? 
+* Can the robot’s movement be more accurate?
 * What are some ways that others have solved the problem?

 Describe two ways you could improve your robot.

-## Continue 
+## Continue

 ### Personalize your project

-* Add/remove LEGO elements to improve the way your robot moves. 
+* Add/remove LEGO elements to improve the way your robot moves.
 * Click on the JavaScript tab and experiment with changing the values in the code.
 * Add a custom image or sounds by adding blocks from the Brick or Music menus.

-## Communicate 
+## Communicate

 Here are some ideas:

-* Create a video of your project, especially your final presentation and your robot’s performance. 
-* Explain some important features of your software program. 
-* Produce a building guide for your model by taking a series of photographs as you deconstruct it. 
-* Include an image of your program with comments. 
-* Add a team photograph! 
+* Create a video of your project, especially your final presentation and your robot’s performance.
+* Explain some important features of your software program.
+* Produce a building guide for your model by taking a series of photographs as you deconstruct it.
+* Include an image of your program with comments.
+* Add a team photograph!

 Congratulations! What will you design next?
--- a/docs/design-engineering/make-it-move.md
+++ b/docs/design-engineering/make-it-move.md
@ -30,18 +30,26 @@ If you want some building help you can follow these instructions.

 [![Toddle Bot](/static/lessons/make-it-move/toddle-bot.jpg)](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/toddle%20bot-3dcad146d7f5deac4753f93e9dcc0739.pdf)

+Click [here](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/toddle%20bot-3dcad146d7f5deac4753f93e9dcc0739.pdf)
+
+### ~hint
+
+If clicking the above image or link doesn't open the instructions, right-click on the link and choose "Save link as..." to download the PDF.
+
+### ~
+
 ### Program

 Before you program, think about:

-* How will you program the robot to move? 
+* How will you program the robot to move?
 * How will you program the robot to stop?
 * How will you program the robot to display the distance moved?

 Which programming blocks will you use:

-* To turn on and turn off the motor or motors? 
-* To display the distance moved? 
+* To turn on and turn off the motor or motors?
+* To display the distance moved?

 ### Sample Code

@ -49,7 +57,7 @@ Example code of a robot that moves without wheels using one motor:

 * The robot moves with ``large motor D`` rotating at ``-100`` speed
 * The robot moves for ``30000`` milliseconds (30 seconds)
-* The robot stops 
+* The robot stops
 * The robot displays the text ``"30cm"``

 ```blocks
@ -65,7 +73,7 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {

 Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the center button on the EV3 Brick to run the program.

-## Contemplate 
+## Contemplate

 ### Test and Analyze

--- a/docs/design-engineering/make-it-smarter.md
+++ b/docs/design-engineering/make-it-smarter.md
@ -1,6 +1,6 @@
-# Make It Smarter and Faster 
+# Make It Smarter and Faster

-## Connect 
+## Connect

 ### Design Brief

@ -10,52 +10,52 @@ https://www.youtube.com/watch?v=y9-A_C_08KY

 * What do the robots in the video need to be able to sense, plan, and act?
 * What senses do humans have and why are they important to us?
-* How many human-like senses do you see the robots demonstrating? 
+* How many human-like senses do you see the robots demonstrating?

-### Brainstorm 
+### Brainstorm

 Discuss different solutions to the design brief.

-Think about: 
+Think about:

-* What kind of creature can it be? 
-* How can it move? 
-* What does it need to be aware so that it stays safe, well fed and warm (or cool)? 
-* Is it looking for food, a safe place to hide or a warm place to soak up the sun? 
-* Will the creature need to move fast or slow? 
-* Will it need to turn? 
+* What kind of creature can it be?
+* How can it move?
+* What does it need to be aware so that it stays safe, well fed and warm (or cool)?
+* Is it looking for food, a safe place to hide or a warm place to soak up the sun?
+* Will the creature need to move fast or slow?
+* Will it need to turn?
 * Will it need to go backward?

 ![EV3 and bricks](/static/lessons/make-it-smarter/bricks.png)

 ## Construct
- 
+
 ### Build

 Think about a creature’s movement for inspiration. Your mechanism can be attached or unattached to the EV3 Brick. You can start by tinkering with the LEGO elements in the picture add then build on.

-More building ideas: 
+More building ideas:

-| | | | | |
-|-|-|-|-|-|
-|[![EV3 Frames](/static/lessons/make-it-smarter/ev3-parts-frames.jpg)][EV3 Frames] | |[![EV3 Color Sensor 1](/static/lessons/make-it-smarter/ev3-parts-color-sensor-1.jpg)][Color Sensor 1] | |[![EV3 Gyro Sensor](/static/lessons/make-it-smarter/ev3-parts-gyro-sensor.jpg)][Gyro Sensor] |
-| [EV3 Frames] | | [Color Sensor 1] | | [Gyro Sensor] |
-<br/>

-| | | | | |
-|-|-|-|-|-|
-|[![EV3 Ultrasonic Sensor](/static/lessons/make-it-smarter/ev3-parts-ultrasonic-sensor.jpg)][Ultrasonic Sensor] | | [![EV3 Touch Sensor](/static/lessons/make-it-smarter/ev3-parts-touch-sensor.jpg)][Touch Sensor] | | [![EV3 Gyro Sensor](/static/lessons/make-it-smarter/ev3-parts-jaw.jpg)][Jaw] |
-| [Ultrasonic Sensor] | | [Touch Sensor] | | [Jaw] |
-<br/>
+* [EV3 Frames]
+* [Color Sensor 1]
+* [Gyro Sensor]
+* [Ultrasonic Sensor]
+* [Touch Sensor]
+* [Jaw]
+* [Leg 1] 
+* [Leg 2]
+* [Leg 3]

-| | | | | |
-|-|-|-|-|-|
-| [![EV3 Leg 1](/static/lessons/make-it-smarter/ev3-parts-leg-1.jpg)][Leg 1] | | [![EV3 Leg 2](/static/lessons/make-it-smarter/ev3-parts-leg-2.jpg)][Leg 2] | | [![EV3 Leg 3](/static/lessons/make-it-smarter/ev3-parts-leg-3.jpg)][Leg 3] |
-| [Leg 1] | | [Leg 2] | | [Leg 3] |
+### ~hint

-### Program 
+If clicking the above links doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.

-Before you program, think about:  
+### ~
+
+### Program
+
+Before you program, think about:

 * How will you program the robot to sense?
 * How will you program the robot to respond?
@ -67,7 +67,7 @@ Before you program, think about:

 ### ~

-### Sample Solution 
+### Sample Solution

 The Insect uses its Ultrasonic Sensor to sense danger and move away from a threat.

@ -86,18 +86,24 @@ Building Instructions:

 [![Insect robot](/static/lessons/make-it-smarter/insect-bot.jpg)](https://le-www-live-s.legocdn.com/sc/media/files/support/mindstorms%20ev3/building-instructions/design%20engineering%20projects/insect-94b8a46f0dc5082c9d78ddb734626dc9.pdf)

-### Sample Solution 
+### ~hint

-This program checks if the Ultrasonic Sensor senses something near. 
+If clicking the above images or links doesn't open the instructions, right-click on the link and choose "Save link as..." to download the PDF.

-The blocks inside the ``||loops:forever||`` loop have these actions: 
+### ~
+
+### Sample Solution
+
+This program checks if the Ultrasonic Sensor senses something near.
+
+The blocks inside the ``||loops:forever||`` loop have these actions:

 1. Turn on the ``green`` EV3 Brick Status Light.
 2. Wait for Ultrasonic Sensor to detect an object.
 3. Turn on Motors ``A`` and ``D`` in opposite directions.
-4. Wait for one quarter of a second (``1500`` milli seconds).
+4. Wait for one and a half seconds (``1500`` milli seconds).
 5. Reverse the direction of Motors ``A`` and ``D``.
-6. Wait for one quarter of a second.
+6. Wait for one and a half seconds.
 7. Stop all motors.
 8. Make an insect chirping sound.
 9. Loop continuously so that the insect wanders around when the Ultrasonic Sensor is detects something.
@ -119,44 +125,44 @@ forever(function () {

 Click **Download** and follow the instructions to get your code onto your EV3 Brick. Press the center button on the EV3 Brick to run the program.

-## Contemplate 
+## Contemplate

-### Test and Analyze 
+### Test and Analyze

-As you work on your solution: 
-1. Describe one part of your design that worked especially well. 
-2. Describe one design change that you had to make. 
-3. What will you try next? 
+As you work on your solution:
+1. Describe one part of your design that worked especially well.
+2. Describe one design change that you had to make.
+3. What will you try next?

-### Review and Revise 
+### Review and Revise

-Take a moment to reflect on your robot solution. 
+Take a moment to reflect on your robot solution.

-Think about: 
+Think about:

-* Does your robot move when the sensor is activated? 
-* If not, what will you change to make the robot’s ability to sense and respond more obvious? 
-* What other behaviors can you add to the robot to make it more realistic? 
+* Does your robot move when the sensor is activated?
+* If not, what will you change to make the robot’s ability to sense and respond more obvious?
+* What other behaviors can you add to the robot to make it more realistic?

 Describe two ways you could improve your robot.

-## Continue 
+## Continue

 Personalize your project:

-* Add/remove LEGO elements to improve the way your robot moves. 
+* Add/remove LEGO elements to improve the way your robot moves.
 * Click on the JavaScript tab and experiment with changing the values in the code.
 * Add a custom image or sounds by adding blocks from the Brick or Music menus.
 * Does your robot resemble a creature? Maybe add more craft materials to your project.

-## Communicate 
+## Communicate

-Here are some ideas: 
+Here are some ideas:

-* Create a video of your project, especially your final presentation and your robot’s performance. Explain some important features of your software program. 
-* Produce a building guide for your model by taking a series of photographs as you deconstruct it. 
-* Include an image of your program with comments. 
-* Add a team photograph! 
+* Create a video of your project, especially your final presentation and your robot’s performance. Explain some important features of your software program.
+* Produce a building guide for your model by taking a series of photographs as you deconstruct it.
+* Include an image of your program with comments.
+* Add a team photograph!

 Congratulations! What will you design next?

--- a/docs/examples.md
+++ b/docs/examples.md
@ -212,6 +212,12 @@ Here are some fun programs for your @boardname@!
  "description": "Keep your brick entertained and happy",
  "url":"/examples/happy-unhappy",
  "cardType": "example"
+}, {
+{
+  "name": "Turtle",
+  "description": "Encode moves and run them on a driving base",
+  "url":"/examples/turtle",
+  "cardType": "example"
 }, {
  "name": "Distance Measurer",
  "description": "Use a motor to measure angle and distance",
--- a/docs/extensions.md
+++ b/docs/extensions.md
@ -0,0 +1,18 @@
+# Extensions
+
+## #gallery
+
+## Using Extensions
+
+In the web editor, click on ``Settings`` then ``Extensions`` to search and add extensions to the project.
+The Blocks and JavaScript definitions will be automatically loaded in the editor.
+
+## Custom extensions
+
+The [Build Your Own Extension](https://makecode.com/extensions/getting-started) manual is for advanced users who want to publish their own extension. 
+
+## ~ hint
+
+**Extensions** were previously called **Packages** in MakeCode.
+
+## ~
--- a/docs/file-manager.pdf
+++ b/docs/file-manager.pdf
--- a/docs/fll.md
+++ b/docs/fll.md
@ -0,0 +1,129 @@
+# MakeCode for _FIRST_ LEGO League
+
+![FIRST LEGO League logo](/static/fll/fll-logo.png)
+
+**For teams participating in City Shaper challenge**, you can use MakeCode for your challenge (see [City Shaper Challenge, page 7 bottom](https://firstinspiresst01.blob.core.windows.net/fll/2020/city-shaper-game-guide-pdf.pdf)!
+
+We’ve compiled a list of resources and information that we hope will be helpful for you.
+
+* **Got a question? Post it on the forums** at https://forum.makecode.com/
+
+## FAQ
+
+### I found a bug what do I do?
+
+If you found a bug, please try if it hasn't been fixed yet! Go to https://makecode.mindstorms.com/beta and try if the bug is corrected. Otherwise, please tell us at https://forum.makecode.com/.
+
+### How do I use MakeCode with my EV3?
+
+* You will need to install the latest EV3 firmware on your brick. Instructions on how to do that are located here: https://makecode.mindstorms.com/troubleshoot.
+* You will need a computer with a USB port to connect to the EV3 in order to download your programs.
+* You will need internet access and a browser on your computer to get to https://makecode.mindstorms.com.
+* You can [install the app](/offline-app) to use the editor offline.
+
+### I know LabView, how is MakeCode different?
+
+We have compiled a guide for EV3 LabView users at https://makecode.mindstorms.com/labview.
+
+### What’s the best way to get started with MakeCode?
+
+Go to https://makecode.mindstorms.com. The home screen is filled with videos, tutorials and examples that might be relevant for your missions.
+
+On the home page, scroll down to the **FLL / City Shaper** section for specific lessons related to Mission 2.
+
+### Can I load both LEGO MINDSTORMS EV3 Software and MakeCode programs onto my EV3?
+
+Yes.
+
+### Can I run the program again on the brick?
+
+![EV3 Brick with Try in BrkProg_Save Folder in File Manager](/static/getting-started/try-in-file-manager.png)
+
+Use the Brick Buttons and navigate to the File Manager tab.  Open the **BrkProg_SAVE** folder, 
+select your program and click the center button to run it again.
+
+### Does it work without internet?
+
+No, the editor is cached in your browser cache. However, you can also download the [offline app](/offline-app) in case you need to install it on a computer.
+
+### How do I figure out what a block does?
+
+You can right-click on any block and select “Help” in the context menu to open the documentation page describing what that block does.
+
+![Select help in context menu for block](/static/fll/context-help.jpg)
+
+### How do I program in JavaScript?
+
+Click the **JavaScript** button at the top of the page to get to the JavaScript editor. Students can drag and drop code snippets from the Toolbox on the left, or type directly in the editor. You can switch back and forth between **Blocks** and **JavaScript** as you program.
+
+![Coding in JavaScript](/static/fll/code-js.gif)
+
+Also, watch the [Text-based Coding](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=3513a83b87fe536b2dc512237465fd1b&source=embed&photo%5fid=35719471) video for more about coding using the JavaScript editor.
+
+### How do I use the Simulator?
+
+The Simulator will show the physical representation of your code blocks. For example, based on this code snippet, the Simulator will show the touch sensor on Port 1, and a large motor on Port D.
+
+```blocks
+sensors.touch1.onEvent(ButtonEvent.Pressed, function () {
+    motors.largeD.run(50)
+})
+```
+
+![Simulator demonstration](/static/fll/simulator.gif)
+
+Note that the Simulator is also interactive, so you can simulate inputs with any of the sensors.
+
+See the video [Block-based Coding and Simulation](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=629730c938e452f0fd7653fbc4708166&source=embed&photo%5fid=35719470) for more about using the simulator.
+
+### How do I save my programs?
+
+MakeCode will automatically save your recent projects in the browser. However, you can also save a copy of your project as a file on your computer:
+
+* From the **Settings** menu, select **Save Project**
+* This will download your program from the browser as a _lego-myproject.uf2_ file
+
+![Save project menu selection](/static/fll/save-project.jpg)
+
+* You can import your saved projects by clicking the Import button on the Home Page
+ 
+![Import button on home screen](/static/fll/import-button.jpg)
+
+### How do I share my programs?
+
+You can share your projects by clicking on the **share** button in the top left of the screen.  This will create a URL which you can send others to open and view your project.
+ 
+![Share button in editor](/static/fll/share-button.jpg)
+
+![Share button and dialogs demo](/static/fll/share-program.gif)
+
+Sharing programs is also shown in the [Tips and Tricks](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=5c594c2373367f7870196f519f3bfc7a&source=embed&photo%5fid=35719472) video.
+
+### Can I use Bluetooth to transfer my program?
+
+The official answer is currently no. That being said, we have **Experimental support** for Bluetooth download. Please read the [Bluetooth](/bluetooth) page for more information.
+
+https://youtu.be/VIq8-6Egtqs
+
+## Are there YouTube videos on MakeCode for EV3?
+
+The MakeCode has a [FLL / City Shaper YouTube Channel](https://www.youtube.com/watch?v=IqL0Pyeu5Ng&list=PLMMBk9hE-SeqkOObethhlZtBTEK6FYx3n) with useful videos.
+
+https://youtu.be/-AirqwC9DL4
+
+### Why can't I delete my program (*.uf2) files from the Brick?
+
+There's a bug in the firmware which prevents you from deleting the programs (``*.uf2`` files) from your EV3 Brick. There isn't a firmware update to fix this yet.
+
+We have prepared a special program that lets you delete UF2 files from the brick.
+Download [these PDF instructions](/file-manager.pdf) and drop the PDF on the brick drive.
+This will present you with an menu for deleting files.
+
+For other common questions, try the FAQ page https://makecode.mindstorms.com/faq.
+
+## Workarounds
+
+1. Deleting Programs from the EV3 brick
+
+>* Description: Unable to delete program files from the EV3 brick after downloading them
+>* Status: LEGO Education team is working on a fix, no estimated date yet
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@ -7,7 +7,7 @@
 {
    "name": "Prepare",
    "imageUrl": "/static/lessons/firmware.png",
-    "description": "To use Microsoft MakeCode with your EV3 Brick, you will need to install the latest LEGO® MINDSTORMS® Education EV3 firmware. Follow these steps to make sure you're up to date and install the latest firmware if you need to.",
+    "description": "To use Microsoft MakeCode with your EV3 Brick, you will need to install the latest LEGO® MINDSTORMS® Education EV3 firmware.",
    "label": "New? Start Here!",
    "labelClass": "red ribbon large",
    "url": "https://makecode.mindstorms.com/troubleshoot"
@ -25,6 +25,12 @@
    "description": "Build a robot and drive into the world of robotics!",
    "url": "/getting-started/use",
    "cardType": "side"
+},
+{
+    "name": "First LEGO League",
+    "imageUrl": "/static/fll/fll-big.png",
+    "description": "Information about using MakeCode in FLL competitions",
+    "url": "/fll"
 }
 ]
 ```
--- a/docs/getting-started/try.md
+++ b/docs/getting-started/try.md
@ -54,6 +54,12 @@ Verify that the program you just created shows eyes on the Brick Display, and th

 **Well done!**

+## Run it Again
+
+![EV3 Brick with Try in BrkProg_Save Folder in File Manager](/static/getting-started/try-in-file-manager.png)
+
+Use the Brick Buttons and navigate to the File Manager tab.  Open the **BrkProg_SAVE** folder, select **Try** and click the center button to run it again.
+
 ## Connect a Large Motor

 Now you will learn to control the Large Motor.
@ -135,15 +141,15 @@ Keeping the Large Motor connected to **Port D**, connect the Color Sensor to **P

 ```blocks
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
-    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Green)
+    sensors.color4.pauseUntilColorDetected(ColorSensorColor.Green)
    motors.largeD.run(50, 1, MoveUnit.Rotations)
 })
 ```

-* Using the same program, replace the ``||sensors:pause until touch 1||`` block with a ``||sensors:pause color sensor 3||`` for color block.
+* Using the same program, replace the ``||sensors:pause until touch 1||`` block with a ``||sensors:pause color sensor 4||`` for color block.

 ```block
-sensors.color3.pauseUntilColorDetected(ColorSensorColor.Green)
+sensors.color4.pauseUntilColorDetected(ColorSensorColor.Green)
 ```

 * Select the color you want to detect (e.g., green).
--- a/docs/getting-started/use.md
+++ b/docs/getting-started/use.md
@ -20,6 +20,12 @@ Build the robot driving base:

 [![EV3 Driving Base](/static/lessons/common/ev3-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)

+### ~hint
+
+If clicking the above image doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+### ~
+
 ## Make It Move

 **Code it:** Create a program that makes the Driving Base move forward and stop at the finish line, which is ``1`` meter away.
@ -68,6 +74,12 @@ Build and attach an Ultrasonic Sensor to your driving base:

 [![EV3 Ultrasonic Sensor Driving Base Building Instructions Main Image](/static/lessons/common/ev3-ultrasonic-sensor-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-ultrasonic-sensor-driving-base-61ffdfa461aee2470b8ddbeab16e2070.pdf)

+### ~hint
+
+If clicking the above image doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+### ~
+
 ## Detect an Object

 **Code it:**  Create a program that moves the Driving Base and makes it stop ``6`` cm from the Cuboid.
--- a/docs/index-ref.json
+++ b/docs/index-ref.json
@ -1,3 +1,3 @@
 {
-    "appref": "v0.2.3"
+    "appref": "v1.2.22"
 }
--- a/docs/labview.md
+++ b/docs/labview.md
@ -61,6 +61,12 @@ motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations);
 motors.largeBC.stop();
 ```

+### ~ hint
+
+The **turn ratio range is -200, 200** unlike LabView who used -100,100.
+
+### ~
+
 ## Tank

 The **tank** blocks control the speed of two motors. These are commonly used for a differential drive robot. The blocks can also specify the duration, angle, or number of rotations.
--- a/docs/lessons/line-detection.md
+++ b/docs/lessons/line-detection.md
@ -3,7 +3,7 @@
 ## Objective

 Design ways to improve driving safety by helping to prevent drivers from falling asleep and causing an accident.
- 
+
 ![Car driving on highway](/static/lessons/line-detection/car-driving.jpg)

 ## Connect
@ -20,6 +20,12 @@ Think about what you have learned, then document it. Describe the problem in you

 Start by constructing this model. Read the building instructions [here](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-color-sensor-down-driving-base-d30ed30610c3d6647d56e17bc64cf6e2.pdf) first.

+### ~hint
+
+If clicking the above image doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+### ~
+
 ![Color sensor on the driving base](/static/lessons/line-detection/color-sensor-driving.jpg)

 ## Program
@ -44,13 +50,13 @@ Create a program that drives the robot forward until the Color Sensor sees red.

 Place a ``||motors:steer large B+C||`` block from ``||motors:Motors||`` under ``||loops:on start||``. Change the speed to 20%.

-```blocks 
+```blocks
 motors.largeBC.steer(0, 20)
 ```

 ### Step 2

-Place a ``||loops:while||`` loop block under ``||motors:steer large B+C||``.  
+Place a ``||loops:while||`` loop block under ``||motors:steer large B+C||``.

 ```blocks
 motors.largeBC.steer(0, 20)
@ -61,7 +67,7 @@ while (true) {
 ### Step 3

 Place a ``||sensors:pause until color detected||`` from ``||sensors:Sensors||`` inside the ``||loops:while||`` loop block. Change the color to red.
- 
+
 ```blocks
 motors.largeBC.steer(0, 20)
 while (true) {
@ -99,7 +105,7 @@ Place a ``||loops:while||`` loop block under ``||loops:on start||``.

 ```blocks
 while (true) {
-    
+
 }
 ```

@ -121,7 +127,7 @@ Place a ``||loops:while||`` loop block under the ``||motors:steer large B+C||``
 while (true) {
    motors.largeBC.steer(0, 20)
    while (true) {
-        
+
    }
 }
 ```
@ -141,7 +147,7 @@ while (true) {

 ### Step 6

-Place a ``||motors:stop all motors||`` block under the ``||sensors:pause until color detected||`` block.  
+Place a ``||motors:stop all motors||`` block under the ``||sensors:pause until color detected||`` block.

 ```blocks
 while (true) {
@ -165,7 +171,7 @@ while (true) {
        motors.stopAll()
    }
    while (true) {
-        
+
    }
 }
 ```
@ -177,7 +183,7 @@ Place a ``||sensors:pause unril color detected||`` block inside the new ``||loop
 What do you think the program will do?

 **Hint:** The motors will run until the Color Sensor detects the color red, then it will stop all motors. The motors will also run and not stop when the color sensor detects the color green.
- 
+
 ```blocks
 while (true) {
    motors.largeBC.steer(0, 20)
@ -212,7 +218,7 @@ sensors.color3.pauseUntilColorDetected(ColorSensorColor.Yellow)
 music.playSoundEffect(sounds.systemGeneralAlert)
 }
 while (true) {
-    while (true) {      
+    while (true) {
        sensors.color3.pauseUntilLightDetected(LightIntensityMode.Reflected, Light.Bright)
        motors.largeB.run(10)
        motors.largeC.run(-10)
@ -235,7 +241,7 @@ You will need to constantly debug your program in order to make your robot trave

 ```blocks
 while (true) {
-    while (true) {   
+    while (true) {
        sensors.color3.pauseUntilLightDetected(LightIntensityMode.Reflected, Light.Bright)
        motors.largeB.run(10)
        motors.largeC.run(-10)
@ -252,10 +258,10 @@ while (true) {

 Consider the following questions:

-1. What challenged you? 
-2. Where there any surprises? 
+1. What challenged you?
+2. Where there any surprises?
 3. How could you improve your program?
-4. Could your program have been more streamlined? 
+4. Could your program have been more streamlined?
 5. Have you used too many blocks?
 6. Is there a more efficient way of building your program?
 7. How could your program be used in real-world scenarios?
--- a/docs/lessons/make-it-move-tutorial.md
+++ b/docs/lessons/make-it-move-tutorial.md
@ -1,4 +1,4 @@
-# Make It Move Without Wheels 
+# Make It Move Without Wheels

 ## Objective @unplugged

@ -24,7 +24,13 @@ The Walker Bot combines an EV3 Frame and two legs that are mirror-images to crea
 The legs in the Walker Bot are designed to show how to change the rotary motion of a motor to reciprocating motion.

 Start by reading [these](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/ev3-dep/building%20instructions/walker-bot-bi-180fc24f9298e1dd6201099627d43903.pdf) instructions first.
- 
+
+### ~hint
+
+If clicking the above image doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+### ~
+
 ![@boardname@ Walker Bot](/static/lessons/make-it-move/walker-bot.jpg)

  
--- a/docs/lessons/make-it-move.md
+++ b/docs/lessons/make-it-move.md
@ -1,4 +1,4 @@
-# Make It Move Without Wheels 
+# Make It Move Without Wheels

 ## Objective

@ -23,7 +23,13 @@ The Walker Bot combines an EV3 Frame and two legs that are mirror-images to crea
 The legs in the Walker Bot are designed to show how to change the rotary motion of a motor to reciprocating motion.

 Start by reading [these](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/ev3-dep/building%20instructions/walker-bot-bi-180fc24f9298e1dd6201099627d43903.pdf) instructions first.
- 
+
+### ~hint
+
+If clicking the above image doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+### ~
+
 ![@boardname@ Walker Bot](/static/lessons/make-it-move/walker-bot.jpg)

  
--- a/docs/maker/security-gadget.md
+++ b/docs/maker/security-gadget.md
@ -42,14 +42,12 @@ This activity uses sensor inputs. You may want to try the [Use](/getting-started

 Follow the steps of the _Maker Design Process_ for this lesson:

-| | |
-|-|-|
-| ![Paper sheet icon](/static/maker/design-process-icons/define-problem.png) | **Define the Problem** |
-| ![Lightbulb icon](/static/maker/design-process-icons/brainstorming.png) | **Brainstorming** |
-| ![Checkmark icon](/static/maker/design-process-icons/define-criteria.png) | **Define the Design Criteria** |
-| ![Connector icon](/static/maker/design-process-icons/go-make.png) | **Go Make** |
-| ![Redo icon](/static/maker/design-process-icons/review-revise.png) | **Review and Revise Your Solution** |
-| ![Speaker icon](/static/maker/design-process-icons/communicate.png) | **Communicate Your Solution** |
+* Define the Problem
+* Brainstorming
+* Define the Design Criteria
+* Go Make
+* Review and Revise Your Solution
+* Communicate Your Solution

 ### Defining the Problem

--- a/docs/maker/sound-machine.md
+++ b/docs/maker/sound-machine.md
@ -41,14 +41,12 @@ This activity uses motor rotations and sensor inputs. You may want to try the [U

 Follow the steps of the _Maker Design Process_ for this lesson:

-| | |
-|-|-|
-| ![Paper sheet icon](/static/maker/design-process-icons/define-problem.png) | **Define the Problem** |
-| ![Lightbulb icon](/static/maker/design-process-icons/brainstorming.png) | **Brainstorming** |
-| ![Checkmark icon](/static/maker/design-process-icons/define-criteria.png) | **Define the Design Criteria** |
-| ![Connector icon](/static/maker/design-process-icons/go-make.png) | **Go Make** |
-| ![Redo icon](/static/maker/design-process-icons/review-revise.png) | **Review and Revise Your Solution** |
-| ![Speaker icon](/static/maker/design-process-icons/communicate.png) | **Communicate Your Solution** |
+* Define the Problem
+* Brainstorming
+* Define the Design Criteria
+* Go Make
+* Review and Revise Your Solution
+* Communicate Your Solution

 ### Defining the Problem

--- a/docs/offline-app.html
+++ b/docs/offline-app.html
@ -0,0 +1,791 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
+
+<head>
+    <meta charset="UTF-8">
+    <title>LEGO® MINDSTORMS® Education EV3 Offline App</title>
+    <meta name="Description" content="A MakeCode for LEGO® MINDSTORMS® Education EV3 offline app" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- @include indexhead.html -->
+
+    <style>
+        p.item {
+            color: rgba(0, 0, 0, 0.4);
+        }
+
+        .topbar {
+            background: rgb(170, 39, 143) !important;
+        }
+
+        .ui.inverted.content {
+            /* background: #00a5c8; */
+            background: #2a7af3;
+        }
+
+        .content.segment {
+            min-height: 80%;
+        }
+
+        .content .welcomeheader {
+            font-weight: 300;
+        }
+
+        .footer.segment {
+            padding: 5em 0em;
+        }
+
+        .image.left {
+            padding-left: 2em;
+        }
+
+        .image.right {
+            padding-right: 2em;
+            float: right;
+        }
+
+        .segments {
+            max-width: 60%;
+        }
+
+        .segments.terms-container {
+            margin-top: 5em;
+        }
+
+        .terms-container .segment {
+            background-color: rgb(250, 250, 250);
+        }
+
+        @media only screen and (max-width: 800px) {
+            .grid .column .image {
+                display: none;
+            }
+
+            .segments {
+                max-width: 95%;
+            }
+        }
+    </style>
+
+    <!-- Auto-generated styles for the license terms -->
+    <style type="text/css">
+        .terms ol {
+            margin: 0;
+            padding: 0
+        }
+
+        .terms table td,
+        .terms table th {
+            padding: 0
+        }
+
+        .c2 {
+            margin-left: 22.5pt;
+            padding-top: 6pt;
+            text-indent: -18pt;
+            padding-bottom: 6pt;
+            line-height: 1.15;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .c8 {
+            margin-left: 40.5pt;
+            padding-top: 6pt;
+            text-indent: -18pt;
+            padding-bottom: 6pt;
+            line-height: 1.15;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .c15 {
+            padding-top: 0pt;
+            padding-bottom: 12pt;
+            line-height: 1.15;
+            orphans: 2;
+            widows: 2;
+            text-align: left;
+            height: 11pt
+        }
+
+        .c7 {
+            padding-top: 0pt;
+            padding-bottom: 0pt;
+            line-height: 1.15;
+            orphans: 2;
+            widows: 2;
+            text-align: left;
+            height: 11pt
+        }
+
+        .c0 {
+            margin-left: 23pt;
+            padding-top: 6pt;
+            padding-bottom: 6pt;
+            line-height: 1.15;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .c10 {
+            margin-left: 40.5pt;
+            padding-top: 6pt;
+            padding-bottom: 6pt;
+            line-height: 1.15;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .c6 {
+            margin-left: 40.5pt;
+            padding-top: 0pt;
+            padding-bottom: 0pt;
+            line-height: 1.15;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .c20 {
+            padding-top: 0pt;
+            padding-bottom: 0pt;
+            line-height: 1.15;
+            orphans: 2;
+            widows: 2;
+            text-align: center
+        }
+
+        .c4 {
+            color: #000000;
+            font-weight: 700;
+            text-decoration: none;
+            vertical-align: baseline;
+            font-family: "Arial";
+            font-style: normal
+        }
+
+        .c11 {
+            padding-top: 0pt;
+            padding-bottom: 0pt;
+            line-height: 1.15;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .c12 {
+            padding-top: 6pt;
+            padding-bottom: 6pt;
+            line-height: 1.15;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .c3 {
+            color: #000000;
+            font-weight: 400;
+            text-decoration: none;
+            vertical-align: baseline;
+            font-family: "Arial";
+            font-style: normal
+        }
+
+        .c16 {
+            padding-top: 0pt;
+            padding-bottom: 12pt;
+            line-height: 1.15;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .c13 {
+            color: #000000;
+            text-decoration: none;
+            vertical-align: baseline;
+            font-family: "Arial";
+            font-style: italic
+        }
+
+        .c14 {
+            text-decoration-skip-ink: none;
+            -webkit-text-decoration-skip: none;
+            color: #1155cc;
+            text-decoration: underline
+        }
+
+        .c17 {
+            background-color: #ffffff;
+            max-width: 540pt;
+            padding: 36pt 36pt 36pt 36pt
+        }
+
+        .c18 {
+            text-decoration-skip-ink: none;
+            -webkit-text-decoration-skip: none;
+            text-decoration: underline
+        }
+
+        .c9 {
+            color: inherit;
+            text-decoration: inherit
+        }
+
+        .c5 {
+            font-weight: 700
+        }
+
+        .c1 {
+            font-size: 10pt
+        }
+
+        .c19 {
+            font-size: 11pt
+        }
+
+        .terms .title {
+            padding-top: 0pt;
+            color: #000000;
+            font-size: 26pt;
+            padding-bottom: 3pt;
+            font-family: "Arial";
+            line-height: 1.15;
+            page-break-after: avoid;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .terms .subtitle {
+            padding-top: 0pt;
+            color: #666666;
+            font-size: 15pt;
+            padding-bottom: 16pt;
+            font-family: "Arial";
+            line-height: 1.15;
+            page-break-after: avoid;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .terms li {
+            color: #000000;
+            font-size: 11pt;
+            font-family: "Arial"
+        }
+
+        .terms p {
+            margin: 0;
+            color: #000000;
+            font-size: 11pt;
+            font-family: "Arial"
+        }
+
+        .terms h1 {
+            padding-top: 20pt;
+            color: #000000;
+            font-size: 20pt;
+            padding-bottom: 6pt;
+            font-family: "Arial";
+            line-height: 1.15;
+            page-break-after: avoid;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .terms h2 {
+            padding-top: 18pt;
+            color: #000000;
+            font-size: 16pt;
+            padding-bottom: 6pt;
+            font-family: "Arial";
+            line-height: 1.15;
+            page-break-after: avoid;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .terms h3 {
+            padding-top: 16pt;
+            color: #434343;
+            font-size: 14pt;
+            padding-bottom: 4pt;
+            font-family: "Arial";
+            line-height: 1.15;
+            page-break-after: avoid;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .terms h4 {
+            padding-top: 14pt;
+            color: #666666;
+            font-size: 12pt;
+            padding-bottom: 4pt;
+            font-family: "Arial";
+            line-height: 1.15;
+            page-break-after: avoid;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .terms h5 {
+            padding-top: 12pt;
+            color: #666666;
+            font-size: 11pt;
+            padding-bottom: 4pt;
+            font-family: "Arial";
+            line-height: 1.15;
+            page-break-after: avoid;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+
+        .terms h6 {
+            padding-top: 12pt;
+            color: #666666;
+            font-size: 11pt;
+            padding-bottom: 4pt;
+            font-family: "Arial";
+            line-height: 1.15;
+            page-break-after: avoid;
+            font-style: italic;
+            orphans: 2;
+            widows: 2;
+            text-align: left
+        }
+    </style>
+
+    <script>
+        $(document).ready(function () {
+            tickEvent = function (id, data) {
+                if (!pxt.aiTrackEvent) return;
+                if (!data) pxt.aiTrackEvent(id);
+                else {
+                    var props = {};
+                    var measures = {};
+                    for (var k in data)
+                        if (typeof data[k] == "string") props[k] = data[k];
+                        else measures[k] = data[k];
+                    pxt.aiTrackEvent(id, props, measures);
+                }
+            }
+        });
+        function agreeCheckboxChanged() {
+            var downloadSegment = document.getElementById("download-segment");
+            downloadSegment.classList.toggle("hidden");
+        }
+        function downloadWin64() {
+            // TODO: Keep this link up-to-date with the desired release version
+            window.open("https://makecode.com/api/release/ev3/v1.2.22/win64");
+            tickEvent("offlineapp.download", { "target": "ev3", "platform": "win64" });
+        }
+        function downloadMac64() {
+            // TODO: Keep this link up-to-date with the desired release version
+            window.open("https://makecode.com/api/release/ev3/v1.2.22/mac64");
+            tickEvent("offlineapp.download", { "target": "ev3", "platform": "mac64" });
+        }
+    </script>
+
+</head>
+
+<body id="root" class="root">
+
+    <div class="ui inverted vertical center aligned segment content">
+
+        <div class="ui grid topbar">
+            <div class="three wide column">
+                <img class="ui small image left" src="/static//lego_education_logo_white.png" />
+            </div>
+            <div class="ten wide column">
+                <h1 class="ui inverted welcomeheader">MakeCode Offline App</h1>
+            </div>
+            <div class="three wide column">
+                <img class="ui small image right" src="/static//Microsoft-logo_rgb_c-white.png" />
+            </div>
+        </div>
+
+        <div class="ui compact segments terms-container">
+            <div class="ui secondary center aligned segment">
+                Please read and accept the following terms to download the app.
+            </div>
+            <div class="ui left aligned segment terms">
+                <div class="c17">
+                    <p class="c11">
+                        <span class="c4 c1">MICROSOFT PRE-RELEASE SOFTWARE LICENSE TERMS</span>
+                    </p>
+                    <p class="c11">
+                        <span class="c4 c1">MICROSOFT MAKECODE FOR LEGO MINDSTORMS EDUCATION EV3</span>
+                    </p>
+                    <p class="c7">
+                        <span class="c4 c1"></span>
+                    </p>
+                    <p class="c11">
+                        <span class="c3 c1">These license terms are an agreement between Microsoft Corporation (or based on where you live, one
+                            of its affiliates) and you. They apply to the software named above. The terms also apply to any
+                            Microsoft services or updates for the software, except to the extent those have additional terms.</span>
+                    </p>
+                    <p class="c7">
+                        <span class="c3 c1"></span>
+                    </p>
+                    <p class="c11">
+                        <span class="c4 c1">IF YOU COMPLY WITH THESE LICENSE TERMS, YOU HAVE THE RIGHTS BELOW.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">1.</span>
+                        <span class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                        <span class="c5 c1">INSTALLATION AND USE RIGHTS. </span>
+                        <span class="c3 c1">You may install and use any number of copies of the software to evaluate it as you develop and test
+                            your software applications for use with Lego Mindstorms Education EV3 hardware.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">2.</span>
+                        <span class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                        <span class="c5 c1">PRE-RELEASE SOFTWARE. </span>
+                        <span class="c3 c1">The software is a pre-release version. It may not work the way a final version of the software will.
+                            Microsoft may change it for the final, commercial version. We also may not release a commercial
+                            version. Microsoft is not obligated to provide maintenance, technical support or updates to you
+                            for the software.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">3.</span>
+                        <span class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                        <span class="c5 c1">ASSOCIATED ONLINE SERVICES.</span>
+                        <span class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Some features of the software provide access 
+                            to, or rely on, online services to provide you information about updates to the software or extensions, 
+                            or to enable you to retrieve content, collaborate with others, or otherwise supplement your development 
+                            experience.  As used throughout these license terms, the term <q>software</q> includes these online 
+                            services and features. By using these online services and features you consent to the to the 
+                            transmission of information as described in Section 5, DATA.
+                        </span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">4.</span>
+                        <span class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                        <span class="c5 c1">LICENSES FOR OTHER COMPONENTS.</span>
+                        <span class="c3 c1">&nbsp;The software may include third party components with separate legal notices or governed by
+                            other agreements, as described in the ThirdPartyNotices file accompanying the software. Even
+                            if such components are governed by other agreements, the disclaimers and the limitations on and
+                            exclusions of damages below also apply.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">5.</span>
+                        <span class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                        <span class="c1 c4">DATA.</span>
+                    </p>
+                    <p class="c8">
+                        <span class="c5 c1">a.</span>
+                        <span class="c1">&nbsp; &nbsp;</span>
+                        <span class="c1 c5">Data Collection. </span>
+                        <span class="c1">The software may collect information about you and your use of the software, and send that to Microsoft.
+                            Microsoft may use this information to provide services and improve our products and services.
+                            You may opt out of many of these scenarios, but not all, as described in the product documentation.
+                            In using the software, you must comply with applicable law. You can learn more about data collection
+                            and use in the help documentation and the privacy statement at </span>
+                        <span class="c14 c1">
+                            <a class="c9" href="http://go.microsoft.com/fwlink/?LinkId=398505">http://go.microsoft.com/fwlink/?LinkId=398505</a>
+                        </span>
+                        <span class="c1">.</span>
+                        <span class="c3 c1">&nbsp;Your use of the software operates as your consent to these practices.</span>
+                    </p>
+                    <p class="c8">
+                        <span class="c5 c1">b.</span>
+                        <span class="c1">&nbsp; &nbsp;</span>
+                        <span class="c5 c1">Processing of Personal Data. </span>
+                        <span class="c1">To the extent Microsoft is a processor or subprocessor of personal data in connection with the software,
+                            Microsoft makes the commitments in the European Union General Data Protection Regulation Terms
+                            of the Online Services Terms to all customers effective May 25, 2018, at </span>
+                        <span class="c1 c14">
+                            <a class="c9" href="http://go.microsoft.com/?linkid=9840733">http://go.microsoft.com/?linkid=9840733</a>
+                        </span>
+                        <span class="c3 c1">.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">6.</span>
+                        <span class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                        <span class="c5 c1">FEEDBACK. </span>
+                        <span class="c3 c1">If you give feedback about the software to Microsoft, you give to Microsoft, without charge, the
+                            right to use, share and commercialize your feedback in any way and for any purpose. You will
+                            not give feedback that is subject to a license that requires Microsoft to license its software
+                            or documentation to third parties because we include your feedback in them. These rights survive
+                            this agreement.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">7.</span>
+                        <span class="c1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                        <span class="c5 c1">SCOPE OF LICENSE.</span>
+                        <span class="c3 c1">&nbsp;The software is licensed, not sold. This agreement only gives you some rights to use the software.
+                            Microsoft reserves all other rights. Unless applicable law gives you more rights despite this
+                            limitation, you may use the software only as expressly permitted in this agreement. &nbsp;In
+                            doing so, you must comply with any technical limitations in the software that only allow you
+                            to use it in certain ways. You may not:</span>
+                    </p>
+                    <p class="c8">
+                        <span class="c3 c1">- &nbsp; &nbsp; work around any technical limitations in the software;</span>
+                    </p>
+                    <p class="c8">
+                        <span class="c3 c1">- &nbsp; &nbsp; reverse engineer, decompile or disassemble the software, or attempt to do so, except
+                            and only to the extent required by third party licensing terms governing use of certain open
+                            source components that may be included with the software;</span>
+                    </p>
+                    <p class="c8">
+                        <span class="c3 c1">- &nbsp; &nbsp; remove, minimize, block or modify any notices of Microsoft or its suppliers in the
+                            software;
+                        </span>
+                    </p>
+                    <p class="c8">
+                        <span class="c3 c1">- &nbsp; &nbsp; use the software in any way that is against the law; or</span>
+                    </p>
+                    <p class="c8">
+                        <span class="c3 c1">- &nbsp; &nbsp; share, publish, rent or lease the software, or provide the software as a stand-alone
+                            offering for others to use.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">8. &nbsp; UPDATES. </span>
+                        <span class="c3 c1">The software may periodically check for updates and download and install them for you. You may obtain
+                            updates only from Microsoft or authorized sources. Microsoft may need to update your system to
+                            provide you with updates. You agree to receive these automatic updates without any additional
+                            notice. Updates may not include or support all existing software features, services, or peripheral
+                            devices.
+                        </span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">9.</span>
+                        <span class="c1">&nbsp; &nbsp;</span>
+                        <span class="c5 c1">EXPORT RESTRICTIONS.</span>
+                        <span class="c3 c1">&nbsp;You must comply with all domestic and international export laws and regulations that apply
+                            to the software, which include restrictions on destinations, end users and end use. For further
+                            information on export restrictions, visit (aka.ms/exporting).</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">10.</span>
+                        <span class="c1">&nbsp;</span>
+                        <span class="c5 c1">SUPPORT SERVICES. </span>
+                        <span class="c3 c1">Because the software is &ldquo;as is,&rdquo; we may not provide support services for it.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">11.</span>
+                        <span class="c1">&nbsp;</span>
+                        <span class="c5 c1">ENTIRE AGREEMENT.</span>
+                        <span class="c3 c1">&nbsp;This agreement, and the terms for supplements, updates, Internet-based services and support
+                            services that you use, are the entire agreement for the software and support services.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">12.</span>
+                        <span class="c1">&nbsp;</span>
+                        <span class="c5 c1">APPLICABLE LAW. </span>
+                        <span class="c3 c1">If you acquired the software in the United States, Washington State law applies to interpretation
+                            of and claims for breach of this agreement, and the laws of the state where you live apply to
+                            all other claims. If you acquired the software in any other country, its laws apply.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">13.</span>
+                        <span class="c1">&nbsp;</span>
+                        <span class="c5 c1">CONSUMER RIGHTS; REGIONAL VARIATIONS. </span>
+                        <span class="c3 c1">This agreement describes certain legal rights. You may have other rights, including consumer rights,
+                            under the laws of your state or country. Separate and apart from your relationship with Microsoft,
+                            you may also have rights with respect to the party from which you acquired the software. This
+                            agreement does not change those other rights if the laws of your state or country do not permit
+                            it to do so. For example, if you acquired the software in one of the below regions, or mandatory
+                            country law applies, then the following provisions apply to you:</span>
+                    </p>
+                    <p class="c8">
+                        <span class="c5 c1">a.</span>
+                        <span class="c1">&nbsp; &nbsp;</span>
+                        <span class="c5 c1">Australia. </span>
+                        <span class="c3 c1">You have statutory guarantees under the Australian Consumer Law and nothing in this agreement is
+                            intended to affect those rights.</span>
+                    </p>
+                    <p class="c8">
+                        <span class="c5 c1">b.</span>
+                        <span class="c1">&nbsp; &nbsp;</span>
+                        <span class="c5 c1">Canada. </span>
+                        <span class="c3 c1">If you acquired the software in Canada, you may stop receiving updates by turning off the automatic
+                            update feature, disconnecting your device from the Internet (if and when you re-connect to the
+                            Internet, however, the software will resume checking for and installing updates), or uninstalling
+                            the software. The product documentation, if any, may also specify how to turn off updates for
+                            your specific device or software.</span>
+                    </p>
+                    <p class="c8">
+                        <span class="c5 c1">c.</span>
+                        <span class="c1">&nbsp; &nbsp;</span>
+                        <span class="c5 c1">Germany and Austria</span>
+                        <span class="c3 c1">.</span>
+                    </p>
+                    <p class="c6">
+                        <span class="c5 c1">(i)</span>
+                        <span class="c1">&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                        <span class="c5 c1">Warranty</span>
+                        <span class="c3 c1">. The properly licensed software will perform substantially as described in any Microsoft materials
+                            that accompany the software. However, Microsoft gives no contractual guarantee in relation to
+                            the licensed software.</span>
+                    </p>
+                    <p class="c6">
+                        <span class="c4 c1">&nbsp;</span>
+                    </p>
+                    <p class="c6">
+                        <span class="c5 c1">(ii)</span>
+                        <span class="c1">&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                        <span class="c5 c1">Limitation of Liability</span>
+                        <span class="c3 c1">. In case of intentional conduct, gross negligence, claims based on the Product Liability Act, as
+                            well as, in case of death or personal or physical injury, Microsoft is liable according to the
+                            statutory law.</span>
+                    </p>
+                    <p class="c10">
+                        <span class="c3 c1">Subject to the foregoing clause (ii), Microsoft will only be liable for slight negligence if Microsoft
+                            is in breach of such material contractual obligations, the fulfillment of which facilitate the
+                            due performance of this agreement, the breach of which would endanger the purpose of this agreement
+                            and the compliance with which a party may constantly trust in (so-called &quot;cardinal obligations&quot;).
+                            In other cases of slight negligence, Microsoft will not be liable for slight negligence.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">14.</span>
+                        <span class="c1">&nbsp;</span>
+                        <span class="c5 c1">LEGAL EFFECT.</span>
+                        <span class="c3 c1">&nbsp;This agreement describes certain legal rights. You may have other rights under the laws of
+                            your country. You may also have rights with respect to the party from whom you acquired the software.
+                            This agreement does not change your rights under the laws of your country if the laws of your
+                            country do not permit it to do so.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">15.</span>
+                        <span class="c1">&nbsp;</span>
+                        <span class="c4 c1">DISCLAIMER OF WARRANTY. THE SOFTWARE IS LICENSED &ldquo;AS-IS.&rdquo; &nbsp;YOU BEAR THE RISK OF
+                            USING IT. MICROSOFT GIVES NO EXPRESS WARRANTIES, GUARANTEES OR CONDITIONS. TO THE EXTENT PERMITTED
+                            UNDER YOUR LOCAL LAWS, MICROSOFT EXCLUDES THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS
+                            FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT.</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c5 c1">16.</span>
+                        <span class="c1">&nbsp;</span>
+                        <span class="c4 c1">LIMITATION ON AND EXCLUSION OF DAMAGES. YOU CAN RECOVER FROM MICROSOFT AND ITS SUPPLIERS ONLY DIRECT
+                            DAMAGES UP TO U.S. $5.00. YOU CANNOT RECOVER ANY OTHER DAMAGES, INCLUDING CONSEQUENTIAL, LOST
+                            PROFITS, SPECIAL, INDIRECT OR INCIDENTAL DAMAGES.</span>
+                    </p>
+                    <p class="c0">
+                        <span class="c3 c1">This limitation applies to (a) anything related to the software, services, content (including code)
+                            on third party Internet sites, or third party programs; and (b) claims for breach of contract,
+                            breach of warranty, guarantee or condition, strict liability, negligence, or other tort to the
+                            extent permitted by applicable law.</span>
+                    </p>
+                    <p class="c0">
+                        <span class="c3 c1">It also applies even if Microsoft knew or should have known about the possibility of the damages.
+                            The above limitation or exclusion may not apply to you because your country may not allow the
+                            exclusion or limitation of incidental, consequential or other damages.</span>
+                    </p>
+                    <p class="c12">
+                        <span class="c4 c1">Please note: As the software is distributed in Quebec, Canada, some of the clauses in this agreement
+                            are provided below in French.</span>
+                    </p>
+                    <p class="c12">
+                        <span class="c4 c1">Remarque : Ce logiciel &eacute;tant distribu&eacute; au Qu&eacute;bec, Canada, certaines des clauses
+                            dans ce contrat sont fournies ci-dessous en fran&ccedil;ais.</span>
+                    </p>
+                    <p class="c11">
+                        <span class="c5 c1">EXON&Eacute;RATION DE GARANTIE.</span>
+                        <span class="c1 c3">&nbsp;Le logiciel vis&eacute; par une licence est offert &laquo; tel quel &raquo;. Toute utilisation
+                            de ce logiciel est &agrave; votre seule risque et p&eacute;ril. Microsoft n&rsquo;accorde aucune
+                            autre garantie expresse. Vous pouvez b&eacute;n&eacute;ficier de droits additionnels en vertu
+                            du droit local sur la protection des consommateurs, que ce contrat ne peut modifier. La ou elles
+                            sont permises par le droit locale, les garanties implicites de qualit&eacute; marchande, d&rsquo;ad&eacute;quation
+                            &agrave; un usage particulier et d&rsquo;absence de contrefa&ccedil;on sont exclues.
+                        </span>
+                    </p>
+                    <p class="c11">
+                        <span class="c5 c1">LIMITATION DES DOMMAGES-INT&Eacute;R&Ecirc;TS ET EXCLUSION DE RESPONSABILIT&Eacute; POUR LES DOMMAGES.</span>
+                        <span class="c3 c1">&nbsp;Vous pouvez obtenir de Microsoft et de ses fournisseurs une indemnisation en cas de dommages
+                            directs uniquement &agrave; hauteur de 5,00 $ US. Vous ne pouvez pr&eacute;tendre &agrave; aucune
+                            indemnisation pour les autres dommages, y compris les dommages sp&eacute;ciaux, indirects ou
+                            accessoires et pertes de b&eacute;n&eacute;fices.</span>
+                    </p>
+                    <p class="c12">
+                        <span class="c3 c1">Cette limitation concerne :</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c3 c1">- &nbsp; &nbsp; &nbsp; &nbsp; tout ce qui est reli&eacute; au logiciel, aux services ou au contenu
+                            (y compris le code) figurant sur des sites Internet tiers ou dans des programmes tiers ; et</span>
+                    </p>
+                    <p class="c2">
+                        <span class="c3 c1">- &nbsp; &nbsp; &nbsp; &nbsp; les r&eacute;clamations au titre de violation de contrat ou de garantie,
+                            ou au titre de responsabilit&eacute; stricte, de n&eacute;gligence ou d&rsquo;une autre faute
+                            dans la limite autoris&eacute;e par la loi en vigueur.</span>
+                    </p>
+                    <p class="c12">
+                        <span class="c3 c1">Elle s&rsquo;applique &eacute;galement, m&ecirc;me si Microsoft connaissait ou devrait conna&icirc;tre
+                            l&rsquo;&eacute;ventualit&eacute; d&rsquo;un tel dommage. Si votre pays n&rsquo;autorise pas
+                            l&rsquo;exclusion ou la limitation de responsabilit&eacute; pour les dommages indirects, accessoires
+                            ou de quelque nature que ce soit, il se peut que la limitation ou l&rsquo;exclusion ci-dessus
+                            ne s&rsquo;appliquera pas &agrave; votre &eacute;gard.</span>
+                    </p>
+                    <p class="c16">
+                        <span class="c5 c1">EFFET JURIDIQUE.</span>
+                        <span class="c3 c1">&nbsp;Le pr&eacute;sent contrat d&eacute;crit certains droits juridiques. Vous pourriez avoir d&rsquo;autres
+                            droits pr&eacute;vus par les lois de votre pays. Le pr&eacute;sent contrat ne modifie pas les
+                            droits que vous conf&egrave;rent les lois de votre pays si celles-ci ne le permettent pas.</span>
+                    </p>
+                    <p class="c15">
+                        <span class="c3 c1"></span>
+                    </p>
+                    <p class="c16">
+                        <span class="c3 c1">&nbsp;</span>
+                    </p>
+                    <p class="c11">
+                        <span class="c3 c1">LEGO, the LEGO logo, MINDSTORMS and the MINDSTORMS EV3 logo are trademarks and/ or copyrights of
+                            the LEGO Group. &copy;2018 The LEGO Group. All rights reserved.</span>
+                    </p>
+                    <p class="c11">
+                        <span class="c3 c1">&nbsp;</span>
+                    </p>
+                    <p class="c20">
+                        <span class="c5 c1 c13">Remainder of this page intentionally left blank.</span>
+                    </p>
+                    <p class="c7">
+                        <span class="c3 c19"></span>
+                    </p>
+                </div>
+            </div>
+            <div class="ui center aligned segment">
+                <input id="agree-checkbox" type="checkbox" autocomplete="off" onchange="agreeCheckboxChanged(this)">
+                <label for="agree-checkbox">I agree to these Microsoft Software License Terms and to the
+                    <a href="https://privacy.microsoft.com/en-us/privacystatement">Microsoft Privacy Statement.</a>
+                </label>
+            </div>
+            <div id="download-segment" class="ui center aligned segment hidden">
+                <div class="ui grid">
+                    <div class="eight wide column">
+                        <h3 class="ui">Windows</h3>
+                        <button class="ui icon button" onclick="downloadWin64()">
+                            <i class="download icon"></i>
+                            makecode-ev3-setup-win64.exe
+                        </button>
+                    </div>
+                    <div class="eight wide column">
+                        <h3 class="ui">Mac OS</h3>
+                        <button class="ui icon button" onclick="downloadMac64()">
+                            <i class="download icon"></i>
+                            makecode-ev3-mac64.zip
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- @include footer.html -->
+    <!-- @include tracking.html -->
+
+</body>
+
+</html>
--- a/docs/offline.md
+++ b/docs/offline.md
@ -0,0 +1,5 @@
+# @extends
+
+## Offline app #target-app
+
+The MakeCode editor is available as app which you can install on a computer with Windows or Mac OS. Once installed, the **[MakeCode Offline App](/offline-app)** lets you create, run, and download your projects to the @boardname@. It works the same as the Web application does in your browser but it's a stand-alone application that will work when a connection to the internet is restricted or not available.
--- a/docs/packages-ref.json
+++ b/docs/packages-ref.json
@ -0,0 +1,3 @@
+{
+    "redirect": "/extensions"
+}
--- a/docs/packages/approval-ref.json
+++ b/docs/packages/approval-ref.json
@ -0,0 +1,3 @@
+{
+    "redirect": "https://makecode.com/extensions/approval"
+}
--- a/docs/packages/build-your-own-ref.json
+++ b/docs/packages/build-your-own-ref.json
@ -0,0 +1,3 @@
+{
+    "redirect": "https://makecode.com/extensions/getting-started"
+}
--- a/docs/packages/versioning-ref.json
+++ b/docs/packages/versioning-ref.json
@ -0,0 +1,3 @@
+{
+    "redirect": "https://makecode.com/extensions/versioning"
+}
--- a/docs/projects.md
+++ b/docs/projects.md
@ -1,9 +1,88 @@
 # Projects

-Here are some cool projects that you can build with your @boardname@!
+```codecard
+[
+    {
+        "name": "Getting Started",
+        "url": "/getting-started",
+        "imageUrl": "/static/lessons/firmware.png"
+    },
+    {
+        "name": "Brick Tutorials",
+        "url": "/tutorials/brick",
+        "imageUrl": "/static/tutorials/wake-up.png"
+    },
+    {
+        "name": "Motor Tutorials",
+        "url": "/tutorials/motors",
+        "imageUrl": "/static/tutorials/run-motors.png"
+    },
+    {
+        "name": "Touch Sensor Tutorials",
+        "url": "/tutorials/touch-sensor",
+        "imageUrl": "/static/tutorials/touch-to-run.png"
+    },
+    {
+        "name": "Color Sensor Tutorials",
+        "url": "/tutorials/color-sensor",
+        "imageUrl": "/static/tutorials/what-color.png"
+    },
+    {
+        "name": "Ultrasonic Sensor Tutorials",
+        "url": "/tutorials/ultrasonic-sensor",
+        "imageUrl": "/static/tutorials/object-near.png"
+    },
+    {
+        "name": "Gyro Tutorials",
+        "url": "/tutorials/gyro",
+        "imageUrl": "/static/tutorials/calibrate-gyro.png"
+    },
+    {
+        "name": "Infrared Sensor Tutorials",
+        "url": "/tutorials/infrared-sensor",
+        "imageUrl": "/static/tutorials/security-alert.png"
+    },
+    {
+        "name": "FLL / City Shaper",
+        "url": "/tutorials/city-shaper",
+        "imageUrl": "/static/tutorials/city-shaper/robot1.jpg"
+    },
+    {
+        "name": "Design Engineering",
+        "url": "/design-engineering",
+        "imageUrl": "/static/lessons/make-it-move-without-wheels.png"
+    },
+    {
+        "name": "Coding",
+        "url": "/coding",
+        "imageUrl": "/static/lessons/autonomous-parking.png"
+    },
+    {
+        "name": "Maker",
+        "url": "/maker",
+        "imageUrl": "/static/lessons/make-a-sound-machine.png"
+    },
+    {
+        "name": "Tutorial Videos",
+        "url": "/videos",
+        "imageUrl": "https://legoeducation.videomarketingplatform.co/27288170/35719444/5d009e5f93fbf479c2e5ed2bf87a7990/thumbnail.png"
+    }
+]
+```

-## Basic
+## See Also

-Basic projects to build with your EV3 Brick.
+[Getting Started](/getting-started),
+[Brick Tutorials](/tutorials/brick),
+[Motor Tutorials](/tutorials/motors),
+[Touch Sensor Tutorials](/tutorials/touch-sensor),
+[Color Sensor Tutorials](/tutorials/color-sensor),
+[Ultrasonic Sensor Tutorials](/tutorials/ultrasonic-sensor),
+[Gyro Tutorials](/tutorials/gyro),
+[Infrared Sensor Tutorials](/tutorials/infrared-sensor),
+[FLL / City Shaper](/tutorials/city-shaper),
+[Design Engineering](/design-engineering),
+[Coding](/coding),
+[Maker](/maker),
+[Tutorial Videos](/videos)

-Coming soon.
--- a/docs/projects/SUMMARY.md
+++ b/docs/projects/SUMMARY.md
@ -0,0 +1,69 @@
+# Projects
+
+* [Getting Started](/getting-started)
+  * [Prepare](https://makecode.mindstorms.com/troubleshoot)
+  * [Try](/getting-started/try)
+  * [Use](/getting-started/use)
+  * [First LEGO League](/fll)
+* [Brick Tutorials](/tutorials/brick)
+  * [Wake Up!](/tutorials/wake-up)
+  * [Make an Animation](/tutorials/make-an-animation)
+  * [What Animal Am I?](/tutorials/what-animal-am-i)
+  * [Music Brick](/tutorials/music-brick)
+  * [Pause On Start](/tutorials/pause-on-start)
+* [Motor Tutorials](/tutorials/motors)
+  * [Run Motors](/tutorials/run-motors)
+  * [Spin Turn](/tutorials/spin-turn)
+  * [Pivot Turn](/tutorials/pivot-turn)
+  * [Smooth Turn](/tutorials/smooth-turn)
+  * [Tank ZigZag](/tutorials/tank-zigzag)
+  * [Coast Or Brake](/tutorials/coast-or-brake)
+  * [Turtle](/tutorials/turtle)
+* [Touch Sensor Tutorials](/tutorials/touch-sensor)
+  * [Touch to Run](/tutorials/touch-to-run)
+  * [Sensor Values](/tutorials/touch-sensor-values)
+  * [Stop At Object](/tutorials/stop-at-object)
+* [Color Sensor Tutorials](/tutorials/color-sensor)
+  * [What Color?](/tutorials/what-color)
+  * [Line Following](/tutorials/line-following)
+  * [Red Light, Green Light](/tutorials/redlight-greenlight)
+  * [Move To Color](/tutorials/move-to-color)
+  * [Reflected Light Measure](/tutorials/reflected-light-measure)
+  * [Reflected Light Calibration](/tutorials/reflected-light-calibration)
+* [Ultrasonic Sensor Tutorials](/tutorials/ultrasonic-sensor)
+  * [Object Near](/tutorials/object-near)
+  * [Wall Follower](/tutorials/wall-follower)
+* [Gyro Tutorials](/tutorials/gyro)
+  * [Calibrate](/tutorials/calibrate-gyro)
+  * [Turn](/tutorials/turn-with-gyro)
+  * [Move Straight](/tutorials/move-straight-with-gyro)
+  * [Drifter](/tutorials/drifter)
+* [Infrared Sensor Tutorials](/tutorials/infrared-sensor)
+  * [Security Alert](/tutorials/security-alert)
+* [FLL / City Shaper](/tutorials/city-shaper)
+  * [Crane Mission / Robot 1](/tutorials/city-shaper/robot-1)
+  * [Crane Mission / Robot 2](/tutorials/city-shaper/robot-2)
+  * [Crane Mission / Video 1](https://youtu.be/IqL0Pyeu5Ng)
+  * [Bluetooth download (beta)](https://youtu.be/VIq8-6Egtqs)
+  * [Turn with Gyro](https://youtu.be/I7ncuXAfBwk)
+  * [Moving with Gyro](https://youtu.be/ufiOPvW37xc)
+  * [Line following with 1 color sensor](https://youtu.be/_LeduyKQVjg)
+  * [Proportional line following with 1 color sensor](https://youtu.be/-AirqwC9DL4)
+  * [Proportional line following with 2 color sensors](https://youtu.be/QWOflBuu9Oo)
+* [Design Engineering](/design-engineering)
+  * [Make It Move Without Wheels](/design-engineering/make-it-move)
+  * [Make It Smarter and Faster](/design-engineering/make-it-smarter)
+  * [Make a System that Communicates](/design-engineering/make-it-communicate)
+* [Coding](/coding)
+  * [Autonomous Parking](/coding/autonomous-parking)
+  * [Object Detection](/coding/object-detection)
+  * [Line Detection](/coding/line-detection)
+* [Maker](/maker)
+  * [Make A Sound Machine](/maker/sound-machine)
+  * [Make A Security Gadget](/maker/security-gadget)
+* [Tutorial Videos](/videos)
+  * [undefined](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=5d009e5f93fbf479c2e5ed2bf87a7990&source=embed&photo%5fid=35719444)
+  * [undefined](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=2008a566f1fb034d58d5ebe19ba8621f&source=embed&photo%5fid=35719467)
+  * [undefined](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=629730c938e452f0fd7653fbc4708166&source=embed&photo%5fid=35719470)
+  * [undefined](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=3513a83b87fe536b2dc512237465fd1b&source=embed&photo%5fid=35719471)
+  * [undefined](https://legoeducation.videomarketingplatform.co/v.ihtml/player.html?token=5c594c2373367f7870196f519f3bfc7a&source=embed&photo%5fid=35719472)
--- a/docs/reference/brick/battery-property.md
+++ b/docs/reference/brick/battery-property.md
@ -0,0 +1,47 @@
+# battery Property
+
+Return the information about the battery
+
+```sig
+brick.batteryInfo(BatteryProperty.Level)
+```
+
+## Parameters
+
+* property: the kind of information
+
+## Returns
+
+* a [number](/types/number) which represents the value of the property requested.
+
+## Example
+
+Show the battery level percentage on the screen. Also, show a green light if the battery level is above 15%. If the battery level is below 15% but above 5%, show a orange light. But, if the battery level is below 5%, show a pulsing red light.
+
+```blocks
+let battery = 0;
+forever(function() {
+    brick.showString("Battery level:", 1)
+    brick.showNumber(battery, 2)
+    battery = brick.batteryInfo(BatteryProperty.Level);
+    if (battery > 15)
+    {
+        brick.setStatusLight(StatusLight.Green);
+    } else if (battery > 5) {
+        brick.setStatusLight(StatusLight.Orange);
+    } else {
+        brick.setStatusLight(StatusLight.RedPulse)
+    }
+    pause(30000)
+})
+```
+
+Or see all the values
+
+```blocks
+forever(function () {
+    brick.showValue("bat V", brick.batteryInfo(BatteryProperty.Voltage), 1)
+    brick.showValue("bat %", brick.batteryInfo(BatteryProperty.Level), 2)
+    brick.showValue("bat I", brick.batteryInfo(BatteryProperty.Current), 3)
+})
+```
--- a/docs/reference/brick/show-ports.md
+++ b/docs/reference/brick/show-ports.md
@ -10,12 +10,12 @@ You can find out what's connected to the ports on the brick and show its status.

 ## Example

-Show the status of the ports on the brick when the ``enter`` button is pressed.
+Show the status of the ports on the brick. Resets all motors when ENTER is pressed.

 ```blocks
-brick.showString("Press ENTER for port status", 1)
+brick.showPorts()
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
-    brick.showPorts()
+    motors.resetAll()
 })
 ```

--- a/docs/reference/motors/motor/ramp.md
+++ b/docs/reference/motors/motor/ramp.md
@ -0,0 +1,59 @@
+# Ramp
+
+Schedules an acceleration, constant and deceleration phase at a given speed.
+
+```sig
+motors.largeA.ramp(50, 100, 500, 100)
+```
+
+The speed setting is a percentage of the motor's full speed. Full speed is the speed that the motor runs when the brick supplies maximum output voltage to the port.
+
+
+## Parameters
+
+* **speed**: a [number](/types/number) that is the percentage of full speed. A negative value runs the motor in the reverse direction.
+* **acceleration**: the [number](/types/number) of movement units to rotate for while accelerating.
+* **value**: the [number](/types/number) of movement units to rotate for.
+* **deceleration**: the [number](/types/number) of movement units to rotate for while decelerating.
+* **unit**: the movement unit of rotation. This can be `milliseconds`, `seconds`, `degrees`, or `rotations`. If the number for **value** is `0`, this parameter isn't used.
+
+## Example
+
+This is an interactive program that lets you change the values of 
+the acceleration and deceleration and see the effects.
+
+```blocks
+let steady = 0
+let dec = 0
+let acc = 0
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    acc += -100
+})
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    motors.largeB.ramp(50, steady, MoveUnit.MilliSeconds, acc, dec)
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    acc += 100
+})
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    dec += 100
+})
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    dec += -100
+})
+acc = 500
+steady = 1000
+acc = 500
+forever(function () {
+    brick.showValue("acc", acc, 1)
+    brick.showValue("steady", steady, 2)
+    brick.showValue("dec", dec, 3)
+    brick.showString("acc: left/right", 5)
+    brick.showString("dec: up/down", 6)
+    brick.showString("run large B: enter", 7)
+})
+```
+
+## See also
+
+[tank](/reference/motors/synced/tank), [steer](/reference/motors/synced/steer), [stop](/reference/motors/motor/stop)
--- a/docs/reference/motors/motor/run.md
+++ b/docs/reference/motors/motor/run.md
@ -6,9 +6,9 @@ Set the rotation speed of the motor as a percentage of maximum speed.
 motors.largeA.run(50)
 ```

-The speed setting is a pecentage of the motor's full speed. Full speed is the speed that the motor runs when the brick supplies maximum output voltage to the port.
+The speed setting is a percentage of the motor's full speed. Full speed is the speed that the motor runs when the brick supplies maximum output voltage to the port.

-If you use just the **speed** number, the motor runs continously and won't stop unless you tell it to. You can also give a value for a certain amount of distance you want the motor to rotate for. The **value** can be an amount of time, a turn angle in degrees, or a number of full rotations.
+If you use just the **speed** number, the motor runs continuously and won't stop unless you tell it to. You can also give a value for a certain amount of distance you want the motor to rotate for. The **value** can be an amount of time, a turn angle in degrees, or a number of full rotations.

 If you decide to use a **value** of rotation distance, you need to choose a type of movement **unit**.

@ -30,8 +30,8 @@ Here is how you use each different movement unit to run the motor for a fixed ro
 // Run motor for 700 Milliseconds. 
 motors.largeA.run(25, 700, MoveUnit.MilliSeconds);

-// Run motor for 700 Milliseconds again but no units specified. 
-motors.largeA.run(25, 700);
+// Run motors B and C for 700 Milliseconds again but no units specified. 
+motors.largeBC.run(25, 700);

 // Run the motor for 45 seconds
 motors.largeA.run(50, 45, MoveUnit.Seconds);
@ -61,6 +61,14 @@ motors.largeB.run(-25)

 ## ~

+## Multiple motors
+
+When using **run** with multiple motors, there is no guarantee that their speed will stay in sync. Use [tank](/reference/motors/tank) or [steer](/reference/motors/steer) for synchronized motor operations.
+
+```blocks
+motors.largeBC.run(50)
+```
+
 ## Examples

 ### Drive the motor for 20 seconds
--- a/docs/reference/motors/motor/set-brake-settle-time.md
+++ b/docs/reference/motors/motor/set-brake-settle-time.md
@ -0,0 +1,30 @@
+# set Brake Settle Time
+
+Set the time to wait after a motor stopped to allow it settle
+when brake is enabled. Default is 10ms.
+
+```sig
+motors.largeA.setBrakeSettleTime(200)
+```
+
+When a the motor is stopped and brake is applied, it can still wiggle for a little while. You can use the settle time to automatically way after stopping and let the robot settle.
+
+## Parameters
+
+* **time**: a [number](/types/number) value which represents the number of milliseconds to wait after braking.
+
+## Example
+
+Set the brake mode and the settle time to 500ms. Run the motor connected to port **A** for 2 seconds at a speed of `30` and stop after 2s.
+
+```blocks
+motors.largeA.setBrake(true)
+motors.largeA.setBrakeSettleTime(500)
+motors.largeA.run(30)
+pause(2000)
+motors.largeA.stop()
+```
+
+## See also
+
+[stop](/reference/motors/motor/stop)
--- a/docs/reference/motors/motor/set-brake.md
+++ b/docs/reference/motors/motor/set-brake.md
@ -1,28 +1,28 @@
 # set Brake

-Set the brake on the motor so it won't turn when it has no power.
+Set the brake on the motor so it will brake when it finishes a brake command.

 ```sig
 motors.largeA.setBrake(false)
 ```

-When a the motor is stopped, it can still rotate if an external force is applied to it. This can happen, for example, if your're tanking your brick on a inclined surface and stop the motors. Gravity will push down on the brick and might cause it to start rolling again. You can prevent this movement by setting the brake.
+When a the motor is stopped, it can still rotate if an external force is applied to it. This can happen, for example, if you're tanking your brick on a inclined surface and stop the motors. Gravity will push down on the brick and might cause it to start rolling again. You can prevent this movement by setting the brake.

 Also, you can use the brake to do simple skid steering for your brick.

-## Paramters
+## Parameters

 * **brake**: a [boolean](/types/boolean) value which is either `true` to set the brake on or `false` to set the brake off.

 ## Example

-Run the motor connected to port **A** for 2 seconds at a speed of `30`. Stop and set the brake.
+Run the motor connected to port **A** for 2 seconds at a speed of `30` and stop after 2s.

 ```blocks
+motors.largeA.setBrake(true)
 motors.largeA.run(30)
 pause(2000)
 motors.largeA.stop()
-motors.largeA.setBrake(true)
 ```

 ## See also
--- a/docs/reference/motors/motor/set-run-phase.md
+++ b/docs/reference/motors/motor/set-run-phase.md
@ -0,0 +1,26 @@
+# Set Run Phase
+
+Allows to specify an acceleration or deceleration phases for run commands.
+
+```sig
+motors.largeD.setRunPhase(MovePhase.Acceleration, 1, MoveUnit.Seconds)
+```
+
+Once the run phase is specified on a motor (or pair of motors),
+it will be automatically applied to [run](/reference/motors/run) commands.
+
+## Time vs Rotation
+
+The phases specified for time units (seconds, milliseconds) only apply to run with time
+moves. Similarly, the phases specified for rotation units (# rotation, degrees) only
+apply to run with rotation units.
+
+## Examples
+
+```blocks
+motors.largeB.setRunPhase(MovePhase.Acceleration, 0.5, MoveUnit.Seconds)
+motors.largeB.setRunPhase(MovePhase.Deceleration, 0.2, MoveUnit.Seconds)
+forever(function () {
+    motors.largeB.run(50, 1, MoveUnit.Seconds)
+})
+```
--- a/docs/reference/motors/reset-all.md
+++ b/docs/reference/motors/reset-all.md
@ -0,0 +1,25 @@
+# reset All Motors
+
+Reset all motors currently running on the brick.
+
+```sig
+motors.resetAll();
+```
+
+The motors counters are resetted. 
+
+## Example
+
+Tank the EV3 Brick forward at half speed for 5 seconds and then stop.
+
+```blocks
+motors.largeAB.tank(50, 50);
+pause(5000);
+motors.stopAll();
+motors.resetAll();
+```
+
+## See also
+
+[stop all](/reference/motors/motor/stop-all), 
+[reset](/reference/motors/motor/reset)
--- a/docs/reference/motors/stop-all.md
+++ b/docs/reference/motors/stop-all.md
@ -22,4 +22,5 @@ motors.stopAll();

 [stop](/reference/motors/motor/stop), 
 [reset](/reference/motors/motor/reset),
+[reset-all](/reference/motors/motor/reset-all),
 [set brake](/reference/motors/motor/set-brake)
--- a/docs/reference/motors/synced/steer.md
+++ b/docs/reference/motors/synced/steer.md
@ -22,7 +22,7 @@ If you decide to use a **value** of rotation distance, you need to choose a type

 ## Parameters

-* **turnRatio**: a [number](/types/number) that is the percentage of speed of the drive motor. The follower motor runs at this speed. A negative number steers to the left and a positive number steers to the right. This is a number between `-100` and `100`.
+* **turnRatio**: a [number](/types/number) that is the percentage of speed of the drive motor. The follower motor runs at this speed. A negative number steers to the left and a positive number steers to the right. This is a number between `-200` and `200`.
 * **speed**: a [number](/types/number) that is the percentage of full speed. A negative value runs the motors in the reverse direction. This is the speed that the drive motor runs at.
 * **value**: the [number](/types/number) of movement units to rotate for. A value of `0` means run the motor continuously.
 * **unit**: the movement unit of rotation. This can be `milliseconds`, `seconds`, `degrees`, or `rotations`. If the number for **value** is `0`, this parameter isn't used.
@ -39,6 +39,13 @@ motors.largeBC.steer(-15, -75)

 ## ~

+## ~ hint
+
+Only one set of synchronized motors will run at the same time. Once you launch tank/steer, it will cancel any existing synchronized speed command.
+
+## ~
+
+
 ## Examples

 ### Make a slight right
@ -79,6 +86,51 @@ for (let i = 0; i < 4; i++) {
 motors.stopAll()
 ```

+### Steer tester
+
+This program lets you change the values of speed and turn ratio with the buttons.
+
+```typescript
+let speed = 0;
+let turnRatio = 0;
+
+brick.showString(`steer tester`, 1)
+brick.showString(`connect motors BC`, 7)
+brick.showString(`up/down for speed`, 8)
+brick.showString(`left/right for turn ratio`, 9)
+
+forever(function () {
+    brick.showString(`motor B speed ${motors.largeB.speed()}%`, 4)
+    brick.showString(`motor C speed ${motors.largeC.speed()}%`, 5)
+    pause(100)
+})
+
+function updateSteer() {
+    motors.largeBC.steer(turnRatio, speed);
+    brick.showString(`speed ${speed}%`, 2)
+    brick.showString(`turnRatio ${turnRatio}`, 3)
+}
+
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    speed += 10
+    updateSteer()
+})
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    speed -= 10
+    updateSteer()
+})
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    turnRatio -= 10
+    updateSteer()
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    turnRatio += 10
+    updateSteer()
+})
+
+updateSteer()
+```
+
 ## See also

 [tank](/reference/motors/synced/tank), [run](/reference/motors/motor/run)
--- a/docs/reference/motors/synced/tank.md
+++ b/docs/reference/motors/synced/tank.md
@ -35,6 +35,12 @@ motors.largeBC.tank(-75, -75)

 ## ~

+## ~ hint
+
+Only one set of synchronized motors will run at the same time. Once you launch tank/steer, it will cancel any existing synchronized speed command.
+
+## ~
+
 ## Examples

 ### Tank forward and backward
@ -76,6 +82,51 @@ pause(5000)
 motors.stopAll()
 ```

+### Tank tester
+
+This program lets you change the tank values using the brick buttons.
+
+```typescript
+let tankB = 0;
+let tankC = 0;
+
+brick.showString(`tank tester`, 1)
+brick.showString(`connect motors BC`, 7)
+brick.showString(`up/down for tank B`, 8)
+brick.showString(`left/right for tank C`, 9)
+
+forever(function () {
+    brick.showString(`motor B speed ${motors.largeB.speed()}%`, 4)
+    brick.showString(`motor C speed ${motors.largeC.speed()}%`, 5)
+    pause(100)
+})
+
+function updateTank() {
+    brick.showString(`tank A: ${tankB}%`, 2)
+    brick.showString(`tank B: ${tankC}%`, 3)
+    motors.largeBC.tank(tankB, tankC);
+}
+
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    tankB += 10
+    updateTank();
+})
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    tankB -= 10
+    updateTank();
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    tankC += 10
+    updateTank();
+})
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    tankC -= 10
+    updateTank();
+})
+
+updateTank();
+```
+
 ## See also

 [steer](/reference/motors/synced/steer), [run](/reference/motors/motor/run)
--- a/docs/static/about/explorer-button.png
+++ b/docs/static/about/explorer-button.png
--- a/docs/static/about/explorer-view.png
+++ b/docs/static/about/explorer-view.png
--- a/docs/static/bluetooth/experimental.png
+++ b/docs/static/bluetooth/experimental.png
--- a/docs/static/fll/code-js.gif
+++ b/docs/static/fll/code-js.gif
--- a/docs/static/fll/context-help.jpg
+++ b/docs/static/fll/context-help.jpg
--- a/docs/static/fll/fll-big.png
+++ b/docs/static/fll/fll-big.png
--- a/docs/static/fll/fll-logo.png
+++ b/docs/static/fll/fll-logo.png
--- a/docs/static/fll/import-button.jpg
+++ b/docs/static/fll/import-button.jpg
--- a/docs/static/fll/save-project.jpg
+++ b/docs/static/fll/save-project.jpg
--- a/docs/static/fll/share-button.jpg
+++ b/docs/static/fll/share-button.jpg
--- a/docs/static/fll/share-program.gif
+++ b/docs/static/fll/share-program.gif
--- a/docs/static/fll/share-program.jpg
+++ b/docs/static/fll/share-program.jpg
--- a/docs/static/fll/simulator.gif
+++ b/docs/static/fll/simulator.gif
--- a/docs/static/getting-started/try-in-file-manager.png
+++ b/docs/static/getting-started/try-in-file-manager.png
--- a/docs/static/githubfilelogo.svg
+++ b/docs/static/githubfilelogo.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16.097 2.686c-7.64 0-13.834 6.194-13.834 13.835 0 6.113 3.964 11.298 9.462 13.128.692.127.944-.301.944-.667 0-.328-.012-1.199-.019-2.353-3.848.836-4.66-1.855-4.66-1.855-.629-1.598-1.536-2.023-1.536-2.023-1.256-.859.095-.842.095-.842 1.388.099 2.119 1.426 2.119 1.426 1.234 2.114 3.238 1.504 4.027 1.15.125-.894.482-1.504.878-1.85-3.072-.349-6.302-1.536-6.302-6.838 0-1.51.539-2.745 1.424-3.712-.143-.35-.617-1.756.135-3.661 0 0 1.162-.372 3.805 1.418a13.228 13.228 0 0 1 3.464-.465c1.174.005 2.358.158 3.463.465 2.642-1.79 3.801-1.418 3.801-1.418.755 1.905.28 3.311.137 3.661.887.967 1.423 2.202 1.423 3.712 0 5.316-3.235 6.485-6.317 6.827.497.428.939 1.272.939 2.563 0 1.849-.017 3.341-.017 3.795 0 .37.249.8.951.665 5.494-1.833 9.454-7.015 9.454-13.126 0-7.641-6.195-13.835-13.836-13.835" fill="#696969"/></svg>
--- a/docs/static/setup/brickfw.jpg
+++ b/docs/static/setup/brickfw.jpg
--- a/docs/static/setup/brickinfo.jpg
+++ b/docs/static/setup/brickinfo.jpg
--- a/docs/static/tutorials/calibrate-gyro.png
+++ b/docs/static/tutorials/calibrate-gyro.png
--- a/docs/static/tutorials/city-shaper/robot1.jpg
+++ b/docs/static/tutorials/city-shaper/robot1.jpg
--- a/docs/static/tutorials/city-shaper/robot2.jpg
+++ b/docs/static/tutorials/city-shaper/robot2.jpg
--- a/docs/static/tutorials/coast-or-brake.png
+++ b/docs/static/tutorials/coast-or-brake.png
--- a/docs/static/tutorials/drifter.png
+++ b/docs/static/tutorials/drifter.png
--- a/docs/static/tutorials/move-straight-with-gyro.png
+++ b/docs/static/tutorials/move-straight-with-gyro.png
--- a/docs/static/tutorials/move-to-color.png
+++ b/docs/static/tutorials/move-to-color.png
--- a/docs/static/tutorials/pause-on-start.png
+++ b/docs/static/tutorials/pause-on-start.png
--- a/docs/static/tutorials/pause-until-pressed.png
+++ b/docs/static/tutorials/pause-until-pressed.png
--- a/docs/static/tutorials/pivot-turn.png
+++ b/docs/static/tutorials/pivot-turn.png
--- a/docs/static/tutorials/reflected-light-calibration.png
+++ b/docs/static/tutorials/reflected-light-calibration.png
--- a/docs/static/tutorials/reflected-light-measure.png
+++ b/docs/static/tutorials/reflected-light-measure.png
--- a/docs/static/tutorials/smooth-turn.png
+++ b/docs/static/tutorials/smooth-turn.png
--- a/docs/static/tutorials/spin-turn.png
+++ b/docs/static/tutorials/spin-turn.png
--- a/docs/static/tutorials/tank-zigzag.png
+++ b/docs/static/tutorials/tank-zigzag.png
--- a/docs/static/tutorials/turn-with-gyro.png
+++ b/docs/static/tutorials/turn-with-gyro.png
--- a/docs/static/tutorials/wall-follower.png
+++ b/docs/static/tutorials/wall-follower.png
--- a/docs/tutorials.md
+++ b/docs/tutorials.md
@ -2,125 +2,51 @@

 Step by step guides to coding your @boardname@.

-## Brick
+## Tutorials

 ```codecard
 [{
-  "name": "Wake Up!",
-  "description": "Show different moods on the screen. Is it tired, sleepy, or awake?",
-  "cardType": "tutorial",
-  "url":"/tutorials/wake-up",
+  "name": "Brick",
+  "description": "Learn how to use the screen and the buttons",
+  "url":"/tutorials/brick",
  "imageUrl":"/static/tutorials/wake-up.png"
 }, {
-  "name": "Make an Animation",
-  "description": "Create a custom animation on your EV3 Brick Display.",
-  "cardType": "tutorial",
-  "url":"/tutorials/make-an-animation",
-  "imageUrl":"/static/tutorials/make-an-animation.png"
-}, {
-  "name": "What Animal Am I?",
-  "description": "Create different animal effects and have someone guess what the animal is.",
-  "cardType": "tutorial",
-  "url":"/tutorials/what-animal-am-i",
-  "imageUrl":"/static/tutorials/what-animal-am-i.png"
-}, {
-  "name": "Music Brick",
-  "description": "Transform the brick into a musical instrument!",
-  "cardType": "tutorial",
-  "url":"/tutorials/music-brick",
-  "imageUrl":"/static/tutorials/music-brick.png"
-}]
-```
-
-## Motors
-
-```codecard
-[{
-  "name": "Run Motors",
-  "description": "Use the EV3 Brick buttons to start and stop the Large Motor and Medium Motor.",
-  "cardType": "tutorial",
-  "url":"/tutorials/run-motors",
+  "name": "Motors",
+  "description": "User motors to move the brick.",
+  "url":"/tutorials/motors",
  "imageUrl":"/static/tutorials/run-motors.png"
-}]
-```
-
-## Touch Sensor
-
-```codecard
-[{
-  "name": "Touch to Run",
-  "description": "Press the Touch Sensor and run a motor.",
-  "cardType": "tutorial",
-  "url":"/tutorials/touch-to-run",
+}, {
+  "name": "Touch Sensor",
+  "description": "Use touch sensors in your robot.",
+  "url":"/tutorials/touch-sensor",
  "imageUrl":"/static/tutorials/touch-to-run.png"
 }, {
-  "name": "Touch Sensor Values",
-  "description": "Check the value of a Touch Sensor and stop a motor if pressed.",
-  "cardType": "tutorial",
-  "url":"/tutorials/touch-sensor-values",
-  "imageUrl":"/static/tutorials/touch-sensor-values.png"
-}]
-```
-
-## Color Sensor
-
-```codecard
-[{
-  "name": "What Color?",
-  "description": "Use the Color Sensor to detect different colors.",
-  "cardType": "tutorial",
-  "url":"/tutorials/what-color",
+  "name": "Color Sensor",
+  "description": "Use the color sensor to follow line or detect colors",
+  "url":"/tutorials/color-sensor",
  "imageUrl":"/static/tutorials/what-color.png"
 }, {
-  "name": "Line Following",
-  "description": "Use the Color Sensor to make a robot follow a line.",
-  "cardType": "tutorial",
-  "url":"/tutorials/line-following",
-  "imageUrl":"/static/tutorials/line-following.png"
+  "name": "Gyro",
+  "description": "Drive straight or turn more precisely with the gyro",
+  "url":"/tutorials/gyro",
+  "imageUrl":"/static/tutorials/calibrate-gyro.png"
 }, {
-  "name": "Red Light, Green Light",
-  "description": "Play Red Light, Green Light using the Color Sensor and the robot.",
-  "cardType": "tutorial",
-  "url":"/tutorials/redlight-greenlight",
-  "imageUrl":"/static/tutorials/redlight-greenlight.png"
-}]
-```
-
-## Ultrasonic Sensor
-
-```codecard
-[{
-  "name": "Object Near?",
-  "description": "Build a program that will detect when an object is nearby.",
-  "cardType": "tutorial",
-  "url":"/tutorials/object-near",
+  "name": "Ultrasonic Sensor",
+  "description": "Use the ultrasonic sensor to detect obstacles",
+  "url":"/tutorials/ultrasonic-sensor",
  "imageUrl":"/static/tutorials/object-near.png"
-}]
-```
-
-## Infrared Sensor
-
-```codecard
-[{
-  "name": "Security Alert",
-  "description": "Build an security alert using the Infrared Sensor.",
-  "cardType": "tutorial",
-  "url":"/tutorials/security-alert",
+}, {
+  "name": "Infrared Sensor",
+  "description": "Use the infrared sensor to detect objects",
+  "url":"/tutorials/infrared-sensor",
  "imageUrl":"/static/tutorials/security-alert.png"
 }]
 ```

 ## See Also

-[Wake Up!](/tutorials/wake-up),
-[Make An Animation](/tutorials/make-an-animation),
-[What Animal Am I?](/tutorials/what-animal-am-i),
-[Music Brick](/tutorials/music-brick),
-[Run Motors](/tutorials/run-motors),
-[Touch to Run](/tutorials/touch-to-run),
-[Touch Sensor Values](/tutorials/touch-sensor-values),
-[What Color?](/tutorials/what-color),
-[Line Following](/tutorials/line-following),
-[Red Light, Green Light](/tutorials/redlight-greenlight),
-[Object Near?](/tutorials/object-near),
-[Security Alert](/tutorials/security-alert)
+[Brick tutorials](/tutorials/brick),
+[Motors tutorials](/tutorials/motors),
+[Touch sensor tutorials](/tutorials/touch-sensor),
+[Color sensor tutorials](/tutorials/color-sensor),
+[Infrared sensor tutorials](/tutorials/infrared-sensor)
--- a/docs/tutorials/brick.md
+++ b/docs/tutorials/brick.md
@ -0,0 +1,44 @@
+# Brick Tutorials
+
+## Tutorials
+
+```codecard
+[{
+  "name": "Wake Up!",
+  "description": "Show different moods on the screen. Is it tired, sleepy, or awake?",
+  "cardType": "tutorial",
+  "url":"/tutorials/wake-up",
+  "imageUrl":"/static/tutorials/wake-up.png"
+}, {
+  "name": "Make an Animation",
+  "description": "Create a custom animation on your EV3 Brick Display.",
+  "cardType": "tutorial",
+  "url":"/tutorials/make-an-animation",
+  "imageUrl":"/static/tutorials/make-an-animation.png"
+}, {
+  "name": "What Animal Am I?",
+  "description": "Create different animal effects and have someone guess what the animal is.",
+  "cardType": "tutorial",
+  "url":"/tutorials/what-animal-am-i",
+  "imageUrl":"/static/tutorials/what-animal-am-i.png"
+}, {
+  "name": "Music Brick",
+  "description": "Transform the brick into a musical instrument!",
+  "cardType": "tutorial",
+  "url":"/tutorials/music-brick",
+  "imageUrl":"/static/tutorials/music-brick.png"
+}, {
+  "name": "Pause On Start",
+  "description": "Don't start running immediately!",
+  "cardType": "tutorial",
+  "url":"/tutorials/pause-on-start",
+  "imageUrl":"/static/tutorials/pause-on-start.png"
+}]
+```
+
+## See Also
+
+[Wake Up!](/tutorials/wake-up),
+[Make An Animation](/tutorials/make-an-animation),
+[What Animal Am I?](/tutorials/what-animal-am-i),
+[Music Brick](/tutorials/music-brick),
--- a/docs/tutorials/calibrate-gyro.md
+++ b/docs/tutorials/calibrate-gyro.md
@ -0,0 +1,37 @@
+# Calibrate Gyro
+
+## Introduction @fullscreen
+
+The gyroscope is a very useful sensor in the EV3 system. It detects the rotation rate
+which can be very useful to correct the trajectory of the robot and do precise turns.
+
+However, the sensor can be imprecise and subject to drifting. It is recommend to
+calibrate your sensor at least once after starting your brick. You don't have to 
+recalibrate on every run.
+
+* [EV3 Driving Base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+* [EV3 Driving Base with Gyro](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-gyro-sensor-driving-base-a521f8ebe355c281c006418395309e15.pdf)
+
+
+## Step 1 Show ports
+
+Add the ``||brick:show ports||`` to see the status of the gyroscope.
+
+```blocks
+brick.showPorts()
+```
+
+
+## Step 2 Calibration
+
+Add a ``||sensors:calibrate gyro||`` block to calibrate the gyro. The block
+detects if the sensor is present and does a full reset of the sensor if necessary.
+
+```blocks
+brick.showPorts()
+sensors.gyro2.calibrate()
+```
+
+## Step 3 Download and run @fullscreen
+
+Download this program to your brick and press the ENTER button.
--- a/docs/tutorials/city-shaper.md
+++ b/docs/tutorials/city-shaper.md
@ -0,0 +1,54 @@
+# City Shaper
+
+## Tutorials
+
+```codecard
+[
+{
+    "name": "Crane Mission / Robot 1",
+    "description": "Learn the basics and build your first robot driving base.",
+    "cardType": "tutorial",
+    "url":"/tutorials/city-shaper/robot-1",
+    "imageUrl": "/static/tutorials/city-shaper/robot1.jpg"
+}, {
+    "name": "Crane Mission / Robot 2",
+    "description": "Program your robot to move in different ways.",
+    "cardType": "tutorial",
+    "url":"/tutorials/city-shaper/robot-2",
+    "imageUrl": "/static/tutorials/city-shaper/robot2.jpg"
+}, {
+    "name": "Crane Mission / Video 1",
+    "description": "A video of the Robot 1 tutorial",
+    "youTubeId": "IqL0Pyeu5Ng"
+}, {
+    "name": "Bluetooth download (beta)",
+    "description": "EXPERIMENTAL! Learn how to download code via Bluetooth.",
+    "youTubeId": "VIq8-6Egtqs"
+}, {
+    "name": "Turn with Gyro",
+    "description": "Use the gyro for precise turns.",
+    "youTubeId": "I7ncuXAfBwk"
+}, {
+    "name": "Moving with Gyro",
+    "description": "Use the gyro for correct the robot trajectory.",
+    "youTubeId": "ufiOPvW37xc"
+}, {
+    "name": "Line following with 1 color sensor",
+    "description": "Simple line following using the color sensor.",
+    "youTubeId": "_LeduyKQVjg"
+}, {
+    "name": "Proportional line following with 1 color sensor",
+    "description": "Proportional line following using the color sensor.",
+    "youTubeId": "-AirqwC9DL4"
+}, {
+    "name": "Proportional line following with 2 color sensors",
+    "description": "Proportional line following using two color sensor.",
+    "youTubeId": "QWOflBuu9Oo"
+}]
+```
+
+## See Also
+
+[Robot 1](/tutorials/city-shaper/robot-1),
+[Robot 2](/tutorials/city-shaper/robot-2)
+
--- a/docs/tutorials/city-shaper/crane-mission.md
+++ b/docs/tutorials/city-shaper/crane-mission.md
@ -0,0 +1,27 @@
+# Crane Mission Lessons
+
+The [Crane Mission Lessons](https://firstinspiresst01.blob.core.windows.net/fll/2020/fll-ev3-overview.pdf) adapted for MakeCode.
+
+## Lessons
+
+```codecard
+[
+{
+    "name": "Crane Mission / Robot 1",
+    "description": "Learn the basics and build your first robot driving base.",
+    "cardType": "tutorial",
+    "url":"/tutorials/city-shaper/robot-1"
+}, {
+    "name": "Crane Mission / Robot 2",
+    "description": "Program your robot to move in different ways.",
+    "cardType": "tutorial",
+    "url":"/tutorials/city-shaper/robot-2"
+}
+]
+```
+
+## See Also
+
+[Robot 1](/tutorials/city-shaper/robot-1),
+[Robot 2](/tutorials/city-shaper/robot-2)
+
--- a/docs/tutorials/city-shaper/mission-2.md
+++ b/docs/tutorials/city-shaper/mission-2.md
@ -0,0 +1,20 @@
+# Mission 2 Lesson
+
+Use the program below to tell your robot how to solve the Crane Mission (Mission 2).
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    motors.largeBC.steer(0, 25, 2.25, MoveUnit.Rotations)
+    control.timer1.reset()
+    while (control.timer1.seconds() < 1.5) {
+        motors.largeBC.steer(sensors.color1.light(LightIntensityMode.Reflected) - 40, 50)
+    }
+    motors.largeBC.stop()
+    motors.largeBC.steer(0, 15, 0.25, MoveUnit.Rotations)
+    motors.mediumA.run(25, 60, MoveUnit.Degrees)
+    pause(2000)
+    motors.mediumA.run(-25, 1, MoveUnit.Seconds)
+    motors.largeBC.steer(0, -100, 4, MoveUnit.Rotations)
+})
+motors.largeBC.setBrake(true)
+```
--- a/docs/tutorials/city-shaper/robot-1.md
+++ b/docs/tutorials/city-shaper/robot-1.md
@ -0,0 +1,53 @@
+# Robot 1 Lesson
+
+## Step 1 - Build Your Driving Base Robot @unplugged
+
+Build the medium motor robot driving base:
+
+* [Driving base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+* [Medium motor driving base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-medium-motor-driving-base-e66e2fc0d917485ef1aa023e8358e7a7.pdf)
+
+If clicking on the image above doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+## Step 2 - Show an image @fullscreen
+
+At first, it's nice to know that your program is running. Plug in a ``||brick:show mood||`` from the **BRICK** toolbox drawer
+into the ``||loops:on start||`` block. Change the image to something else if you want!
+
+```blocks
+brick.showMood(moods.sleeping)
+```
+
+## Step 3 - Try your code @fullscreen
+
+Look at the simulator and check that your image is showing on the screen. When you are ready, press the **DOWNLOAD** button
+and follow the instructions to transfer your code on the brick.
+
+## Step 4 - Pause on Start @fullscreen
+
+As you may have noticed, the code starts running immediately once you download it to the brick. To prevent the robot
+from rolling away, add a ``||brick:pause until enter pressed||`` button to wait for the user to press enter.
+
+```blocks
+brick.showMood(moods.sleeping)
+brick.buttonEnter.pauseUntil(ButtonEvent.Pressed)
+```
+
+## Step 5 - Steer motors @fullscreen
+
+Drag a ``||motors:steer motors||`` block from the **MOTORS** toolbox drawer and snap it in under ``||brick:show mood||``.
+Click on the **(+)** symbol and make sure to tell your motors to turn **1** rotation.
+
+```blocks
+brick.showMood(moods.sleeping)
+brick.buttonEnter.pauseUntil(ButtonEvent.Pressed)
+brick.showMood(moods.neutral)
+motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations)
+```
+
+## Step 6 - Try your code @fullscreen
+
+Whenever you make a code change, the simulator will restart so you can see what your latest change will do.
+When you are ready, click **DOWNLOAD** and follow the instructions to transfer the code into your brick.
+
+**Remember**: Take the driving base apart at the end of the session so that another group can build their robot too.
--- a/docs/tutorials/city-shaper/robot-2.md
+++ b/docs/tutorials/city-shaper/robot-2.md
@ -0,0 +1,100 @@
+# Robot 2 Lesson
+
+## Step 1 - Build Your Driving Base Robot @unplugged
+
+Build the robot driving base:
+
+[![EV3 Driving Base](/static/lessons/common/ev3-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+
+If clicking on the image above doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+## Step 2 - Show an image and move @fullscreen
+
+Add blocks to the ``||loops:on start||`` block to show an image and move the motors **B+C** for ``1`` rotation.
+
+```blocks
+brick.showMood(moods.neutral)
+motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations)
+```
+
+## Step 3 - Brick button @fullscreen
+
+Let's change the code so that your robot moves when the **UP** button is pressed.
+Add an ``||brick:on button up||`` block and move ``||motors:steer motors||`` inside of it.
+After downloading your code, press **UP** to move the robot.
+
+```blocks
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.awake)
+    motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations)
+})
+brick.showMood(moods.neutral)
+```
+
+## Step 4 - Braking @fullscreen
+
+When the motors are done turning, the robot keeps on moving for a short distance. 
+Turn on the **brakes** so that your robot stops immediately.
+Drag a ``||motors:set brake||`` block into the ``||loops:on start||`` and set it to **ON** for the the **BC** motors.
+
+```blocks
+brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.awake)
+    motors.largeBC.steer(0, 50, 1, MoveUnit.Rotations)
+})
+brick.showMood(moods.neutral)
+motors.largeBC.setBrake(true)
+```
+
+## Step 5 - Left and Right turn @fullscreen
+
+Let's make the robot turn to the left when the **LEFT** button is pressed on the brick.
+Find an ``||brick:on button||`` block and put a ``||motors:steer motors||`` in it. Make the turn ratio drive the motor to left.
+Get another ``||brick:on button||`` and set it to run when the **RIGHT** is pressed.
+Put a ``||motors:steer motors||`` in for that button and set the turn ratio to drive to the right.
+
+```blocks
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.middleLeft)
+    motors.largeBC.steer(-50, 50, 1, MoveUnit.Rotations)
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.middleRight)
+    motors.largeBC.steer(50, 50, 1, MoveUnit.Rotations)
+})
+```
+
+## Step 6 - Backwards @fullscreen
+
+Let's make the robot go backwards when the **DOWN** button is pressed on the brick.
+Add a ``||motors:steer motors||`` to an ``||brick:on button||`` block and change the speed to be negative. This will make the motor go backwards.
+
+```blocks
+brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.knockedOut)
+    motors.largeBC.steer(0, -50, 1, MoveUnit.Rotations)
+})
+```
+
+## Step 7 - Add an Ultrasonic sensor @fullscreen
+
+Add an Ultrasonic sensor to your driving base.
+
+[![EV3 Driving Base with Ultrasonic Sensor](/static/lessons/common/ev3-ultrasonic-sensor-driving-base.jpg)](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-ultrasonic-sensor-driving-base-61ffdfa461aee2470b8ddbeab16e2070.pdf)
+
+If clicking on the image above doesn't open the instructions, right-click on the image and choose "Save link as..." to download the PDF.
+
+## Step 8 - Stopping distance @fullscreen
+
+Create a program that moves the Driving Base and makes it stop 6 cm from the Cuboid.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showMood(moods.dizzy)
+    motors.largeBC.steer(0, 50)
+    pauseUntil(() => sensors.ultrasonic4.distance() < 6)
+    motors.largeBC.stop()
+})
+```
+
+Try sending your robot towards a wall!
--- a/docs/tutorials/coast-or-brake.md
+++ b/docs/tutorials/coast-or-brake.md
@ -0,0 +1,16 @@
+# Coast or Brake
+
+This code example will set the brake when button **A** is pressed or let the motor coast (turn freely when not running) when button **B** is pressed. The motor is turned by one rotation to cause motion.
+
+```blocks
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    // tell motor to brake once the run command is done
+    motors.largeB.setBrake(true)
+    motors.largeB.run(100, 1, MoveUnit.Rotations)
+})
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    // tell motor to coast once the run command is done
+    motors.largeB.setBrake(false)
+    motors.largeB.run(100, 1, MoveUnit.Rotations)
+})
+```
--- a/docs/tutorials/color-sensor.md
+++ b/docs/tutorials/color-sensor.md
@ -0,0 +1,49 @@
+# Color Sensor
+
+## Tutorials
+
+```codecard
+[{
+  "name": "What Color?",
+  "description": "Use the Color Sensor to detect different colors.",
+  "cardType": "tutorial",
+  "url":"/tutorials/what-color",
+  "imageUrl":"/static/tutorials/what-color.png"
+}, {
+  "name": "Line Following",
+  "description": "Use the Color Sensor to make a robot follow a line.",
+  "cardType": "tutorial",
+  "url":"/tutorials/line-following",
+  "imageUrl":"/static/tutorials/line-following.png"
+}, {
+  "name": "Red Light, Green Light",
+  "description": "Play Red Light, Green Light using the Color Sensor and the robot.",
+  "cardType": "tutorial",
+  "url":"/tutorials/redlight-greenlight",
+  "imageUrl":"/static/tutorials/redlight-greenlight.png"
+}, {
+  "name": "Move To Color",
+  "description": "Move straight until a color is detected.",
+  "cardType": "tutorial",
+  "url":"/tutorials/move-to-color",
+  "imageUrl":"/static/tutorials/move-to-color.png"
+}, {
+  "name": "Reflected Light Measure",
+  "description": "Teach the sensor what light or dark is.",
+  "cardType": "example",
+  "url":"/tutorials/reflected-light-measure",
+  "imageUrl":"/static/tutorials/reflected-light-measure.png"
+}, {
+  "name": "Reflected Light Calibration",
+  "description": "Use the auto-calibration feature to setup the dark and bright values.",
+  "cardType": "example",
+  "url":"/tutorials/reflected-light-calibration",
+  "imageUrl":"/static/tutorials/reflected-light-calibration.png"
+}]
+```
+
+## See Also
+
+[What Color?](/tutorials/what-color),
+[Line Following](/tutorials/line-following),
+[Red Light, Green Light](/tutorials/redlight-greenlight),
--- a/docs/tutorials/drifter.md
+++ b/docs/tutorials/drifter.md
@ -0,0 +1,34 @@
+# Drifter
+
+Use this program to try out the gyro sensor and the effect of drifting.
+
+```typescript
+// this loop shows the rate, angle and drift of the robot
+forever(() => {
+    brick.showValue("rate", sensors.gyro2.rate(), 1)
+    brick.showValue("angle", sensors.gyro2.angle(), 2)
+    brick.showValue("drift", sensors.gyro2.drift(), 3)
+})
+// this loop shows wheter the sensor is calibrating
+forever(() => {
+    brick.showString(sensors.gyro2.isCalibrating() ? "calibrating..." : "", 4)
+})
+// instructions on how to use the buttons
+brick.showString("ENTER: calibrate", 7)
+brick.showString("       (reset+drift)", 8)
+brick.showString("LEFT: reset", 9)
+brick.showString("RIGHT: compute drift", 10)
+
+// enter -> calibrate
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    sensors.gyro2.calibrate()
+})
+// right -> compute drift
+brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
+    sensors.gyro2.computeDrift()
+})
+// left -> reset
+brick.buttonLeft.onEvent(ButtonEvent.Pressed, function () {
+    sensors.gyro2.reset()
+})
+```
--- a/docs/tutorials/gyro.md
+++ b/docs/tutorials/gyro.md
@ -0,0 +1,31 @@
+# Gyro tutorials
+
+## Tutorials
+
+```codecard
+[{
+  "name": "Calibrate",
+  "description": "Make sure you gyro sensor is ready to use",
+  "cardType": "tutorial",
+  "url":"/tutorials/calibrate-gyro",
+  "imageUrl":"/static/tutorials/calibrate-gyro.png"
+}, {
+  "name": "Turn",
+  "description": "Use the gyro to turn precisely",
+  "cardType": "tutorial",
+  "url":"/tutorials/turn-with-gyro",
+  "imageUrl":"/static/tutorials/turn-with-gyro.png"
+}, {
+  "name": "Move Straight",
+  "description": "Use the gyro to correct the trajectory of the robot",
+  "cardType": "tutorial",
+  "url":"/tutorials/move-straight-with-gyro",
+  "imageUrl":"/static/tutorials/move-straight-with-gyro.png"
+}, {
+  "name": "Drifter",
+  "description": "Explore how the gyro is drifting",
+  "cardType": "example",
+  "url":"/tutorials/drifter",
+  "imageUrl":"/static/tutorials/drifter.png"
+}]
+```
--- a/docs/tutorials/infrared-sensor.md
+++ b/docs/tutorials/infrared-sensor.md
@ -0,0 +1,17 @@
+# Infrared sensor
+
+## Tutorials
+
+```codecard
+[{
+  "name": "Security Alert",
+  "description": "Build an security alert using the Infrared Sensor.",
+  "cardType": "tutorial",
+  "url":"/tutorials/security-alert",
+  "imageUrl":"/static/tutorials/security-alert.png"
+}]
+```
+
+## See Also
+
+[Security Alert](/tutorials/security-alert)
--- a/docs/tutorials/motors.md
+++ b/docs/tutorials/motors.md
@ -0,0 +1,58 @@
+# Motors
+
+## Tutorials
+
+```codecard
+[{
+  "name": "Run Motors",
+  "description": "Use the EV3 Brick buttons to start and stop the Large Motor and Medium Motor.",
+  "cardType": "tutorial",
+  "url":"/tutorials/run-motors",
+  "imageUrl":"/static/tutorials/run-motors.png"
+}, {
+  "name": "Spin Turn",
+  "description": "Turn the driving base around its center.",
+  "cardType": "example",
+  "url":"/tutorials/spin-turn",
+  "imageUrl":"/static/tutorials/spin-turn.png"
+}, {
+  "name": "Pivot Turn",
+  "description": "Turn the driving base around a wheel.",
+  "cardType": "example",
+  "url":"/tutorials/pivot-turn",
+  "imageUrl":"/static/tutorials/pivot-turn.png"
+}, {
+  "name": "Smooth Turn",
+  "description": "Turn the driving base in a smooth, steering motion.",
+  "cardType": "example",
+  "url":"/tutorials/smooth-turn",
+  "imageUrl":"/static/tutorials/smooth-turn.png"
+}, {
+  "name": "Tank ZigZag",
+  "description": "Use the tank block to keep motors in sync.",
+  "cardType": "example",
+  "url":"/tutorials/tank-zigzag",
+  "imageUrl":"/static/tutorials/tank-zigzag.png"
+}, {
+  "name": "Coast Or Brake",
+  "description": "Tell motors to coast or brake once the run command is done.",
+  "cardType": "example",
+  "url":"/tutorials/coast-or-brake",
+  "imageUrl":"/static/tutorials/coast-or-brake.png"
+}, {
+  "name": "Turtle",
+  "description": "Encode moves and run them on a driving base",
+  "url":"/tutorials/turtle",
+  "cardType": "example"
+}]
+```
+
+## See Also
+
+[Run Motors](/tutorials/run-motors),
+[Spin Turn](/tutorials/spin-turn),
+[Pivot Turn](/tutorials/pivot-turn),
+[Smooth Turn](/tutorials/smooth-turn),
+[Tank ZigZag](/tutorials/tank-zigzag),
+[Coast Or Brake](/tutorials/coast-or-brake),
+[Turtle](/tutorials/turtle)
--- a/docs/tutorials/move-straight-with-gyro.md
+++ b/docs/tutorials/move-straight-with-gyro.md
@ -0,0 +1,61 @@
+# Move Straight With Gyro
+
+## Introduction @fullscreen
+
+Rotating using a wheel is not precise. The wheel can slip or the motors
+can be slightly different. 
+With the help of the gyro you can detect and correct deviations in your trajectory.
+
+* [EV3 Driving Base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+* [EV3 Driving Base with Gyro](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-gyro-sensor-driving-base-a521f8ebe355c281c006418395309e15.pdf)
+
+
+## Step 1 Calibration
+
+Add a ``||sensors:calibrate gyro||`` block in a ``||brick:on button enter pressed||`` block so that you can manually start a calibration process. Run the calibration
+at least once after connecting the gyro.
+
+```blocks
+brick.showPorts()
+sensors.gyro2.calibrate()
+```
+
+## Step 2 Compute the error
+
+Make a new **error** variable and drag the ``||sensors:gyro rate||``
+and multiply it by -1. Since the rate shows the rotation rate, we will
+counter it by negating it.
+
+```blocks
+let error = 0
+brick.showPorts()
+sensors.gyro2.calibrate()
+while (true) {
+    error = sensors.gyro2.rate() * -1
+}
+```
+
+## Step 3 Steer with feedback
+
+Drag a ``||motors:steer motors||`` block under the variable and pass
+the **error** variable into the turn ratio section.
+
+If the robot is turning right, the gyro will report a positive rotation rate
+and the turn ratio will be negative which will the turn the robot left!
+
+```blocks
+let error = 0
+brick.showPorts()
+sensors.gyro2.calibrate()
+while (true) {
+    error = sensors.gyro2.rate() * -1
+    motors.largeBC.steer(error, 50)
+}
+```
+
+## Step 4 Run it!
+
+Download to your brick and test out if the robot is going straight.
+
+This kind of technique is called a proportional controller; 
+it corrects the inputs (motor speed) with a feedback proportional to the output (rotation rate).
--- a/docs/tutorials/move-to-color.md
+++ b/docs/tutorials/move-to-color.md
@ -0,0 +1,65 @@
+# Move To Color
+
+## Introduction @fullscreen
+
+This tutorial shows how to move the EV3 driving base until the color sensor detects a color.
+
+Here are the building instructions for the robot:
+
+* [EV3 driving base](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-driving-base-79bebfc16bd491186ea9c9069842155e.pdf)
+* [Color sensor down](https://le-www-live-s.legocdn.com/sc/media/lessons/mindstorms-ev3/building-instructions/ev3-rem-color-sensor-down-driving-base-d30ed30610c3d6647d56e17bc64cf6e2.pdf)
+
+
+## Step 1 Run code on button pressed
+
+Drag ``||brick:on button pressed||`` block so that your code starts when the enter button is pressed (and not at the start). We are also using the ``||brick:show string||``
+message easily diagnose if the program does not work.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showString("started", 1)
+})
+```
+
+## Step 2 Turn on the motors
+
+Drag a ``||motors:steer motors B+C||`` block under the button pressed event. This will turn on both motors.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showString("started", 1)
+    motors.largeBC.steer(0, 50)
+})
+```
+
+## Step 3 Pause until color
+
+Drag a ``||sensors:pause until color detected||`` block after the steer and select the color you want to detect. This block will stop the program until the color is detected.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showString("started", 1)
+    motors.largeBC.steer(0, 50)
+    brick.showString("looking for red", 1)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
+})
+```
+
+### Step 4 Stop the motors!
+
+Once the color is detected, the program will continue to run blocks. Drag a ``||motors:stop B+C motor||`` so that both motors stop.
+
+```blocks
+brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
+    brick.showString("started", 1)
+    motors.largeBC.steer(0, 50)
+    brick.showString("looking for red", 1)
+    sensors.color3.pauseUntilColorDetected(ColorSensorColor.Red)
+    brick.showString("stop", 1)
+    motors.largeBC.stop()
+})
+```
+
+## Step 5
+
+Download your program to your brick and try it out!
--- a/docs/tutorials/music-brick.md
+++ b/docs/tutorials/music-brick.md
@ -17,10 +17,10 @@ brick.showString("Hello world", 1)

 ## Step 2

-In the ``||brick:show string||`` block, type the text ``"Press my buttons to make music!"`` to replace ``"Hello world"``.
+In the ``||brick:show string||`` block, type the text ``"Press my buttons!"`` to replace ``"Hello world"``.

 ```blocks
-brick.showString("Press my buttons to make music!", 1)
+brick.showString("Press my buttons!", 1)
 ```

 ## Step 3
@ -31,7 +31,7 @@ Open the ``||brick:Brick||`` Toolbox drawer. From the **Buttons** section, drag
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {

 })
-brick.showString("Press my buttons to make music!", 1)
+brick.showString("Press my buttons!", 1)
 ```

 ## Step 4
@ -40,13 +40,13 @@ Open the ``||music:Music||`` Toolbox drawer. Drag out **5** ``||music:play tone|

 ```blocks
 brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
-    music.playTone(0, music.beat(BeatFraction.Half))
-    music.playTone(0, music.beat(BeatFraction.Half))
-    music.playTone(0, music.beat(BeatFraction.Half))
-    music.playTone(0, music.beat(BeatFraction.Half))
-    music.playTone(0, music.beat(BeatFraction.Half))
+    music.playTone(262, music.beat(BeatFraction.Half))
+    music.playTone(262, music.beat(BeatFraction.Half))
+    music.playTone(262, music.beat(BeatFraction.Half))
+    music.playTone(262, music.beat(BeatFraction.Half))
+    music.playTone(262, music.beat(BeatFraction.Half))
 })
-brick.showString("Press my buttons to make music!", 1) 
+brick.showString("Press my buttons!", 1)
 ```

 ## Step 5
@ -63,7 +63,7 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
    music.playTone(196, music.beat(BeatFraction.Half))
    music.playTone(294, music.beat(BeatFraction.Whole))
 })
-brick.showString("Press my buttons to make music!", 1)
+brick.showString("Press my buttons!", 1)
 ```

 ## Step 6
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16.097 2.686c-7.64 0-13.834 6.194-13.834 13.835 0 6.113 3.964 11.298 9.462 13.128.692.127.944-.301.944-.667 0-.328-.012-1.199-.019-2.353-3.848.836-4.66-1.855-4.66-1.855-.629-1.598-1.536-2.023-1.536-2.023-1.256-.859.095-.842.095-.842 1.388.099 2.119 1.426 2.119 1.426 1.234 2.114 3.238 1.504 4.027 1.15.125-.894.482-1.504.878-1.85-3.072-.349-6.302-1.536-6.302-6.838 0-1.51.539-2.745 1.424-3.712-.143-.35-.617-1.756.135-3.661 0 0 1.162-.372 3.805 1.418a13.228 13.228 0 0 1 3.464-.465c1.174.005 2.358.158 3.463.465 2.642-1.79 3.801-1.418 3.801-1.418.755 1.905.28 3.311.137 3.661.887.967 1.423 2.202 1.423 3.712 0 5.316-3.235 6.485-6.317 6.827.497.428.939 1.272.939 2.563 0 1.849-.017 3.341-.017 3.795 0 .37.249.8.951.665 5.494-1.833 9.454-7.015 9.454-13.126 0-7.641-6.195-13.835-13.836-13.835" fill="#696969"/></svg>