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

HTML-CSS
1

Tell us what’s happening:

I’m experiencing issues with steps #2, 10 and 15
As far as I can see, i’ve got only 4 list elements in my unorganised list
all sub-item classes have sub-item-links and css code for unvisited links, where have i gone wrong in my code?

Your code so far

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

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

<body>
    <h1>To-Do List</h1>

    <ul class="todo-list">
        
    <li>
        <input type="checkbox" id="dishes">
        <label for="dishes">Dishes</label>
        <ul class="sub-item">
                <a class="sub-item-link" href="https://www.google.com" target="_blank">
            Dishes</a>
                        </li>

    <li>
        <input type="checkbox" id="washing">
        <label for="washing">Washing</label>
        <ul class="sub-item">
                <a class="sub-item-link" href="https:/www.twitter.com" target="_blank">
                Washing</a>
                </li>

        <li>
            <input type="checkbox" id="hoovering">
            <label for="hoovering">Hoovering</label>
            <ul class="sub-item">
                    <a class="sub-item-link" href="https://www.youtube.com" target="_blank">
                    Hoovering</a>
                    </li>

        <li>
            <input type="checkbox" id="tidying">
            <label for="tidying">Tidying</label>
            <ul class="sub-item">
                <a class="sub-item-link" href="https://www.facebook.com" target="_blank">Tidying</a>
                </li>
                
                </ul>

</body>

</html>

/* file: styles.css */
ul {list-style: none;    
  padding: 0;
  margin: 0;}

a{
  text-decoration: none;
  }

.sub-item{
  border: 1px solid #333;
  }

.sub-item-link:unvisited {
  color: orange;
  }

.sub-item-link:visited{
  color: blue;
  }

.sub-item-link:hover{
  color:green;
  }

.sub-item-link:active{
  color:brown;
  }
  
.sub-item-link:focus{
  outline:2px solid black;
  }

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

Please review User Story #3. What element is used inside an unordered list? Is your unordered list element complete?

1 Like
3

Thank you, simple oversight on my part, thanks! Could you point me in the right direction with the issue with my css too please? i can see that it’s not been highlighted the same way as others

4

Sorry, i figured out the css, thank you again!