Lesson (Build a Stylized To-Do list) Broken?

HTML-CSS
1

Hey all, I think lesson (Build a Stylized To-Do list) may be broken. It will not apply CSS, even when I used AI to create code to make sure I was correct, it still wil not accept it. I cannot get it to approve Point 14-18 for the CSS portion of lessons. 1-13 get the correct checkmark.

<!DOCTYPE html>
<html lang="en">

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

<body>
    <ul class="todo-list">
        <!--First item in list -->
        <li>
            <input type="checkbox" id="todo1">
            <label for="todo1">Buy Gaming Computer</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="google.com" target="_blank">Link to item</a>
                </li>
            </ul>
        </li>
        <!-- Second item in list-->
        <li>
            <input type="checkbox" id="todo2">
            <label for="todo2">Buy gaming chair</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="google.com" target="_blank">Link to item</a>
                </li>
            </ul>
        </li>
        <!-- Third item in list -->
        <li>
            <input type="checkbox" id="todo3">
            <label for="todo3">Buy Gaming Mouse</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="google.com" target="_blank">Link to item</a>
                </li>
            </ul>
        </li>
        <!-- Fourth item in list -->
        <li>
            <input type="checkbox" id="todo4">
            <label for="todo4">Buy Gaming Headset</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="google.com" target="_blank">Link to item</a>
                </li>
            </ul>
        </li>

    </ul>
    <!-- item outside of lsit -->
</body>

</html>

CSS:

/* General link styles (no underline, base color) */
a {
    text-decoration: none;
    color: #2196F3; /* Example: a nice blue */
}

/* Visited link color */
a:visited {
    color: #9C27B0; /* Example: Purple */
}

/* Hovered link color */
a:hover {
    color: #FF9800; /* Example: Orange */
}

/* Focused link style (outline) */
a:focus {
    outline: 2px solid #4CAF50; /* Example: Green outline */
    outline-offset: 2px;
}

/* Active (clicked) link color */
a:active {
    color: #F44336; /* Example: Red */
}

.sub-item-link {
  text-decoration: none;
}

and then I tried just something simple to get 14 to get the checkmark but still did not work

.sub-item-link {
  text-decoration: none;
} 

a{
  text-decoration: none;
}
2

Hi, great Job so far!

Can you please be clear about what your issue is? That way, I’ll be glad to help. Thank you.

3

When I get to test grading 14-16, the CSS will not apply to the HTML file.

From what I can tell, the CSS should be working and applying, but in the console window it shows no change and the grader cannot see any of the CSS, so we are seeing the fail for those grading points.

  • Failed:14. The links on the page should have no underline by default.

  • Failed:15. The links should change color when hovered over.

  • Failed:16. The links should change color when they are being clicked.

  • Failed:17. The links should have an outline when focused.

  • Failed:18. The links should change color once visited.

4

Have you checked that the filename for the css is correct in your HTML link element?

5

I did like a million times, but you just made me look again and I forgot the S on the end haha, Thanks guys!

1 Like
6

AI has no way of actually knowing if the code is correct or not