Build a Stylized To-Do List - Build a Stylized To-Do list

HTML-CSS
1

Tell us what’s happening:

I am stuck on steps 2, 9 & 10. Can anyone tell me what I’m doing wrong?

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link href="styles.css" rel="stylesheet">
</head>

<body>
  <div class="list-box">
      <h1>My To-do List</h1>
      <ul class="todo-list">
        <div class="boxone">
          <li class="rock">
            <input type="checkbox" id= "keyboards">
         <label for="keyboards">Explore gaming keyboards</label>
         </li>
         <ul class="sub-item">
             <li><a href="https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-stylized-to-do-list/build-a-stylized-to-do-list# " class="sub-item-link" target="_blank">Store link</a></li>
      </ul>
      </div>
      <br>
      <div class="boxone">
      <li class="rock">
      <input type="checkbox" id= "report">
         <label for="report">Finish the report</label>
         </li>
         <ul class="sub-item">
             <li><a href="https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-stylized-to-do-list/build-a-stylized-to-do-list# " class="sub-item-link" target="_blank">Request Access</a></li>
      </ul>
      </div>
      <br>
      <div class="boxone">
      <li class="rock"><input type="checkbox" id= "warranty">
         <label for="warranty">View phone's warranty</label></li>
         <ul class="sub-item">
             <li><a href="https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-stylized-to-do-list/build-a-stylized-to-do-list# " class="sub-item-link" target="_blank">View receipts</a></li>
      </ul>
      </div>
      <br>
      <div class="boxone">
      <li class="rock"><input type="checkbox" id= "specs">
         <label for="specs">Check processor specs</label></li>
         <ul class="sub-item">
             <li><a href="https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-stylized-to-do-list/build-a-stylized-to-do-list# " class="sub-item-link" target="_blank">View model number</a></li>
      </ul>
      </div>
      </br>
    </ul>
  </div>
  
</body>

</html>

/* file: styles.css */
body {
  background-color: pink;
  font-family: lucida handwriting, Arial, sans-serif;
}

a {
  text-decoration: none;
  padding-right:35px;
}

a:link {
  color: brown;
}

a:visited {
  color: purple
}

a:hover {
  color: indigo
}

a:focus {
  outline: 2px solid orange
}

a:active {
  color: grey;
}

.list-box {
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 500px;
  max-height: 700px;
  margin-top: 20px;
  border-radius: 15px;
  box-shadow: 5px 5px 0px rgba(110,59,90);
  padding-bottom: 10px;
  padding-top:10px;
  
}

.sub-item {       list-style-position: inside;
}

h1 {
  padding-top: 20px;
  text-decoration: underline;
}

.boxone {
  background-color:  #f5e6f5;
  max-width: 332px;
  min-height: 65px;
  padding-top: 20px;
  line-height: 30px;
  padding-bottom: 13px;
  padding-right: 15px;
  border-radius: 15px;
  border: 0.1px solid brown;
  margin-left: 40px;
}

.rock {
  list-style-type: none;
}

Your browser information:

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

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list

2

what is step 2? what part of your code is satisfying that?

you could also benefit from using an HTML validator Ready to check - Nu Html Checker

3

2. You should have four list items inside the unordered list.

9. After the label elements, there should be an unordered list with the class sub-item.

10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.

4

Thanks for the reference. I checked it and it said that “br and div should not be allowed as child of element ul (suppressing further errors of this subtree)”. I don’t know what that means.

5

do you know when an element is a child of an other? you have div and br as children of an ul element and that is not allowed by HTML rules

6

so how do i rewrite the code? What should do the code be like? I tried replicating how they designed the page, but maybe it doesn’t work that way? This is how they designed the page:

Screenshot 2026-02-03 075217
Screenshot 2026-02-03 075217815×582 19.2 KB

7

You should not base the HTML structure on what you see, as what you see is created by styling the elements, the elements used are as described in the user stories