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

HTML-CSS
1

Tell us what’s happening:

Hi the 10th condition never passes in the code.
The Li with a anchor element have a class but still it never works.
The code works in VS code and and the out put is simillar too.
Do guide me where the mistake has taken place
cheers.

Your code so far

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


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="todo-list">
        <li>
            <input type="checkbox" id="task1">
            <label for="task1">Complete project documentation</label>
            <ul class="sub-item">
                <li><a href="https://example.com/docs"               class="sub-item-link" target="_blank">View documentation template</a></li>
                <li><a href="https://example.com/guidelines" class="sub-item-link" target="_blank">Writing guidelines</a></li>
            </ul>
        </li>
        
        <li>
            <input type="checkbox" id="task2">
            <label for="task2">Review code changes</label>
            <ul class="sub-item">
                <li><a href="https://github.com/example/repo" class="sub-item-link" target="_blank">GitHub repository</a></li>
                <li><a href="https://example.com/review-checklist" class="sub-item-link" target="_blank">Code review checklist</a></li>
            </ul>
        </li>
        
        <li>
            <input type="checkbox" id="task3">
            <label for="task3">Update team on progress</label>
            <ul class="sub-item">
                <li><a href="https://slack.com/channels/team" class="sub-item-link" target="_blank">Team Slack channel</a></li>
                <li><a href="https://example.com/status-template" class="sub-item-link" target="_blank">Status update template</a></li>
            </ul>
        </li>
        
    <li>
         <input type="checkbox" id="task4">
    <label for="task4">Prepare presentation slides</label>
    <ul class="sub-item">
        <li><a href="https://docs.google.com/presentation" class="sub-item-link" target="_blank">Google Slides</a></li>
        <li><a href="https://example.com/presentation-tips" class="sub-item-link" target="_blank">Presentation best practices</a></li>
    </ul>
    </li>
    </ul>
</body>

</html>

/* file: styles.css */
.todo-list {
    list-style-type: none;
    padding: 0;
    margin: 20px;
    font-family: Arial, sans-serif;
}

.todo-list > li {
    margin: 15px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/* Styling for checkboxes and labels */
.todo-list input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
}

.todo-list label {
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 10px;
}

/* Sub-item list styling */
.sub-item {
    list-style-type: none;
    padding-left: 20px;
    margin-top: 10px;
}

.sub-item li {
    margin: 5px 0;
}

/* Link styling - requirement 14: no underline by default */
.sub-item-link {
    text-decoration: none;
    color: #0066cc;
    padding: 5px 8px;
    border-radius: 3px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Requirement 15: links change color when hovered over */
.sub-item-link:hover {
    color: #004499;
    background-color: #e6f3ff;
}

/* Requirement 16: links change color when being clicked */
.sub-item-link:active {
    color: #002266;
    background-color: #cce6ff;
}

/* Requirement 17: links have outline when focused */
.sub-item-link:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Requirement 18: links change color once visited */
.sub-item-link:visited {
    color: #663399;
}

.sub-item-link:visited:hover {
    color: #4d2673;
}

Your browser information:

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

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list
https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list

3

check again the instuctions

let’s go one by one

You should have one unordered list with the class todo-list.

You have this, good.

Inside the unordered list, you should have four list items.

You also have this.

Inside each list item, there should be:

Ok, now, let’s look inside the lis.

An input element with the type checkbox and id set to a unique value.

Ok, you have this

A label element with the for attribute set to the corresponding input element’s id.

You have this

An unordered list with the class sub-item.

Good.

A list item with an anchor element in it. The anchor should have the class sub-item-link, a valid href value, and a target value that makes the link open in a new tab.

This does not seem respected, you do not have one list item