Check out a free preview of the full Introduction to Dev Tools, v3 course
The "Quick Edits Exercise" Lesson is part of the full, Introduction to Dev Tools, v3 course featured in this preview video. Here's what you'd learn in this lesson:
Jon instructs students to change an ordered list to an unordered list, find the JavaScript that calls the alert, decide what color the revealed blockquote will be, and find the border color of a card with a specific id.
Transcript from the "Quick Edits Exercise" Lesson
[00:00:00]
>> This is the first exercise. And this is all about the quick edits that we just learned. So it's to take this actual page here. And can you change this from an ordered list to an unordered list? Clicking on this link makes a pop up appear. But can you find the JavaScript that calls this event, and then the third, one's like a little bit of a quiz, but there's a way to cheat.
[00:00:21]
And like I said, dev tools helps you level up. So I have a button and when you click the button, this block quote gets rendered, right? And it gets rendered with this class, this ID and this inline style and I also have CSS on the page, which has an element selector, a class selector and an ID selector with important.
[00:00:40]
And so the question on CSS specificity is can you guess what color it will be? But the dev tools cheat is let's say you forgotten all the specificity stuff already. Can you use dev tools that actually view what color it'll be before it gets rendered to the DOM?
[00:00:54]
And then the last one is there's a whole big list full of cards here. And when we wanna do is we wanna find the border color of the one with an ID of 12345678. And so can you use the dev tools to put in that ID and actually get to that card and view the border color.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops