Build a Book Inventory App - Build a Book Inventory App

bwicks7214 · February 27, 2026, 1:33pm

Tell us what’s happening:

Hello, I am having trouble completing a few tasks in this lesson. I have been up and down the chat trying different things to help me solve the final 2 lessons of this certification.

I am currently not able to pass steps 19, 52 and 53

Thank you!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Book Inventory</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Book Inventory</h1>
  <table class="table">
    <thead>
      <tr>
        <th class="title">Title</th>
        <th class="author">Author</th>
        <th class="category">Category</th>
        <th class="status">Status</th>
        <th class="rate">Rate</th>
        </tr>
        </thead>
        <tbody>
          <tr class="read">
            <td>Eat a Peach: A Memoir</td>
            <td>David Chang</td>
            <td>Autobiographical</td>
            <td><span class="status">Read</span></td>
            <td><span class="rate three">
              <span></span>
              <span></span>
              <span></span>
              </span>
              </td>
            <tr class="in-progress">
              <td>You are a Badass</td>
              <td>Jen Sincero</td>
              <td>Self-Help</td>
              <td><span class="status">In Progress</span></td>
              <td><span class="rate">
                <span></span>
                <span></span>
                <span></span>
                </span>
                </td>
              </tr>
          <tr class="in-progress">
            <td>Red Rising</td>
            <td>Pierce Brown</td>
            <td>Dystopian Science Fiction</td>
            <td><span class="status">In Progress</span></td>
            <td><span class="rate">
              <span></span>
              <span></span>
              <span></span>
              </span>
              </td>
          </tr>
          <tr class="to-read">
            <td>Project Hailmary</td>
            <td>Andy Weir</td>
            <td>Science Fiction</td>
            <td><span class="status">To Read</span></td>
            <td><span class="rate">
              <span></span>
              <span></span>
              <span></span>
              </span>
              </td>
          </tr>
          <tr class="to-read">
            <td>Women</td>
            <td>Charles Bukowski</td>
            <td>Autobiographical Novel</td>
            <td>
              <span class="status">To Read</span>
              </td>
            <td>
              <span class="rate">
              <span></span>
              <span></span>
              <span></span>
              </span>
              </td>
            </tr>
            </tbody>
        </table>

</body>

</html>

/* file: styles.css */
.table {
      width: 100%;
      border: none;
      border-collapse: collapse;
    }
    .title {
      width: 35%;
    }
    .author, .category, .status, .rate1 {
      width: 16.25%;
    }
    thead {
      background-image: linear-gradient(to top, rgb(115,211,249), rgb(182,232,252));
    }
    tr {
      height: 40px;
    } 
    tr[class="read"] {
      background-image: linear-gradient(to top, rgb(151,255,151), rgb(205,255,205));
    }
    tr[class="to-read"] {
      background-image: linear-gradient(to top, rgb(212,227,212), rgb(241,246,241));
    }
    tr[class="in-progress"] {
      background-image: linear-gradient(to top, rgb(255,221,153), rgb(255,238,203));
    }
    span {
    display: inline-block;
    }
    tr[class="to-read"] span[class="status"] {
    border: 1px solid rgb(230,19,0);
    background-image: linear-gradient(to top, rgb(255,23,2), rgb(255,126,114));
    margin: 5px;
    border-radius: 10px;
    text-align: center;    
    }
    tr[class="read"] span[class="status"] {
    border: 1px solid rgb(29,201,29);
    background-image: linear-gradient(to top, rgb(37,224,37), rgb(138,232,138));
    margin: 5px;
    border-radius: 10px;
    text-align: center;
    }
    tr[class="in-progress"] span[class="status"] {
    border: 1px solid rgb(194,133,10);
    background-image: linear-gradient(to top, rgb(242,166,14), rgb(248,207,124));
    margin: 5px;
    border-radius: 10px;
    text-align: center;    
    }
    span[class="status"], span[class^="rate"] {
    height: 80%;
    width: 80%;
    padding: 5px;
    }
    span[class^="rate"] > span {
    border: 1px solid gray;
    border-radius: 10px;
    margin: 2px;
    height: 10px;
    width: 20%;
    background-color: whitesmoke;
    }

span[class~="one"] :first-child {
    background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
    } 
    
span[class~="two"] :nth-child(-n+2){
      background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
    } 

span[class*="three"] span:nth-child(-n+3){  
      background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));  
    }

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

pkdvalis · February 27, 2026, 1:45pm

What have you tried for Test 19?

Here are some debugging steps you can follow. Focus on one test at a time:

Are there any errors or messages in the console?
What is the requirement of the failing test?
Check the related User Story and ensure it’s followed precisely.
What line of code implements this?
What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

bwicks7214 · February 27, 2026, 1:49pm

These are the error messages I am currently receiving

19. Each .rate element should contain three empty span elements.
52. You should have an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value.
53. You should use an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value and set their background-image property to use a linear-gradient.


I have tried rewriting all my <span> elements, and I have checked and rechecked to make sure I have 3 empty <span> elements. I'm not quite sure what is wrong, but I'm sure its something I'm just overlooking.

pkdvalis · February 27, 2026, 1:53pm

It looks fine to me as well. I’m stumped on that one.

Let’s move on to the next failing test.

You should have an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value.

Check the related User Story and ensure it’s followed precisely.
What line of code implements this?

bwicks7214 · February 27, 2026, 1:56pm

span[class*=“three”] :nth-child(-n+3){

  background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));  

}

this is my current CSS. I approached this step the same as the previous steps where I have an attribute selector targeting the span elements that are descendants of span elements that have the word “one” and “two”. I thought that because in this step all I need to do is change the word to “three” that the code would be correct.

bwicks7214 · February 27, 2026, 1:57pm

i apologize, here is my current css

span[class~=“three”] :nth-child(-n+3){

  background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));  

}

pkdvalis · February 27, 2026, 1:58pm

Look at the wording of the tests compared to ‘one’ and ‘two’ it’s a bit different

You should use an attribute selector to target the first two descendants of span elements that have the word two as a part of their class value

You should use an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value a

pkdvalis · February 27, 2026, 2:03pm

Check that all of your tr are closed (one is missing)

bwicks7214 · February 27, 2026, 2:07pm

thank you, I just closed the that was open. Working on the CSS for the different language between the last 3 steps now

pkdvalis · February 27, 2026, 2:09pm

It’s pretty close. Should be targeting any/all span element descendants of the “three” span (not just 3)

There’s a typo here but it does not affect the tests of course

Project Hailmary

pkdvalis · February 27, 2026, 2:16pm

bwicks7214:

<tr>
        <th class="title">Title</th>
        <th class="author">Author</th>
        <th class="category">Category</th>
        <th class="status">Status</th>
        <th class="rate">Rate</th>
        </tr>

You have a .rate element here which does not contain 3 empty spans

bwicks7214 · February 27, 2026, 2:18pm

in a class that wasn’t even needed. thank you for that!

bwicks7214 · February 27, 2026, 2:22pm

I was able to solve the final two lessons to complete the certification. Thank you for your help walking me through this.

pkdvalis · February 27, 2026, 2:23pm

This one is tricky, glad I was able to help!

Topic		Replies	Views
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	5	176	December 16, 2025
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	15	76	February 26, 2026
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	5	2811	July 29, 2025
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	17	832	October 11, 2025
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	3	174	November 22, 2025

Build a Book Inventory App - Build a Book Inventory App

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics