Docs: Add steps to create issue and make screenshot of profile on the README

[Ayu Adiati]

Background

• We want contributors to learn how to create an issue as part of contributing flow.
• To prevent mistakes of not running the command to generate the profile, we want to ensure contributors providing a screenshot of their profile on the README after being generated to be included in their PRs.

Suggested solution

In the Getting Started section:

• Add step 1 to create an issue.

1. Create an issue by clicking the "New issue" button in the "Issues" tab and complete the form.

• Add a step to make a screenshot right after the step to "Run npm run contributors:generate in your terminal to generate the guest book on the README.".

X. Copy and paste the Markdown of the README in Markdown Live Preview and take a screenshot of your profile being generated. You will need this later when creating a pull request. Tips: If you don't see your profile in the "Contributors" section, zoom out the screen until you can see it before taking a screenshot.

• Fix the numbering of the steps accordingly.
• Check the code and the live preview format of the section. You can use Markdown Live Preview to live preview the Markdown.

Below is the code block of the "Getting Started" section:

intro/05-how-to-contribute-to-open-source.md

Lines 140 to 239 in a5a10bf

 ### Getting Started 
  
 1. Fork the [guest book repository](https://github.com/open-sauced/guestbook). 
 2. Clone your forked repository to your computer. 
 3. Run `npm install` to install the dependencies. 
 4. Create a new branch and use a descriptive name related to your contribution — for example, `feat/add-alice`. 
 5. Add yourself to the guest book. 
  
    There are two ways you can complete this activity: 
  
    - Using the CLI tool. 
    - Manually editing the `.all-contributorsrc` file. 
  
    Although adding yourself to the guest book with the CLI tool is simpler, we recommend manually editing the file to get more experience adding and committing your changes, creating pull requests, and pull request reviews. Below, you'll find the directions for each method: 
  
    **CLI Tool** 
  
    - Run `npm run contributors:add` in your terminal. 
  
      Follow the instructions to add yourself to the guest book. After you finish and click enter, you must click enter again to confirm your choices. 
  
    **Manual Addition** 
  
    - Open the `.all-contributorsrc` file. 
    - Go to the last contributor in the contributors' array. 
    - Add a comma after the last closing curly bracket ( `},` ). 
    - Copy and paste the template below: 
  
      ```javascript 
      { 
         "login": "", 
         "name": "", 
         "avatar_url": "", 
         "profile": "", 
         "contributions": [] 
      } 
      ``` 
  
    - Add yourself manually to the guest book by updating this information: 
  
      - **login**: Your GitHub's username. 
      - **name**: Your name. 
      - **avatar_url**: URL to your avatar on GitHub. 
  
        In your browser, copy and paste the link of your GitHub profile, append `.png` at the end (for example, `https://github.com/USER_NAME.png`), and click enter. Copy and paste the link here. 
  
      - **profile**: Link to your website (if you include it in your GitHub profile) **or** your GitHub profile. 
      - **contribution**: Type of your contributions. 
  
        Refer to the types (in the first column) in this [emoji key and contribution types](https://allcontributors.org/docs/en/emoji-key) to fill in the values. 
  
        > ⚠️ **You have to strictly use the types in the list to avoid breaking the whole project.** 
  
        The result would be like this: 
  
        ```javascript 
        { 
          "login": "github-username", 
          "name": "User Name", 
          "avatar_url": "https://avatars.githubusercontent.com/u/xxxxxxxx?v=x", 
          "profile": "URL link", 
          "contributions": [ 
             "question", 
             "blog", 
             "code" 
          ] 
        } 
        ``` 
  
        > ⚠️ **Remember to add a comma after the quotes, except for the last one in the array and the last closing curly bracket.** 
  
 6. Run `npm run contributors:generate` in your terminal to generate the guest book on the README. 
  
 7. If you used the CLI tool method in step 5 to add yourself to the guest book, **skip this step**. Otherwise: 
  
    Add and commit your changes by running the following command: 
  
    ```bash 
    git commit -am "Your commit message" 
    ``` 
  
    Replace `"Your commit message"` to your own message. For example, `"Add Alice as a contributor"`. 
  
    > **Note**: Unlike the `git add .` and `git commit -m "Your message"` approach, in the `git commit -am` command, adding `-a` flag to `git commit` skips the staging process. The `-a` flag automatically stages all your changes in _committed_ files. Combining it with the `-m` flag allows you to write the commit message. 
  
 8. Run `git log` to check if you have committed your changes. Press `Q` to close the log. 
  
    If you add yourself using the CLI tool, it automatically adds and commits your changes. So you will see this automated commit message: 
  
    ```bash 
    docs: add @your_username as a contributor 
    ``` 
  
 9. Push the commit to your forked repository with this command: 
  
    ```bash 
    git push -u origin branch-name 
    ``` 
  
 10. Go to your forked repository on GitHub and create a pull request with the title `feat: Add <@github-username> as a contributor`. 

[Atharva]

I think I got the idea, can I take this Issue 😄

[Christine Belzie]

I think I got the idea, can I take this Issue 😄

Go ahead @at-the-vr! :)