docs: update coding challenges guide and links (#38597)

docs/how-to-work-on-coding-challenges.md

@@ -12,26 +12,23 @@ With your help we can design an interactive coding curriculum that will help mil
 
 The content for each challenge is stored in its own markdown file. This markdown file is later converted to HTML using our tools to create interactive web pages.
 
-You can find all of freeCodeCamp.org's curricular content in the [`/curriculum`](/curriculum) directory.
+You can find all of freeCodeCamp.org's curricular content in the [`/curriculum/challenges`](https://github.com/freeCodeCamp/freeCodeCamp/tree/master/curriculum/challenges) directory.
 
-There are two ways you can work on these challenges:
+## Set up the tooling for the curriculum
 
-- **We recommend, you clone the project and edit locally on your computer.** For help with that, read our [contributing guidelines here](/CONTRIBUTING.md).
+Before you work on the curriculum, you would need to set up some tooling to help you test your changes. You can use any option from the below:
-- Or optionally, you can modify a challenge within the GitHub interface, by clicking the pencil icon to start editing the file.
+
+- You can [set up freeCodeCamp locally](how-to-setup-freecodecamp-locally.md). This is **highly recommended** for regular/repeat contributions. This setup allows you to work and test your changes.
+- Use Gitpod, a free online dev environment. Clicking the button below will start a ready-to-code dev environment for freeCodeCamp in your browser. It only takes a few minutes.
+
+  [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/freeCodeCamp/freeCodeCamp)
+
+- Edit the files on GitHub's interface by clicking the pencil icon for the corresponding file. While this is the quickest way, It is **not recommended**, because you are unable to test your changes on GitHub. If our maintainers conclude that the changes you made need to be tested locally, you would need to follow the methods above instead again.
 
 ## Challenge Template
 
 Below is a template of what the challenge markdown files look like.
 
-**Notes:**
-
-1. In the below sections, examples of `{ext}` are:
-    - `html` - HTML/CSS
-    - `js` - JavaScript
-    - `jsx` - JSX
-
-2. For the `Tests` section below, `text` and `testString` should be valid YAML strings. `testString` can be a stringified function  or expression using which could use Chai asserts.
-
 ````md
 ---
 id: Unique identifier (alphanumerical, MongoDB_id)
@@ -41,16 +38,19 @@ videoUrl: 'url of video explanation'
 ---
 
 ## Description
+
 <section id='description'>
 A Description of the challenge and what is required to pass
 </section>
 
 ## Instructions
+
 <section id='instructions'>
 Instructions about what exactly needs to be done.
 </section>
 
 ## Tests
+
 <section id='tests'>
 
 ```yml
@@ -62,6 +62,7 @@ tests:
 </section>
 
 ## Challenge Seed
+
 <section id='challengeSeed'>
 
 <div id='{ext}-seed'>
@@ -75,6 +76,7 @@ This is a required section for the challenge.
 </div>
 
 ### Before Test
+
 <div id='{ext}-setup'>
 
 ```{ext}
@@ -84,6 +86,7 @@ Optional Test setup code.
 </div>
 
 ### After Test
+
 <div id='{ext}-teardown'>
 
 ```{ext}
@@ -95,6 +98,7 @@ Optional Test tear down code.
 </section>
 
 ## Solution
+
 <section id='solution'>
 
 ```{ext}
@@ -104,6 +108,16 @@ Optional Test tear down code.
 </section>
 ````
 
+> ?[!NOTE]
+>
+> 1. In the above sections, examples of `{ext}` are:
+>
+>   - `html` - HTML/CSS
+>   - `js` - JavaScript
+>   - `jsx` - JSX
+>
+> 2. For the `Tests` section above, `text` and `testString` should be valid YAML strings. `testString` can be a stringified function or expression using which could use Chai asserts.
+
 ## Numbering Challenges
 
 Every challenge needs an `id`. If you don't specify one, then MongoDB will create a new random one when it saves the data; however, we don't want it to do that, since we want the challenge ids to be consistent across different environments (staging, production, lots of different developers, etc.).
@@ -149,8 +163,7 @@ Here are some example challenge names:
 - Condense arrays with .reduce
 - Use Bracket Notation to Find the First Character in a String
 
-
+## Challenge descriptions/instructions
-## Writing challenge descriptions/instructions
 
 Sentences should be clear and concise with minimal jargon. If used, jargon should be immediately defined in plain English.
 
@@ -237,7 +250,7 @@ Here are specific formatting guidelines for the challenge seed code:
 
   `// Fix this line`
 
-## Curriculum Challenge Hints and Solutions
+## Hints and Solutions
 
 Each challenge has a `Get a Hint` button, so a user can access any hints/solutions which have been created for the challenge. Curriculum hints/solutions topics are located on [our forum](https://www.freecodecamp.org/forum/c/guide) under the `Guide` category.
 
@@ -247,8 +260,8 @@ If you find a problem with an existing challenge's hints/solutions topic, you ca
 
 Take the following steps when adding a new challenge hints/solutions related topic.
 
-1. Start by following the same steps for [creating a new topic](creating-a-new-guide-topic) but review the next for creating the title.
+1. Start by following the same steps for creating a new topic but review the next for creating the title.
-2. The title of the topic should start with "freeCodeCamp Challenge Guide: " concatenated with the actual title of the curriculum challenge. For example, if the challenge is named "Chunky Monkey", the topic title would be "freeCodeCamp Challenge Guide: Chunky Monkey".
+2. The title of the topic should start with `freeCodeCamp Challenge Guide: ` concatenated with the actual title of the curriculum challenge. For example, if the challenge is named "`Chunky Monkey`", the topic title would be "`freeCodeCamp Challenge Guide: Chunky Monkey`".
 3. `camperbot` should be the owner of these topics/posts, so you will need to request an admin to change the ownership of the main post to `camperbot`.
 4. Once the new topic is created, a forum topic id is created. It is located at the end of the forum topic URL. This id must be added to the frontmatter of the curriculum challenge file via the normal pull request process for the `Get a Hint` button to link to the topic.
 
@@ -260,24 +273,30 @@ When proposing a solution for a curriculum challenge related Guide topic, the fu
 # Challenge Name Goes Here
 
 ---
+
 ## Problem Explanation
 
 This summarizes what need to be done without just restating the challenge description and/or instructions. This is an optional section
 
 #### Relevant Links
+
 - [Link Text](link_url_goes_here)
 - [Link Text](link_url_goes_here)
 
 ---
+
 ## Hints
 
 ### Hint 1
+
 Hint goes here
 
 ### Hint 2
+
 Hint goes here
 
 ---
+
 ## Solutions
 
 <details><summary>Solution 1 (Click to Show/Hide)</summary>