Learn Responsive Web Design by Building a Piano - Step 6

Someone kindly show me my error.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>

<!-- User Editable Region -->

    <div id="piano">
      <div class="keys">
        <div class="key"></div>
        <div class="black--key"></div>
        <div class="black--key"></div>
        <div class="key"></div>
        <div class="black--key"></div>
        <div class="black--key"></div>
        <div class="black--key"></div>
      </div>
    </div>

<!-- User Editable Region -->

  </body>
</html>
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0

Challenge Information:

Learn Responsive Web Design by Building a Piano - Step 6

Don’t forget to talk to us about what in the instructions or error message is confusing. That helps us help you. Thanks

1 Like

Thank you for your prompt response !

The “hint” for the incorrect response says:
Your second .key element should also have a class of black--key .

I believe I have that written as instructed. I must be missing something.

Sure, but you deleted the ‘key’ class so this isn’t your second key anymore.

To create/delete a class can only be done in CSS I thought? Classes are only written into HTML elements as ‘class attributes’ to associate the element with a CSS class, correct? I’m trying hard to learn.
Are you saying I deleted a key class element? I see 7 div elements with key class attributes. That was to pass step five. I reset step 6 now. and it still looks the same. I reattributed the black–key class to the second, third, fifth, sixth & seventh. But still same message.

You deleted the value ‘key’ for the class of the second key, so it’s no longer a key. You have only 2 elements with a class attribute set to key instead of 7. You should have 7 keys, but 5 of them have an additional value for their class.

3 Likes

It dawned on me with the first sentence in this response. THANK YOU !
I wish I could do this learning full-time; easier to retain the info that way.

3 Likes

Learning is hard work, for sure

2 Likes

SOLUTION IS:

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.