Intro to CS landing page (#6513) (#6514)

* Fix typo. * Fix typos. * File reorg. * Link tutorials. * Add skillmaps. * Include static images. Co-authored-by: Alex Kulcsar <[email protected]>
microsoft · Oct 11, 2024 · dc30404 · dc30404
1 parent 530afad
commit dc30404
Show file tree

Hide file tree

Showing 47 changed files with 653 additions and 35 deletions.
diff --git a/docs/courses/csintro.md b/docs/courses/csintro.md
@@ -1,57 +1,252 @@
-# Introduction to Computer Science with MakeCode Arcade
+# Introduction to Computer Science   
+# with Microsoft MakeCode Arcade
 
-Hello!  Welcome to the new student guide for "Introduction to Computer Science with MakeCode Arcade"!
+Hello! Welcome to the student guide for *Introduction to Computer Science with Microsoft MakeCode Arcade*!
 
 This page will provide you with additional activities that you can complete in order to better understand the lessons in the official curriculum.  Please note, this page does not contain any answer keys or exemplar projects.
 
-### ~hint
+## Introduction
 
-If you are looking for our previous "CS Intro" course, you may now find that at:"
-https://arcade.makecode.com/courses/csintro-archive
+New to tutorials in MakeCode? Then follow the *Intro to MakeCode Arcade* tutorial below!
 
-### ~
+```codecard
+[
+    {
+        "name": "Intro to MakeCode Arcade",
+        "description": "Follow step-by-step instructions to learn the basics of using MakeCode Arcade tutorials!",
+        "url": "https://aka.ms/mc-intro",
+        "imageUrl": "/static/tutorials/interface/info.png",
+        "largeImageUrl": "/static/tutorials/interface/info.png",
+        "label": "New? Try This!",
+        "labelClass": "orange ribbon large"
+    }
+]
+```
+
+## Skillmaps
 
+Appropriate labs from each unit are aggregated below into skillmaps.
 
-## Unit 0 Activities
+<!--
+### Blocks semester
+-->
 
 ```codecard
 [
     {
-        "name": "CS Intro 1",
-        "description": "A semester length computer science course for beginning coders",
-        "url":"/courses/csintro1",
-        "imageUrl": "/static/courses/csintro1.gif"
-    }, {
-        "name": "CS Intro 2",
-        "description": "A continuation of the Intro to CS course",
-        "url":"/courses/csintro2",
-        "imageUrl": "/static/courses/csintro2.gif"
-    }, {
-        "name": "CS Intro 3",
-        "description": "A quarter length transition from blocks to JavaScript",
-        "url": "/courses/csintro3",
-        "imageUrl": "/static/courses/csintro3.gif"
+        "name": "Unit 1",
+        "description": "Sprites",
+        "url": "/--skillmap#github:microsoft/pxt-arcade/docs/courses/csintro/blocks/unit1/skillmap",
+        "imageUrl": "https://arcade.makecode.com/api/S01708-98615-82961-41216/thumb"
+    }, {
+        "name": "Unit 2",
+        "description": "Event handlers and variables",
+        "url": "/--skillmap#github:microsoft/pxt-arcade/docs/courses/csintro/blocks/unit2/skillmap",
+        "imageUrl": "https://arcade.makecode.com/api/S01440-65616-58259-55413/thumb"
+    }, {
+        "name": "Unit 3",
+        "description": "Loops and arrays",
+        "url": "/--skillmap#github:microsoft/pxt-arcade/docs/courses/csintro/blocks/unit3/skillmap",
+        "imageUrl": "https://arcade.makecode.com/api/S24151-39662-06684-76747/thumb"
     }
 ]
 ```
 
-## Unit 1 Activities
+## Tutorials
 
+The individual activities presented in the skillmaps above are also provided as standalone tutorials below.
 
+<!---
+### Blocks semester
+-->
 
-## Unit 2 Activities
-
+#### Unit 0 Activities
 
+```codecard
+[
+    {
+        "name": "Lab 0.6",
+        "description": "It's all about you!",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-0/lab0006",
+        "imageUrl": "https://arcade.makecode.com/api/S02325-67229-86604-38896/thumb"
+    }
+]
+```
 
-## Unit 3 Activities
+#### Unit 1 Activities
 
+```codecard
+[
+    {
+        "name": "Lab 1.1 part 1",
+        "description": "Blocks scavenger hunt",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0101-part1",
+        "imageUrl": "https://arcade.makecode.com/api/S84007-40614-44053-34591/thumb"
+    }, {
+        "name": "Lab 1.1 part 2",
+        "description": "Renaming variables",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0101-part2",
+        "imageUrl": "/static/courses/csintro/S01.L01.01.P02.rename_variable.gif"
+    }, {
+        "name": "Lab 1.2",
+        "description": "Sprites in the corners",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0102",
+        "imageUrl": "https://arcade.makecode.com/api/S48579-29555-87617-56521/thumb"
+    }, {
+        "name": "Lab 1.3",
+        "description": "Moving sprites",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0103",
+        "imageUrl": "https://arcade.makecode.com/api/S96674-90076-64399-84406/thumb"
+    }, {
+        "name": "Lab 1.4 part 1",
+        "description": "Start wherever",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0104-part1",
+        "imageUrl": "https://arcade.makecode.com/api/S72191-59096-40476-83475/thumb"
+    }, {
+        "name": "Lab 1.4 part 2",
+        "description": "Eat it all",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0104-part2",
+        "imageUrl": "https://arcade.makecode.com/api/S72191-59096-40476-83475/thumb"
+    }, {
+        "name": "Lab 1.4 part 3",
+        "description": "Points and Lives",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0104-part3",
+        "imageUrl": "https://arcade.makecode.com/api/S72191-59096-40476-83475/thumb"
+    }, {
+        "name": "Lab 1.5",
+        "description": "Eat some more",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-1/lab0105",
+        "imageUrl": "https://arcade.makecode.com/api/S01708-98615-82961-41216/thumb"
+    }
+]
+```
 
+#### Unit 2 Activities
 
+```codecard
+[
+    {
+        "name": "Lab 2.1 part 1",
+        "description": "Fire away",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part1",
+        "imageUrl": "https://arcade.makecode.com/api/S02046-71712-34811-01331/thumb"
+    }, {
+        "name": "Lab 2.1 part 2",
+        "description": "Here come the enemies",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part2",
+        "imageUrl": "https://arcade.makecode.com/api/S02046-71712-34811-01331/thumb"
+    }, {
+        "name": "Lab 2.1 part 3",
+        "description": "Villains be gone",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part3",
+        "imageUrl": "https://arcade.makecode.com/api/S02046-71712-34811-01331/thumb"
+    }, {
+        "name": "Lab 2.1 part 4",
+        "description": "Collision alert",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part4",
+        "imageUrl": "https://arcade.makecode.com/api/S02046-71712-34811-01331/thumb"
+    }, {
+        "name": "Lab 2.1 part 5",
+        "description": "Bonus: Pew-pew",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0201-part5",
+        "imageUrl": "https://arcade.makecode.com/api/S02046-71712-34811-01331/thumb"
+    }, {
+        "name": "Lab 2.2 part 1",
+        "description": "Introduction to variables",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0202-part1",
+        "imageUrl": "https://arcade.makecode.com/api/S47184-28116-73351-38074/thumb"
+    }, {
+        "name": "Lab 2.2 part 2",
+        "description": "Count the items",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0202-part2",
+        "imageUrl": "https://arcade.makecode.com/api/S47184-28116-73351-38074/thumb"
+    }, {
+        "name": "Lab 2.3",
+        "description": "Variables and math",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0203",
+        "imageUrl": "https://arcade.makecode.com/api/S61412-68869-78966-85149/thumb"
+    }, {
+        "name": "Lab 2.4",
+        "description": "Silly story time",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0204",
+        "imageUrl": "https://arcade.makecode.com/api/S01440-65616-58259-55413/thumb"
+    }, {
+        "name": "Lab 2.5 part 1",
+        "description": "Pick a number",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0205-part1",
+        "imageUrl": "https://arcade.makecode.com/api/S67034-82374-71681-88847/thumb"
+    }, {
+        "name": "Lab 2.5 part 2",
+        "description": "Even or odd",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0205-part2",
+        "imageUrl": "https://arcade.makecode.com/api/S99104-69456-21835-87580/thumb"
+    }, {
+        "name": "Lab 2.5 part 3",
+        "description": "Magic four ball",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0205-part3",
+        "imageUrl": "https://arcade.makecode.com/api/S60868-62929-06905-31439/thumb"
+    }, {
+        "name": "Lab 2.6 part 1",
+        "description": "Only room for three",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part1",
+        "imageUrl": "https://arcade.makecode.com/api/S75841-44862-62246-25929/thumb"
+    }, {
+        "name": "Lab 2.6 part 2",
+        "description": "Here come the enemies ... faster",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part2",
+        "imageUrl": "https://arcade.makecode.com/api/S75841-44862-62246-25929/thumb"
+    }, {
+        "name": "Lab 2.6 part 3",
+        "description": "Not too fast",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part3",
+        "imageUrl": "https://arcade.makecode.com/api/S75841-44862-62246-25929/thumb"
+    }, {
+        "name": "Lab 2.6 part 4",
+        "description": "Starting difficulty",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-2/lab0206-part4",
+        "imageUrl": "https://arcade.makecode.com/api/S75841-44862-62246-25929/thumb"
+    }
+]
+```
 
+#### Unit 3 Activities
 
+```codecard
+[
+    {
+        "name": "Lab 3.1 part 1",
+        "description": "The repeat loop",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-3/lab0301-part1",
+        "imageUrl": "https://arcade.makecode.com/api/S58596-07767-54155-54916/thumb"
+    }, {
+        "name": "Lab 3.1 part 2",
+        "description": "The for loop",
+        "url": "/#tutorial:/courses/csintro/blocks/unit-3/lab0301-part2",
+        "imageUrl": "https://arcade.makecode.com/api/S04739-13054-75441-03012/thumb"
+    }, {
+        "name": "Lab 3.4",
+        "description": "High scores",
+        "url": "/--skillmap#github:microsoft/pxt-arcade/docs/courses/csintro/blocks/unit3/lab-3-4-skillmap",
+        "imageUrl": "https://arcade.makecode.com/api/S61379-50555-16499-36625/thumb"
+    }, {
+        "name": "Lab 3.5",
+        "description": "Animated sprites",
+        "url": "/--skillmap#github:microsoft/pxt-arcade/docs/courses/csintro/blocks/unit3/lab-3-5-skillmap",
+        "imageUrl": "https://arcade.makecode.com/api/S24151-39662-06684-76747/thumb"
+    }
+]
+```
 
 ## See also
 
 [Courses Home Page](/courses),
 [Arcade Tutorials](/tutorials),
 [Beginner Skillmaps](/beginner-maps),
+
+### ~hint
+
+If you are looking for our previous "CS Intro" course, you may now find that at:
+https://arcade.makecode.com/courses/csintro_archive
+
+### ~
+
diff --git a/docs/courses/csintro/unit-0/s01-lab0006.md → .../courses/csintro/blocks/unit-0/lab0006.md b/docs/courses/csintro/unit-0/s01-lab0006.md → .../courses/csintro/blocks/unit-0/lab0006.md
diff --git a/...urses/csintro/unit-1/s01-lab0101-part1.md → ...es/csintro/blocks/unit-1/lab0101-part1.md b/...urses/csintro/unit-1/s01-lab0101-part1.md → ...es/csintro/blocks/unit-1/lab0101-part1.md
diff --git a/...urses/csintro/unit-1/s01-lab0101-part2.md → ...es/csintro/blocks/unit-1/lab0101-part2.md b/...urses/csintro/unit-1/s01-lab0101-part2.md → ...es/csintro/blocks/unit-1/lab0101-part2.md
diff --git a/docs/courses/csintro/unit-1/s01-lab0102.md → .../courses/csintro/blocks/unit-1/lab0102.md b/docs/courses/csintro/unit-1/s01-lab0102.md → .../courses/csintro/blocks/unit-1/lab0102.md
@@ -48,7 +48,7 @@ Use a
 ``||sprites:position to x (0) y (0)||``   
 block.
 
-![An animation showing how to change a sprite kind.](https://alex-kulcsar.github.io/introcs-tutorials/assets/images/S01.L01.02.change_sprite_kind.gif)
+![An animation showing how to change a sprite kind.](/static/courses/csintro/S01.L01.02.change_sprite_kind.gif)
 
 ```blocks
 let heroSprite: Sprite = sprites.create(img`1`, SpriteKind.Player)

diff --git a/docs/courses/csintro/unit-1/s01-lab0103.md → .../courses/csintro/blocks/unit-1/lab0103.md b/docs/courses/csintro/unit-1/s01-lab0103.md → .../courses/csintro/blocks/unit-1/lab0103.md
@@ -201,7 +201,7 @@ game.showLongText("This is my story!", DialogLayout.Center)
 
 Can you make the food sprite move in a specific direction?
 
-![A compass rose.](https://alex-kulcsar.github.io/introcs-tutorials/assets/images/S01.L01.03.compass_rose.png)   
+![A compass rose.](/static/courses/csintro/S01.L01.03.compass_rose.png)   
 [This image](https://commons.wikimedia.org/wiki/File:Compass_rose_simple.svg) by Henrik is licensed under [CC BY-SA](https://creativecommons.org/licenses/by-sa/3.0/)
 
 **Questions**

diff --git a/...urses/csintro/unit-1/s01-lab0104-part1.md → ...es/csintro/blocks/unit-1/lab0104-part1.md b/...urses/csintro/unit-1/s01-lab0104-part1.md → ...es/csintro/blocks/unit-1/lab0104-part1.md
diff --git a/...urses/csintro/unit-1/s01-lab0104-part2.md → ...es/csintro/blocks/unit-1/lab0104-part2.md b/...urses/csintro/unit-1/s01-lab0104-part2.md → ...es/csintro/blocks/unit-1/lab0104-part2.md
@@ -116,7 +116,7 @@ Use the hint to see a screenshot of this and to check your code.
 Play your game in the simulator to see what happens when the enemy sprite
 collides with your hero!
 
-![Using a local variable from a function header.](https://alex-kulcsar.github.io/introcs-tutorials/assets/images/S01.L01.04.P02.function_use_local_variable.png)
+![Using a local variable from a function header.](/static/courses/csintro/S01.L01.04.P02.function_use_local_variable.png)
 
 ```block
 sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {

diff --git a/...urses/csintro/unit-1/s01-lab0104-part3.md → ...es/csintro/blocks/unit-1/lab0104-part3.md b/...urses/csintro/unit-1/s01-lab0104-part3.md → ...es/csintro/blocks/unit-1/lab0104-part3.md
diff --git a/docs/courses/csintro/unit-1/s01-lab0105.md → .../courses/csintro/blocks/unit-1/lab0105.md b/docs/courses/csintro/unit-1/s01-lab0105.md → .../courses/csintro/blocks/unit-1/lab0105.md
@@ -56,7 +56,7 @@ If we just made this new sprite a kind of food, then it will act like
 the other food in this game.
 hint~
 
-![Adding a new sprite kind.](https://alex-kulcsar.github.io/introcs-tutorials/assets/images/S01.L01.05.new_sprite_kind.gif)
+![Adding a new sprite kind.](/static/courses/csintro/S01.L01.05.new_sprite_kind.gif)
 
 ## New life!