Inspecting HTML and CSS lesson: upload image

[henrylin03]

Because

The current example image for showing styles applied and overwritten styles is outdated and don't correspond to the current TOP code in the inspector...

This PR

Uploads the updated image to the repository. Per guidance (https://github.com/TheOdinProject/curriculum/wiki/Adding-Images-to-the-Curriculum), this is the first of two PRs required to make this update, as we are uploading image. IIUC, this PR needs to be merged first before I can create static link.

Issue

Relates to #29968

Additional Information

Pull Request Requirements

• I have thoroughly read and understand The Odin Project curriculum contributing guide
• The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
• The Because section summarizes the reason for this PR
• The This PR section has a bullet point list describing the changes in this PR
• If this PR addresses an open issue, it is linked in the Issue section
• If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
• If any lesson files are included in this PR, they follow the Layout Style Guide

[mao-sz]

A couple of things:

1. We need both images replaced (showing the Elements view, and showing the Styles stuff), not just the styles stuff.

2. We need them to replace the current images, so the first image should be named 01.png to replace the existing one, the second image named 02.png, and the existing 03.png gets deleted. This won't affect the current lesson contents because those get images from a CDN, not the repo.

3. The new image doesn't show what I see in the styles pane when inspecting the <h1> itself (in Chrome). This is what I see:

   

[henrylin03]

Thanks @mao-sz - will address this today, but just wanted to let you know what's happening

1. We need both images replaced (showing the Elements view, and showing the Styles stuff), not just the styles stuff.

No worries, I'll use the image you shared in your point 3.

2. We need them to replace the current images, so the first image should be named 01.png to replace the existing one, the second image named 02.png, and the existing 03.png gets deleted. This won't affect the current lesson contents because those get images from a CDN, not the repo.

Can do. Just checking though, step 4 of this is saying we should start from 00.png not 01.png - should I do that instead?

3. The new image doesn't show what I see in the styles pane when inspecting the <h1> itself (in Chrome). This is what I see:
   

Not sure why the discrepancy, but I'll use your image and annotate it

I'll ask for reapproval when ready, but lmk if I've misunderstood. After this, I'll put in that 2nd PR to create static links per docs.

Thanks!

[mao-sz]

Thanks @henrylin03, though both images are quite blurry to me, especially the one showing the styles pane. While it's still clear what's being pointed to, I'd prefer if the image was a little sharper at least.

Edit: ah, probably if you're cropping my image then GitHub's compressed it loads?
With your original image, what OS and browser (+ version) were you using? And what element had you inspected to see those styles? Because when you inspect the h1 itself, you don't get the styles shown in your original image, nor do I get them from either of the inner spans.

[mao-sz]

We don't need the comments here.