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

HTML-CSS
1

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

2

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.

3

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

4

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.