Exercise 1 - Quick Edits

Let's take 15 minutes, fire up the DevTools (refer back to the Introduction if you forgot how!) and complete the following tasks.

1. Change this list from an ordered list ol to an unordered list ul.
2. Clicking on this link makes a popup appear. Can you find the JavaScript code that calls the alert?

There is a button below. When clicked, it will reveal a blockquote. The blockquote has the following HTML:

<blockquote class="quote" id="quote" style="background-color: blue;">
  Did you get it right?
</blockquote>

And the following CSS:

blockquote {
  background-color: red;
}

.quote {
  background-color: orange;
}

#quote {
  background-color: yellow !important;
}

1. Can you guess what background color it will have?
2. Can you "cheat" using the DevTools to be 100% sure before you click?

Did you get it right?

There are a bunch of cards! Can you figure out the border color of the one with id 12345678? Can you do it in a way that would work if there were 1000 cards on the page?

Back to the lesson

Finished? Let's head back to the Lesson