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

Programming HTML-CSS
1

Tell us what’s happening:

Hello, I’m having trouble with this lab. It is saying that I should have four list items, but I have four list items.

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>Styled To-Do List</title>
    <link href="styles.css" rel="stylesheet">
</head>

<body>
   <div class="styled-list">
        <h1>My To-Do List</h1></div>
        
<ul class="todo-list" style="list-style-type:none">
            <div class="todo-item">
            <li>
                <input type="checkbox" id="lab">
                <label for="Lab">Finish Lab</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">Free Code Camp</a></li>
                </ul>
            </li>
            
        </div>

    <div class="todo-item">
        <li>
            <input type="checkbox" id="email">
            <label for="email">Check Email</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://mail.google.com/mail/u/0/?tab=rm&ogbl#inbox" target="_blank">Gmail</a></li>
            </ul>
        </li>
    </div>

    <div class="todo-item">
        <li>
            <input type="checkbox" id="ebay">
            <label for="ebay">Check Ebay</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.ebay.com/" target="_blank">Ebay</a></li>

            </ul>
        </li>
    </div>

    <div class="todo-item">
        <li>
            <input type="checkbox" id="tutorial">
            <label for="tutorial">Watch Tutorial</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.youtube.com/watch?v=R4v_7hh4Yys&t=144s/" target="_blank">Tutorial Video</a></li>

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

</html>

/* file: styles.css */
body {
    background-color: rgb(82, 68, 82);
    color: rgb(0, 0, 0);
    font-family: 'Times New Roman', Times, serif;
    list-style: none;
}

.styled-list {
    width: 500px;
    background-color: rgb(119, 103, 119);
    padding: 20px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.todo-item {
    width: 400px;
    background-color: rgb(118, 103, 118);
    border-radius: 5px;
    padding: 20px;
    margin-top: 5px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 45px;
    min-height: 70px;
    align-items: center;
    justify-content: left;
}

ul {
    list-style-type: square;
    font-size: 15px;
}

.sub-item {
    margin-top: 15px;
}

h1 {
    text-align: center;
    font-size: 40px;
    color: rgb(29, 29, 29);
}

a {
    text-decoration: none;
}

a:link {
    color: navy;

}

a :visited {
    color: plum;
}

a:hover {
    color: purple;
}

a:focus {
    outline: solid 2px black;
}

a:active {
    color: purple;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:150.0) Gecko/20100101 Firefox/150.0

Challenge Information:

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

Github Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-stylized-to-do-list/66c051d13a6a20255a963695.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @mbellomy81,

The issue is probably coming from the HTML structure: in a <ul> list, the direct children must be <li> elements, not <div> elements.

3

I’m having trouble with 19 the links should change color once visited. I have the CSS for the links set to a different color for when visited.

4

Look carefully at this selector. How does it differ from your other anchor selectors syntactically?