Added animations, corrected typo

Added Battleship examples, animated firework and cascade screensaver
examples, and added a missing period.

docs/courses/csintro/coordinates.md

@@ -1,11 +1,13 @@
 # Coordinate grid and LEDs
 
-This lesson introduces the use of coordinates to store data or the results of mathematical operations. It gives students practice programming for the LEDs of the micro:bit screen using coordinates. And introduces the basic game blocks of MakeCode.
+![Sample Heart Simulator](/static/courses/csintro/coordinates/cover.png)
+
+This lesson introduces the use of coordinates to store data or the results of mathematical operations. It gives students practice programming for the LEDs of the micro:bit screen using coordinates, and introduces the basic game blocks of MakeCode.
 
 ## Lesson objectives
 
 Students will...
-* Understand that the 5 x 5 grid of LEDs on the micro:bit represent a coordinate grid with the origin (0,0) in the top left corner.
+* Understand that the 5 x 5 grid of LEDs on the micro:bit represents a coordinate grid with the origin (0,0) in the top left corner.
 * Understand that the values of the x coordinates range from 0 through four and increase from left to right.
 * Understand that the values of the y coordinates range from 0 through four and increase from top to bottom.
 * Learn how to refer to an individual LED by its x & y coordinates.

docs/courses/csintro/coordinates/activity.md

@@ -109,7 +109,7 @@ Check the on/off state of an LED
 * If the LED is currently off, the point x y block will return false. 
 
 * For this exercise, we’ll use the two Yes/No built in icons to display the LED’s current status. From the Basic Toolbox drawer, drag 2 'show icon' blocks into each of the 'then' and 'else' clauses.  Select the check mark for Yes, and the X icon for No.
-* For now, we’ll leave the default coordinate values (0,0).  But you can challenge your students to add a loop to test for all coordinates on the micro:bit
+* For now, we’ll leave the default coordinate values (0,0).  But you can challenge your students to add a loop to test for all coordinates on the micro:bit.
 
 Here is the complete program:
 

docs/courses/csintro/coordinates/project.md

@@ -19,6 +19,7 @@ Your project might use variables to store the values of sprites, which are speci
 
 ## Project Ideas
 
+![Firework Example](/static/courses/csintro/coordinates/firework.gif)
 ### Firework screensaver
 
 This project uses a for loop with the plot/unplot blocks to create a symmetrical design on the screen. This student used a subtraction operation to get a variable that decreases as the index variable in the loop increases.
@@ -40,6 +41,7 @@ basic.forever(() => {
 })
 ```
 
+![Player Grid Example](/static/courses/csintro/coordinates/cascade.gif)
 ### Cascade screensaver
 
 This example creates a diagonal cascading effect across the screen. Note the use of a variable (speed) to allow you to easily change the speed of the animation by changing just one number value.

docs/courses/csintro/coordinates/unplugged.md

@@ -7,7 +7,8 @@ To help us practice using the correct coordinates for the grid of micro:bit LEDs
 Have students make their own sets of 5x5 grids to reinforce the layout of the micro:bit grid.
 
 Each student should make two grids. One grid is for placing their own ships and keeping track of their opponent’s hits and misses and the other grid is for keeping track of their own hits and misses while trying to determine the location of their opponent’s ships.
- 
+
+![Player Grid Example](/static/courses/csintro/coordinates/player-grid.png)
 Player’s grid: Mark where your ships are and keep track of your opponent’s hits and misses.
 
 ```
@@ -18,6 +19,8 @@ Player’s grid: Mark where your ships are and keep track of your opponent’s h
 	(0,4)	(1,4)	(2,4)	(3,4)	(4,4)
 	 
 ```
+
+![Opponent Grid Example](/static/courses/csintro/coordinates/opponent-grid.png)
 Opponent’s grid: Keep track of your hits and misses while trying to locate your opponent’s ships.
 
 ```