Create learner article on Dependabot (#55987)

Co-authored-by: Laura Coursen <lecoursen@github.com>

content/get-started/learning-to-code/finding-and-fixing-your-first-code-vulnerability.md

@@ -79,3 +79,5 @@ To secure our project quickly and easily, let's use {% data variables.copilot.co
 ## Next steps
 
 Now that you've tried out {% data variables.product.prodname_code_scanning %} on a demo repository, **enable it on your own projects** to quickly find and fix current and future vulnerabilities.
+
+Now that you've secured the code you've written yourself, take the next step towards secure code by checking the security of your **dependencies**. See [AUTOTITLE](/get-started/learning-to-code/finding-and-fixing-your-first-dependency-vulnerability).

content/get-started/learning-to-code/finding-and-fixing-your-first-dependency-vulnerability.md

@@ -0,0 +1,97 @@
+---
+title: Finding and fixing your first dependency vulnerability
+shortTitle: Secure your dependencies
+intro: 'Learn how to keep your dependencies secure by enabling {% data variables.product.prodname_dependabot %} and its features in a demo repository.'
+versions:
+  fpt: '*'
+topics:
+  - Code Security
+  - Dependabot
+  - Dependencies
+  - Alerts
+---
+
+Using pre-written collections of code in your project, called **libraries** or **packages**, is common practice. These code modules save you a ton of time, letting you focus on the new, creative aspects of your work instead of coding large reusable components from scratch. When added to your project, they are called **dependencies**, since your work is dependent on the code they contain.
+
+While using dependencies is perfectly normal, dependencies can contain code vulnerabilities, which would in turn make your project insecure. Luckily, tools like {% data variables.product.prodname_dependabot %} can find dependency vulnerabilities, raise pull requests to fix them, and even prevent them from happening in the future. In this tutorial, you'll learn how to enable and use {% data variables.product.prodname_dependabot %} and its features to keep your dependencies secure.
+
+## Setting up the demo repository
+
+Let's get started by forking a demo project with some dependency vulnerabilities. Since we won't deploy the project, there is **no security risk** in this exercise.
+
+1. Navigate to the [`new2code/dependabot-demo`](https://github.com/new2code/dependabot-demo) repository.
+1. In the top right of the page, click {% octicon "repo-forked" aria-hidden="true" %} **Fork**.
+1. On the page that appears, click **Create fork**.
+
+## Enabling dependency security features
+
+Now that we've set up the project, let's configure {% data variables.product.prodname_dependabot %} to find and create fixes for insecure dependencies.
+
+1. In the navigation bar for your repository, click {% octicon "shield" aria-hidden="true" %} **Security**.
+1. In the "{% data variables.product.prodname_dependabot_alerts %}" row, click **Enable {% data variables.product.prodname_dependabot_alerts %}**.
+1. In the "{% data variables.product.prodname_dependabot %}" section, next to "{% data variables.product.prodname_dependabot_alerts %}", click **Enable**.
+1. In the pop up that appears, read the statement about enabling the dependency graph, then click **Enable**.
+1. To allow {% data variables.product.prodname_dependabot %} to automatically open pull requests fixing dependency vulnerabilities, next to "{% data variables.product.prodname_dependabot_security_updates %}", click **Enable**.
+
+## Viewing your insecure dependencies
+
+With {% data variables.product.prodname_dependabot %} configured, let's find out which of our dependencies contain vulnerabilities.
+
+1. In the navigation bar for your repository, click {% octicon "shield" aria-hidden="true" %} **Security**.
+1. To see the {% data variables.product.prodname_dependabot_alerts %} for your repository, in the side navigation, click {% octicon "dependabot" aria-hidden="true" %} **{% data variables.product.prodname_dependabot %}**.
+1. To see detailed information about an alert, click the alert title. For this exercise, click **Command Injection in hot-formula-parser**.
+
+## Understanding a Dependabot alert
+
+Now that {% data variables.product.prodname_dependabot %} has identified some vulnerabilities in our dependencies, let's break down the information provided in the "Command Injection in hot-formula-parser" alert.
+
+### Fix summary
+
+Below the title of the alert, you can see a short summary of the **fix** for this vulnerability, including the number of alerts it will close and the location of the vulnerability. In our case, the alert tells us that upgrading the `hot-formula-parser` package to version 3.0.1 will fix one {% data variables.product.prodname_dependabot %} alert identified in our `javascript/package-lock.json` file.
+
+This section also tracks {% data variables.product.prodname_dependabot %}'s progress creating a pull request to fix the vulnerability. Once a fix is available, you'll see a button labeled "{% octicon "dependabot" aria-hidden="true" %} Review security update" linking to the pull request.
+
+![Screenshot of the fix summary section of a {% data variables.product.prodname_dependabot %} alert.](/assets/images/help/dependabot/dependabot-alert-fix-summary.png)
+
+### Vulnerability details
+
+Below the fix details, {% data variables.product.prodname_dependabot %} provides more information about the vulnerability, including:
+
+* The name of the vulnerable package
+* The versions of the package that contain the vulnerability
+* The version of the package that fixes the vulnerability
+* Details on the type of vulnerability and how it can be exploited
+
+![Screenshot of the vulnerability details section of a {% data variables.product.prodname_dependabot %} alert.](/assets/images/help/dependabot/dependabot-alert-vulnerability-details.png)
+
+In this alert, we can see that the `parse` function in the `hot-formula-parser` package doesn't properly check that user input is safe before executing it, which allows attackers to run malicious commands.
+
+> [!TIP] If you don't fully understand the vulnerability details, try [asking {% data variables.copilot.copilot_chat_short %}](https://github.com/copilot) to explain them.
+
+### Timeline
+
+Finally, you can see the timeline of the alert at the bottom of the page. Our timeline currently contains the timestamp when {% data variables.product.prodname_dependabot %} opened the alert, and will be updated automatically when we fix the vulnerability.
+
+![Screenshot of the timeline for a {% data variables.product.prodname_dependabot %} alert.](/assets/images/help/dependabot/dependabot-alert-timeline.png)
+
+## Securing your dependencies
+
+To secure our project quickly and easily, let's apply the fix {% data variables.product.prodname_dependabot %} created.
+
+1. In the alert field with the fix summary, click {% octicon "dependabot" aria-hidden="true" %} **Review security update**.
+1. On the pull request page, click {% octicon "file-diff" aria-hidden="true" %} **Files changed** to see {% data variables.product.prodname_dependabot %}'s changes. After you review the changes, click {% octicon "comment-discussion" aria-hidden="true" %} **Conversation** to return to the pull request overview.
+1. To apply the fix, at the bottom of the page, click **Merge pull request**, then click **Confirm merge**.
+
+    Once the pull request merges, the linked {% data variables.product.prodname_dependabot %} alert will close automatically, and the fix time will be added to the timeline.
+
+## Preventing future dependency vulnerabilities
+
+To help avoid insecure dependencies moving forward, let's allow {% data variables.product.prodname_dependabot %} to automatically open pull requests updating your dependencies as new versions are released.
+
+1. In the navigation bar for your repository, click {% octicon "gear" aria-hidden="true" %} **Settings**.
+1. In the "Security" section of the sidebar, click {% octicon "codescan" aria-hidden="true" %} **{% data variables.product.prodname_AS %}**.
+1. Next to "{% data variables.product.prodname_dependabot_version_updates %}", click **Enable**.
+
+## Next steps
+
+Now that you've tried out {% data variables.product.prodname_dependabot %} and its features on a demo repository, **enable them on your own projects** to easily find, fix, and prevent dependency vulnerabilities.

content/get-started/learning-to-code/index.md

@@ -12,5 +12,6 @@ children:
   - /learning-to-debug-with-github-copilot
   - /storing-your-secrets-safely
   - /finding-and-fixing-your-first-code-vulnerability
+  - /finding-and-fixing-your-first-dependency-vulnerability
 shortTitle: Learn to code
 ---