Add images to the DOM Inspector and DevTools lesson

Describe the Issue

The DOM Inspector and DevTools lesson is missing the two screenshots from its original transcript: the Elements tab showing the anchor with the incorrect URL, and the Console tab showing the resulting errors.

Lesson file: curriculum/challenges/english/blocks/lecture-working-with-html-tools/672a511bb408ec81c592eb68.md.

The images are being added in https://github.com/freeCodeCamp/cdn/pull/406 and need to be available on the CDN first. This is blocked by https://github.com/freeCodeCamp/cdn/pull/406.

For reference, these were the placements in the original transcript:

1. The Elements tab screenshot appeared immediately after:

   Here is an example of opening the developer tools in Google Chrome:

   https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-to-use-the-dom-inspector-and-devtools-1.png

2. The Console tab screenshot appeared immediately after:

   In this situation, you can check the console to see the error messages for this broken link.

   https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-to-use-the-dom-inspector-and-devtools-2.png

The current lesson rewords both passages and combines them with the following explanations. These original placements are reference points; the contributor can choose suitable placements for the current lesson and write descriptive alt text.

Affected Page

https://www.freecodecamp.org/learn/full-stack-developer/lecture-working-with-html-tools/how-to-use-the-dom-inspector-and-devtools

Expected behavior

The lesson includes the two screenshots alongside the relevant explanations, with descriptive alt text.