Learn Responsive Web Design by Building a Piano - Step 21

HTML-CSS
1

Tell us what’s happening:

Unsure of what’s happening here. The img tag is before .keys and it has the right class, logo, and alt attributes, but the application says the src tag is missing.

If I have just the src attribute, the error message says to add in the class attribute, but as soon as I do, it says the src attribute is missing.

Went ahead to the next lesson and found the img tag, copied it, and pasted it into this lesson. Same results.

I don’t think my image filter would cause this, but in case the application looks for the image to load instead of the text in the box, that may be the reason why.

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" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>

<!-- User Editable Region -->

    
    <div id="piano">
    <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />  
      <div class="keys">

<!-- User Editable Region -->

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>

/* file: styles.css */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

#piano {
  background-color: #00471b;
  width: 992px;
  height: 290px;
  margin: 80px auto;
  padding: 90px 20px 0 20px;
}

.keys {
  background-color: #040404;
  width: 949px;
  height: 180px;
  padding-left: 2px;
}

.key {
  background-color: #ffffff;
  position: relative;
  width: 41px;
  height: 175px;
  margin: 2px;
  float: left;
}

.key.black--key::after {
  background-color: #1d1e22;
  content: "";
  position: absolute;
  left: -18px;
  width: 32px;
  height: 100px;
}

Your browser information:

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

Challenge Information:

Learn Responsive Web Design by Building a Piano - Step 21

2

I wrote my code, and it wen’t through- which looked exact as yours. However, I decided to copy and paste your code (in case i was missing a detail), and it still went through.

Your code is good, so I’m not entirely sure what might be causing the problem

1 Like
3

Confirmed that it was Plucky/Pluckeye’s blocking of image load that prevented the lesson from passing. Issue resolved.

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.