# Tutorial Creators

**URL:** <https://forum.makecode.com/t/tutorial-creators/19464>\
**Category:** Educators' Lounge\
**Created:** [April 27, 2023, 6:23pm UTC](https://forum.makecode.com/t/tutorial-creators/19464 "2023-04-27T18:23:49Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [February 22, 2024, 11:07pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/21 "2024-02-22T23:07:10Z")

</div>

Here is the slide decks for CS Intro 1 \> Intro \> Makecode Orientation. I am creating the Tutorial Editor slide deck next.

[Google Slides](https://docs.google.com/presentation/d/1m2tYk_-N1PhBMYbO0VwQrBfNszJbO9tCwbREoq3Jm0M/copy)

[PowerPoint](https://1drv.ms/p/s!AjjGIDI0jIKJghP_ryZVvNiLDSEL?e=335FKw)

---

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [February 26, 2024, 10:40pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/22 "2024-02-26T22:40:39Z")

</div>

I was trying to test my tutorial in the Makecode Arcade editor but I keep receiving this following message. Any idea on what I could be doing wrong? I know its not my internet connect and the tutorial is connected to my Github. @MakeCode @richard @jwunderl @KIKIvsIT

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/c/c80dc4f341280c3112108b48e1bf9bde250a275d.png)

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [February 26, 2024, 10:41pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/23 "2024-02-26T22:41:34Z")

</div>

Can you screenshot any errors that show up in the console?

---

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [February 27, 2024, 5:21pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/24 "2024-02-27T17:21:15Z")

</div>

There are no errors showing up in the console. When I go use the link via the Share button that brings up tutorial, so I can just use that now. I only get that error when trying to open tutorial using the experiment button.

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [February 27, 2024, 5:21pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/25 "2024-02-27T17:21:40Z")

</div>

hmmm @rymc88 can you give me the share link so that I can import it and try to reproduce it locally?

---

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [February 27, 2024, 9:50pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/26 "2024-02-27T21:50:51Z")

</div>

Of course

[https://arcade.makecode.com/#tutorial:github:rymc88/tutorial-test/test-tutorial](https://arcade.makecode.com/#tutorial:github:rymc88/tutorial-test/test-tutorial)

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [February 27, 2024, 10:41pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/27 "2024-02-27T22:41:10Z")

</div>

@rymc88 thanks! you definitely found a bug. I’ve filed an issue here:

> <https://github.com/microsoft/pxt-arcade/issues/6355>
>
> Reported on the forum here:
> 
> https://forum.makecode.com/t/tutorial-creators/19…464/23
> 
> To repro:
> 
> 1. Import rymc88/tutorial-test
> 2. Click the Preview button (flask icon) next to the tutorial md in the file explorer
> 3. A new tab opens but it fails to load the tutorial
> 
> I did a little debugging on this and the issue is that the project is being created with the temporary flag set to true; this prevents the project from getting saved to disk and causes the project to fail to load when we then immediately try to read it from disk! not sure how this ever worked tbh

---

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [February 29, 2024, 5:48pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/28 "2024-02-29T17:48:14Z")

</div>

I am having trouble figuring out place an image/gif into a tutorial. Looking at examples and the writing docs I understand how to reference it in the markdown, I just understand how to store so it can be reference. The bit below from the writing docs have me confused.

“Images should be hosted under the `./docs/static/` folder path of the editor project’s repository files. The relative URL in markdown begins with just `/static/` though.” - Writing Doc

Any help would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![MakeCode](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@MakeCode](https://forum.makecode.com/u/MakeCode)\
**Post date:** [February 29, 2024, 5:50pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/29 "2024-02-29T17:50:25Z")

</div>

You can pull images from anywhere, you just need to use the full URL instead of relative addressing. I believe only MakeCode can use relative addressing, since it’s relative to the MakeCode docs folder and not the skillmap itself.

For an image hosted in your Github repo, you can right click the image to get the blob address. It will be long, but it should work!

---

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [March 1, 2024, 7:09pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/30 "2024-03-01T19:09:28Z")

</div>

Awesome! Thank you for the help 🙂

---

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [March 6, 2024, 2:30am UTC](https://forum.makecode.com/t/tutorial-creators/19464/31 "2024-03-06T02:30:02Z")

</div>

I created a slide deck that walks through the basics of making a tutorial with Blocks, JavaScript or Python. I plan on making another that covers Github integration and more advanced tutorial features.

[Google Slides](https://docs.google.com/presentation/d/1CBwR7r1LSzItgMVt3tCoWOUoRgXjvnJo215ahXBy2Yo/copy)

[PowerPoint](https://1drv.ms/p/s!AjjGIDI0jIKJghU04kwduMnZyzo0?e=uEdcht)

---

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [March 15, 2024, 10:44pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/32 "2024-03-15T22:44:00Z")

</div>

@MakeCode I cannot seem to have the “mySprite say block” available in the toolbox in my tutorial even when using the ghost markdown.

![2024-03-14_11-49-28](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/5/58e6f17880f83e415a74d5554aaae1c17597177b.png)

---

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [March 17, 2024, 10:07pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/33 "2024-03-17T22:07:47Z")

</div>

@MakeCode @richard I am having trouble getting images to appear in my tutorials and skillmaps. What is the proper markdown for inserting images because I have tried every way the Writing Docs & samples have mentioned and still I have no luck ☹

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [March 17, 2024, 10:15pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/34 "2024-03-17T22:15:32Z")

</div>

Hi, @rymc88 !

This seemed to work just fine. Note the exclamation mark before the alt-text and URL.

> **[Microsoft MakeCode Arcade](https://arcade.makecode.com/#tutorial:23848-11628-02025-46619)**
>
> Develop your programming skills by quickly creating and modding retro arcade games with Blocks and JavaScript in the MakeCode editor

```markdown
# My Tutorial

## Step 1

![Microsoft logo](https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RWCZER?ver=1433&q=90&m=6&h=120&w=120&b=%23FFFFFFFF&l=f&o=t&aim=true)

Here is some text.

## Step 2

Congratulations, you did it!
    

```

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [March 17, 2024, 10:38pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/35 "2024-03-17T22:38:35Z")

</div>

@rymc88 : If I am interpreting the MakeCode Tutorial system correctly, the tutorial and your code both need to be well-formed. If I enter just those six lines as a tutorial, the tutorial will fail to run … although I’m guessing that you have additional code following those six. 🙂

- A tutorial must have at least one page (_i.e._, you need at least one level-two heading).
- In your code snippet, `mySprite` is undefined.

This seems to work:

> **[Microsoft MakeCode Arcade](https://arcade.makecode.com/#tutorial:96298-08232-67765-04500)**
>
> Develop your programming skills by quickly creating and modding retro arcade games with Blocks and JavaScript in the MakeCode editor

````markdown
# Lab 1.2 - Sprites in the Corner

## Step 1

This is step 1.

## Step 2

This is step 2.

```ghost
let mySprite = sprites.create(img`.`, SpriteKind.Player)
mySprite.sayText(":)")
game.showLongText("", DialogLayout.Bottom)
```

````

I’m still getting accustomed to the tutorial environment, so I’m sure I’m missing some things. Please keep posting questions. We’ll learn together! 😄

---

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [March 18, 2024, 4:34pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/36 "2024-03-18T16:34:12Z")

</div>

I think the issue was I grabbing the image from my GitHub repository. I had to append the link with:  
?raw=true

![Overview](https://github.com/rymc88/Lab-1-2/blob/master/img/overview-4.png?raw=true)

---

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [March 18, 2024, 4:34pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/37 "2024-03-18T16:34:22Z")

</div>

I went back to it and it was not having mySprite defined, I cannot believe it was that easy haha.

---

<div class="post-metadata">

**Author:** ![KIKIvsIT](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kikivsit/32/10492_2.png) [@KIKIvsIT](https://forum.makecode.com/u/KIKIvsIT)\
**Post date:** [March 18, 2024, 7:08pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/38 "2024-03-18T19:08:31Z")

</div>

Okay, this isn’t even close to done yet, but it should be helpful for this thread.

> **[Create or Edit Your Own MakeCode Skillmaps](https://arcade.makecode.com/courses/tut-tut/tutorial-tutorial)**
>
> Did you know you can create your own MakeCode tutorials?

Only the first card is working at this point (“Edit a Tutorial”) and the main takeaway from it is that these two tutorials are SUPER-COMMENTED so they can help you understand how to do most of what we do internally.

> **[Microsoft MakeCode Arcade](https://arcade.makecode.com/#tutorial:/tutorials/hundred)**
>
> Develop your programming skills by quickly creating and modding retro arcade games with Blocks and JavaScript in the MakeCode editor

[https://raw.githubusercontent.com/microsoft/pxt-arcade/master/docs/tutorials/hundred.md](https://raw.githubusercontent.com/microsoft/pxt-arcade/master/docs/tutorials/hundred.md)

and

> **[Microsoft MakeCode Arcade](https://arcade.makecode.com/#tutorial:/test/skillmap/class/class1)**
>
> Develop your programming skills by quickly creating and modding retro arcade games with Blocks and JavaScript in the MakeCode editor

[https://raw.githubusercontent.com/microsoft/pxt-arcade/master/docs/test/skillmap/class/class1.md](https://raw.githubusercontent.com/microsoft/pxt-arcade/master/docs/test/skillmap/class/class1.md)

---

<div class="post-metadata">

**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\
**Post date:** [March 22, 2024, 10:18pm UTC](https://forum.makecode.com/t/tutorial-creators/19464/39 "2024-03-22T22:18:23Z")

</div>

I cannot figure out why my Skillmap gets stuck loading when a step is chosen. Any ideas?

[Skillmap Link](https://arcade.makecode.com/--skillmap#github:rymc88/Unit-1-Skillmap/blob/master/skillmap.md)

[Skillmap Github](https://github.com/rymc88/Unit-1-Skillmap)

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [March 24, 2024, 3:26am UTC](https://forum.makecode.com/t/tutorial-creators/19464/40 "2024-03-24T03:26:24Z")

</div>

Interesting…

![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/1/17acd12321dd00d90facd146cf87d68e862c002c.png)

I’ve forked your repository so that I can play around with some ideas. I’ll report back if I find anything interesting!

[Previous page](https://forum.makecode.com/t/tutorial-creators/19464.md?page=1)

[Next page](https://forum.makecode.com/t/tutorial-creators/19464.md?page=3)