# Feedback on our interactive Markdown tutorial

**URL:** https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290
**Category:** Site feedback
**Created:** [December 30, 2015, 11:48pm UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290 "2015-12-30T23:48:02Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [December 30, 2015, 11:48pm UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/1 "2015-12-30T23:48:02Z")

</div>

We’re putting together the user-friendliest Markdown tutorial we possibly can at:

> **[Markdown Reference](https://commonmark.org/help/)**

If you have a chance, can you take a peek, try the interactive tutorial, and let us know what you think?

All feedback welcome. 📣

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [December 31, 2015, 12:29am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/2 "2015-12-31T00:29:03Z")

</div>

So the only suggestion I have, is to make it easier to get back to the original text. On the last Nested List exercise, I accidentally removed some of the text, and had a heck of a time getting that text back. I eventually had to refresh the page and go through the first 2 or 3 nested list excersizes again to get to the final exercise.

Having a “Start Over” button for each exercise that puts the input back to its original state would have been nice.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [December 31, 2015, 12:44am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/3 "2015-12-31T00:44:10Z")

</div>

Sure, have heard that from @erlend_sh before 😉 — in the meantime select the lesson from the navigation (on the right, on desktop, or at the bottom, on mobile) to reset the lesson.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [December 31, 2015, 1:13am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/4 "2015-12-31T01:13:56Z")

</div>

> [@codinghorror](#):
>
> in the meantime select the lesson from the navigation (on the right, on desktop, or at the bottom, on mobile) to reset the lesson.

Yeah, that does the same as a refresh, so I would still have to complete the first two sub-exercises for nested lists to get to the final one 🙂 Was trying to not have to redo them again to get to where I was.

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [December 31, 2015, 2:14am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/5 "2015-12-31T02:14:03Z")

</div>

The section on block quotes, 1st question is unclear in its description.

It says:

> Can you make the section in quotes a blockquote?

To me, I wanted to type the following:

```
The quote 
> Somewhere, something incredible is waiting to be known

has been ascribed to Carl Sagan.

```

No quotes when making the blockquote. However, it is looking for:

```
The quote 
> "Somewhere, something incredible is waiting to be known"

has been ascribed to Carl Sagan.

```

Maybe it is just me, but I would remove the `"` when turning something into a blockquote.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [December 31, 2015, 2:14am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/6 "2015-12-31T02:14:44Z")

</div>

You can navigate to individual exercises (at least on desktop) using the circles at the bottom of the page. There’s one circle per “page” of the lesson.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [December 31, 2015, 2:15am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/7 "2015-12-31T02:15:06Z")

</div>

> [@jomaxro](#):
>
> I would remove the " when turning something into a blockquote.

Yes this is coming up elsewhere so I will likely make the instructions more explicit here.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [December 31, 2015, 3:27am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/13 "2015-12-31T03:27:15Z")

</div>

Hmmm I don;t remember seeing little circles anywhere. I’ll have to give it another shot tomorrow.

Edit: Yep, I see them now. Never noticed them before, probably because everything else had my gazed up at the top half of the screen that I never bothered to look at the bottom half.

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [December 31, 2015, 4:24am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/14 "2015-12-31T04:24:25Z")

</div>

exercise 4 on the emphasis lesson is a little weird to me since it’s in the section about emphasis.

* * *

Can you change the last line so the \* is visible?

```
I am totally awesome.*
* for certain very small values of awesome

```

* * *

I feel like it should instead be something like:

* * *

Can you change the line below so that “awesome” shows up with asterisks around it instead of in italics?

```
I am a totally *awesome* person.

```

* * *

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [December 31, 2015, 4:27am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/15 "2015-12-31T04:27:21Z")

</div>

Your example is one I have never seen in the wild, ever. The whole point of asterisk emphasis is to turn what you typed above into italics. Whereas regular people do use asterisks for other regular people stuff and get in trouble doing so with markdown. Hence teaching escapes early.

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [December 31, 2015, 4:31am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/16 "2015-12-31T04:31:06Z")

</div>

Fair enough… But it still feels a little incongruous since I haven’t been taught yet at that point that asterisks and dashes are also used to create bullets in an unordered list.

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [December 31, 2015, 4:43am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/17 "2015-12-31T04:43:56Z")

</div>

In this example, it’s not so obvious that escaping the dot to make it not a list actually does anything since the styling of the ordered list has no indentation.

* * *

“We don’t want a list here. Can you fix it?”

```
1986. What a great season

```

* * *

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [December 31, 2015, 4:46am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/18 "2015-12-31T04:46:03Z")

</div>

In the first “nested list” example, I was able to nest the list by only indenting each sub-item with two spaces, but the instructions on the page before indicate that four spaces are needed…

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [December 31, 2015, 4:53am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/19 "2015-12-31T04:53:46Z")

</div>

On the third “nested list” example, the text is pretty long. The preview doesn’t scroll with me and grabbing the bottom corner of the text input area to make that longer doesn’t make the preview longer either. So I can’t see what’s happening as I get toward the bottom without scrolling manually

… that’s all I got!

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [December 31, 2015, 6:00am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/20 "2015-12-31T06:00:15Z")

</div>

> [@mcwumbly](#):
>
> I haven’t been taught yet at that point that asterisks and dashes are also used to create bullets in an unordered list.

The point of the exercise is to make a \* a \*, and that’s an **emphasis character** which does get used pretty regularly by normals… and to teach people _very_ early on …

> if stuff gets jacked up, start escaping special characters!

I dunno, you might be overthinking this a tad. I am loathe to move all talk of escaping way deep into list lesson, when normals run into escaping problems kinda frequently in Markdown.

> [@mcwumbly](#):
>
> “We don’t want a list here. Can you fix it?”

Good point, there were a few problems there:

- the sentence wasn’t long enough to show text wrap
- the annoying `skeleton.css` originally used to build this tutorial overrode the list styles so no list indent was being used for numbered lists
- the left padding required for a 4 digit number is much bigger than we need elsewhere so I made the css specific to this exercise.

I guess we could use the other common problem I see, other than “ascii asterisk footnote” which is the faux signature block.. that’s also a list.

> Blah blah blah blah
> 
> - Jeff

> [@mcwumbly](#):
>
> but the instructions on the page before indicate that four spaces are needed…

Yes, thanks, I will correct that.

> [@mcwumbly](#):
>
> The preview doesn’t scroll with me and grabbing the bottom corner of the text input area to make that longer doesn’t make the preview longer either. So I can’t see what’s happening as I get toward the bottom without scrolling manually

What device are you on? There are `@media` queries for height that set the height of the editors based on how much vertical space there is. Also I can drag the textbox just fine in Chrome?

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [December 31, 2015, 6:06am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/21 "2015-12-31T06:06:37Z")

</div>

> [@codinghorror](#):
>
> > but the instructions on the page before indicate that four spaces are needed…
> 
> Yes, thanks, I will correct that.

However, the last example (pictured below), _does_ require four spaces for the nested bullet list under the `1.` to get nested. So not sure if that 2-space observation is a tutorial issue, a commonmark spec issue, or an issue with the implementation used by the tutorial…

> [@codinghorror](#):
>
> What device are you on? There are @media queries for height that set the height of the editors based on how much vertical space there is. Also I can drag the textbox just fine in Chrome?

Mac OS X laptop in Chrome:

 ![](https://global.discourse-cdn.com/meta/original/3X/1/c/1cd88f6b47b749bf44009373498a0bef4d12d289.png)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [December 31, 2015, 6:16am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/22 "2015-12-31T06:16:08Z")

</div>

> [@mcwumbly](#):
>
> However, the last example (pictured below), does require four spaces for the nested bullet list under the 1. to get nested

Let’s just keep the numbers at the official values. It looks like depending on where the parser is, it can guess sooner, but 4 spaces is the correct amount, so I am changing that back.

> [@mcwumbly](#):
>
> Mac OS X laptop in Chrome:

Looks like these are not working for you:

```
@media (min-height: 600px) { /* iPhone 6
@media (min-height: 700px) { /* iPhone 6+
@media (min-height: 900px) { /* desktop

```

so I added a

```
@media (min-height: 800px) {

```

Not much more I can do other than that.

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [December 31, 2015, 6:30am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/23 "2015-12-31T06:30:53Z")

</div>

> [@codinghorror](#):
>
> Looks like these are not working for you

Oh, it was the combination of the bookmarks bar at the top and the downloads list at the bottom which brought the height down below 900px.

Everything but the last line is displayed now when I first load that page if I hit the 900px break-point:

 ![](https://global.discourse-cdn.com/meta/original/3X/7/7/770374aa14eec2f16499950558379cd6d8093ccd.png)

---

<div class="post-metadata">

### Author: ![Nick](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nick/32/235642_2.png) [@Nick](https://meta.discourse.org/u/Nick)
#### Post date: [December 31, 2015, 8:09am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/24 "2015-12-31T08:09:18Z")

</div>

Here’s some feedback I have based on my run through. I haven’t read through _all_ of the feedback above, so I may be repeating some - but I’ll try to keep it terse as these are _mostly nitpicky_:

- I think you should be able to **completely navigate with the enter key once you complete an exercise**. It felt awkward being able to hit enter to close the “good job” dialogue, but not to go to the next problem (and instead having to reach for my mouse or tab to the next button) **[kinda fixed]**

- **Fix or disable broken textbox resizing**  

- **Force using ``` to close code block** as well as open. Unsure if this is intentional, but it accepted my md as completed even though I had not properly closed my code block (since it’s tokenized anyway, I assume) (noticed in 06-code.html)

- Less importantly: **the shadow on the tooltips feels a bit too intense.**

**Update:**

- Showing a faded version of the map gave me a better sense of orientation as I navigated through the tutorial. I didn’t feel kinda floating-in-space-y  
 ![](https://global.discourse-cdn.com/meta/original/3X/6/b/6b6a9620d757ba63745c662018eb01a56aefca71.png)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [December 31, 2015, 8:19am UTC](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290/25 "2015-12-31T08:19:37Z")

</div>

> [@Nick](#):
>
> Showing a faded version of the map

I kind of agree with this, but we need to make sure the width is there for it.. and on mobile we don’t show that at all.

[Next page](https://meta.discourse.org/t/feedback-on-our-interactive-markdown-tutorial/37290.md?page=2)
