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

HTML-CSS
1

Tell us what’s happening:

please how to i get to solve this problem. i have checked and seem not to know what is wrong here.
step 9 and ten is my problem.

Your code so far

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

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

<body>
    <div id="main">
  <h1> MY TO-DO LIST</h1> 
  
  <ul class="todo-list">
      
       <li> <input id="wake-up" type="checkbox"/>
       <label for="wake-up">wake up, get ready for the day</label>
     </li> 
     

      <ul class="sub-item">
          <li><a class="sub-item-link" href="https://www.google.com" target="_blank">check links</a></li> </ul>

      <li> <input checked id="tech" type="checkbox"/> 
      <label for="tech">code for about 2 hours daily</label></li>
       
      <ul class="sub-item"><li><a class="sub-item-link" href="https:/www.google.com" target="_blank">check links</a> </li>

      </ul><li> <input  id="build" type="checkbox"> <label for="build">Build cutting-edge technologies</label>
      </li> 

      <ul  class="sub-item"><li><a class="sub-item-link" href="https://www.google.com" target="_blank">check links</a></li></ul> 
 
      <li> <input type="checkbox" id="girl" name="list items">  
      <label for="girl">Be that sweet girl.</label>

      <ul class="sub-item">
          <li><a class="sub-item-link" href="https://www.google.com" target="_blank">check links</a></li> 
</ul>

</ul>
</div>
</body>

</html>

/* file: styles.css */
body{margin: 100px;
text-aling: center;
  background-color: pink;
}
.sub-item{
  text-decoration: none;
  text-style: serif sans-serif;
}
.sub-item-link{
  text-decoration: none;
}
.todo-list{background-color: white;
  color: green;

  padding: 100px;
  margin-top: 15px;
  margin-right: 15px;
  text-aling: center;
  
}
ul,li{
  background-color: pink
}
a{text-decoration: none;

}
a:visited{color: black;

}
a:hover{color: purple;

}
a:active{color: red;

}
a:focus{ 
  outline: 3px black;
}

Your browser information:

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

Challenge Information:

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

2

this one doesn’t have a ul immediately after, check it out

3

sorry still not passing the code.

4

What is your updated code? What have you tried to figure out what is wrong?

5

so it keeps saying after the label element there should be an unordered list with class set to sub-item. I have tried figuring this out.

6

What is your updated code? What have you tried to figure out what is wrong?

7

The code is still as it was, have not tried anything yet because I could not pin-point the problem yet.

8

So you did not try anything in response to what was said here:

9

I have tried adding a ul closing tag immediately after the first li. But did not work.

10

What does your updated code look like? Did you only put a ul closing tag and not a ul element like the test asks for?

11

I got this sorted out today and what I did was to delete all the li closing tags after the label attribute.
thank you for your help.

1 Like