Inspecting HTML and CSS lesson: replace browser inspector images with statically CDN links and update copy to align #30243
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
copy now aligns better with the updated images and likely improves clarity for readers
github-actions
bot
added
the
Content: Foundations
mao-sz
requested changes
Oct 12, 2025
|  | ||
|
|
||
| <span id="strikethrough">When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text).</span> For example, if you use the inspector to click on the "Your Career in Web Development Starts Here" header on the [TOP homepage](https://www.theodinproject.com/home), on the right-hand side you'll see all the styles that are currently affecting the element, as seen below: | ||
| <span id="strikethrough">When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text).</span> For example, if you use the inspector to click on the "Your" in the "Your Career in Web Development Starts Here" header on the [TOP homepage](https://www.theodinproject.com/home), on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below (don't worry about the var() syntax as that's irrelevant to this point): |
There was a problem hiding this comment.
Suggested change
| <span id="strikethrough">When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text).</span> For example, if you use the inspector to click on the "Your" in the "Your Career in Web Development Starts Here" header on the [TOP homepage](https://www.theodinproject.com/home), on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below (don't worry about the var() syntax as that's irrelevant to this point): | |
| <span id="strikethrough">When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text).</span> For example, if you use the inspector to click on the "Your" in the "Your Career in Web Development Starts Here" header on the [TOP homepage](https://www.theodinproject.com/home), on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below (don't worry about the `var()` syntax as that's irrelevant to this point): |
There was a problem hiding this comment.
updated in 2ed9de0
| In the Elements panel, you can see the entire HTML structure of your page. You can click on any of the elements in this panel to select that specific element. Alternatively, you can click on the upper-left "element select" icon (shown in the image below), then hover over any element on the page. | ||
|
|
||
|  | ||
|  |
There was a problem hiding this comment.
Which commit link did you use to generate these statically links? They don't seem to be the ones generated by the merge commit link as per the contributing guide.
I don't actually know if there will be potential problems in the future using the links you've used here, such as if you delete your fork or some other changes that may or may not affect the CDN, but best is to use what the instructions direct to.
…s-html-and-css-inspector-lesson
use correct commit (SHA e7ab90e) for usage in statically converter to get URL for the CDN images
assure reader that seeing var() syntax is something they can just ignore for now. I think these are referring to CSS variables which haven't been covered yet?
|
The other image link needs amending too but ince that's done, we should be good to merge. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
Issue
Closes #29968
Relates to PR #30119
Pull Request Requirements
location of change: brief description of changeformat, e.g.Intro to HTML and CSS lesson: Fix link textBecausesection summarizes the reason for this PRThis PRsection has a bullet point list describing the changes in this PRIssuesection