Freecodecamp: Add a quick markdown challenge for new members

[alchermd]

A (very) small problem that I noticed is that new members are not that familiar with Gitter's markdown syntax. Thus, their unformatted code flood the chat channels (some even just straight up paste their challenge URL). I think a quick markdown challenge that tackles the basics allows everyone to have a smoother experience when someone asks for help.This could extend to a slightly more in-depth discussion about Read-Search-Ask and Chat Etiquette.

I think a reasonable challenge is to ask the new member to type their Hello World like this in Gitter chat:

Hello World!

My name is member#01000101. I'm from SomeCity, Country. I found freeCodeCamp through this 
and  that, and I'd be happy to learn how to code with you all!

NOTE: This is my first Github issue, and I'm not that familiar with how things work around here. Please do tell if I missed something!

[erictleung]

@alchermd thanks for the issue. I think this is a worthwhile small lesson to teach. I can empathize with you when I peruse the help rooms and find unformatted code. I'll leave this open for discussion.

cc/ @HKuz

[raisedadead]

Yes, please.

[the-thief]

@alchermd Where on the map should this challenge go?

Placing in the "Getting started" section jumps out as obvious. On the other hand it might make better sense after some of the challanges have been completed and campers have started working with code. Maybe right after the first CSS challange? Use CSS Selectors to Style Elements

[HKuz]

I'm in favor of adding a challenge that covers code formatting using markdown. As for ordering, I see the cons of making the Getting Started section even longer, but I'd vote for putting the challenge there. Maybe between Configure Your Profile and Join a freeCodeCamp Group in your City? If we cover any other markdown syntax (a heading with the hash/pound sign, links, etc), we should put it somewhere in/after the HTML section. People completely new to HTML may not understand the connection. (FYI, the existing HTML/CSS section is being split into their own respective sections as part of the curriculum expansion - the new order is here if anyone is interested).

If we want to make the challenge interactive, I don't think there's an existing challenge style in the code base where the camper can input markdown in the code editor and the output is the result of that. Not sure how hard it is to create that. Alternatively, we could use a slide style (what the other challenges use in the Getting Started section). Maybe show a side-by-side image of formatted vs non-formatted code and have a blurb of text explaining backticks. I could write that blurb pretty quickly if we go forward with this.

Just some thoughts, happy to hear what others think.

[the-thief]

If it's placed before actual coding challanges start, a generic this is my code could be used to get the main point across.

Later actual code from an existing challenge could be used should to make it more of real world example.

[HKuz]

Agreed, @the-thief - good point

[alchermd]

@the-thief I think just right before the first HTML challenge would be perfect as to illustrate the different methods of marking up text. For some reason I can't find what part of the map where the Gitter chat is introduced, maybe just right before then is also a good choice.

If it's placed before actual coding challanges start, a generic this is my code could be used to get the main point across.

So just like a screenshot, then? I think letting the new user type it out and see the results would be great. But markdown isn't really that complicated, so I think just a screenshot could work just as well.

[the-thief]

@alchermd It could be simple challenge that you only have to view.

This could be fast and easy to implement. Perhaps a gif could be added later. I like the way the Atom Flight Manual incorporates gifs.

http://flight-manual.atom.io/using-atom/sections/editing-and-deleting-text/

Here's a link to Gitter's markdown basics page. We should add this as a resource.

https://gitter.zendesk.com/hc/en-us/articles/200176682-Markdown-basics

[DarrenfJ]

My vote would be somewhere close to where the gitter chat is introduced.. as @alchermd suggested..

I've regularly been in the helpRoom since probably Julyish with a few other 'regulars' and we're often coaching people on the backticks and other markdown

[the-thief]

@DarrenfJ Gitter is introduced on as step 7 of 8 on Learn What to Do If You Get Stuck. The next challenge after that is Say Hello to HTML Elements.

We can do a quick here's my code gif, if it's possible, otherwise we can do a screenshot as a new step 8 and push the current step 8 to number 9.

I recommend we add links to resources underneath. I'm thinking a link to the freecodecamp help room and the gitter markdown basics page.

[DarrenfJ]

I would add these two resources as well:

posting code 2 min vid: https://youtu.be/ITu5kyiVtDw
(maybe make it part of the vid offerings, or redo to fCC )

FCC wiki on posting code. I know we've moved most of the wiki to the forum but this is one that might make sense to keep out... since I'm not sure what step joining the forum is.. but when we talk about the forum to people in fCChelpRoom they don't always know what we are talking about.

raw link: https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Code-Formatting

[no-stack-dub-sack]

@alchermd This was an excellent suggestion, I know I told a few people just tonight about how to paste code. AND, I remember the glorious feeling of figuring it out for the first time myself 😄

...so I think just a screenshot could work just as well.

problem with this though, is that unless we make it interactive, I think people may just glaze over it, not read it, and not have the point sink in. Actually forcing them to write some basic markdown to pass a challenge would drive the point home I think.

[raisedadead]

I found and amazing interactive tutorial http://commonmark.org/help/ by Jeff Atwood and others. This is the team behind the markdown spec at the parent website http://commonmark.org.

I think we should just link it to this.

[DarrenfJ]

I've done that tutorial as well and I loved it too. I would still have people circle back as @no-stack-dub-sack mentioned and try it out in the gitter room. Posting code with the three ticks as well as this is my project