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

Tell us what’s happening:

  1. The links should have an outline when focused. Please somebody should help me with this . i have tried several times but i am finding it difficult to solve it.

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>
<ul class="todo-list">
    <li><input type="checkbox" id="unique value">
    <label for="unique value">eating</label>
    <ul class="sub-item">
      <li><a href="sub-item" class="sub-item-link" target="_blank">sub-item</a></li>
      </ul>
    </li>
    <li><input type="checkbox" id="unique value">
     <label for="unique value">singing</label>
     <ul class="sub-item"><li><a href="sub-item" class="sub-item-link" target="_blank">sub-item</a></li></ul>
     </li>
    <li><input type="checkbox" id="unique value">
    <label for="unique value">dancing</label>
    <ul class="sub-item"><li><a href="sub-item" class="sub-item-link" target="_blank">sub-item</a></li></ul>
    </li>
    <li><input type="checkbox" id="unique value">
    <label for="unique value">running</label>
    <ul class="sub-item"><li><a href="sub-item" class="sub-item-link" target="_blank">sub-item</a></li></ul>
    </li>
</ul>
</body>

</html>
/* file: styles.css */
a{text-decoration:none;}
.sub-item-link:hover{color:red;}
a:active{color:green;}
a:visited{color:purple;}
a:focused{outline:2px solid brown;}

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

If you look at the code here, it looks like the color coding is trying to tell you something.

You can also search for the correct syntax of that CSS selector.

Tell us what’s happening:

  1. After the label elements, there should be an unordered list with the class sub-item.
    Failed:10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item

Please i have tried working on this but i am finding it difficult to solve it .

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
</head>

<body>
<ul class="todo-list">
    <li><input type="checkbox" id="unique value">
    <label for="unique value">eating</label>
    <ul class="sub-item">
      <li><a href="sub-item" class="sub-item-link" target="_blank">sub-item</a></li>
      </ul>
    </li>
    <li><input type="checkbox" id="unique value">
     <label for="unique value">singing</label>
     <ul><li><a href="sub-item" class="sub-item-link" target="_blank">sub-item</a></li></ul>
     </li>
    <li><input type="checkbox" id="unique value">
    <label for="unique value">dancing</label>
    <ul><li><a href="sub-item" class="sub-item-link" target="_blank">sub-item</a></li></ul>
    </li>
    <li><input type="checkbox" id="unique value">
    <label for="unique value">running</label>
    <ul><li><a href="sub-item" class="sub-item-link" target="_blank">sub-item</a></li></ul>
    </li>
</ul>
</body>

</html>
/* file: styles.css */
a{text-decoration:none;}

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

Inside each list item, there should be:

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

A unique value means a value that is different from the other ids on the page. Not the words “unique value”

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.

A valid href value will be a URL pointing to a webpage or a hashlink to an id. “sub-item” isn’t correct.

<ul class="sub-item">

You should only have one unordered list.

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

Only one ul with four li

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