Skip to content

Commit

Permalink
Intro to CS landing page (#6513)
Browse files Browse the repository at this point in the history
* Fix typo.

* Fix typos.

* File reorg.

* Link tutorials.

* Add skillmaps.

* Include static images.
  • Loading branch information
alex-kulcsar authored Oct 11, 2024
1 parent 28679c8 commit 28483c7
Show file tree
Hide file tree
Showing 47 changed files with 653 additions and 35 deletions.
245 changes: 220 additions & 25 deletions docs/courses/csintro.md
Original file line number Diff line number Diff line change
@@ -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

### ~

File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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!

Expand Down
Loading

0 comments on commit 28483c7

Please sign in to comment.