Merged post - Build a Stylized To-Do List - Build a Stylized To-Do liststyle a list issue

HTML-CSS
1

Tell us what’s happening:

hi. doing styling a list lab. not working for me and need help.the

Your code so far

html

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="styles.css">
        <meta charset="UTF-8">
        <title>Style To-Do List</title>
    </head>
    <body>
<h1>My To-Do List</h1>
<ul class="todo-list"> 
<li>Explore gaming</li>
<label for="gaming">Explore gaming keyboards</label>
<input type="checkbox" id="gaming" name="ganing" value="gaming">
<ul class="sub-item">
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">Store</a></li>
</ul>
</ul>
<ul class="todo-list"> 
    <label for="request">Finish the report</label>
<input type="checkbox" id="request" name="request" value="request">
<ul class="sub-item"> 
<li><a href="bfreecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">Request Access</a></li>
</ul>
</ul>
<ul class="todo-list"> 
<label for="phone">View Phone's Warranty</label>
<input type="checkbox" id="phone" name="phone" value="phone">
<ul class="sub-item"> 
    <li><a href="bfreecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">View Receipts</a></li>
</ul>
</ul>
<ul class="todo-list"> 
<label for="process">Check Processor Specs</label>
<input type="checkbox" id="process" name="process" value="process">
<ul class="sub-item"> 
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">View Model Number</a></li>
</ul>
</ul>
</body>body>
</html>html>

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

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

<body>

</body>

</html>

css

/* file: styles.css */
ul {
    list-style-type: square;
    }

    a {
        color: blue;
        text-decoration: none;
    }

    a:visited {
        color: purple;
    }

    a:hover {
        color: grene;
    }

    a:focus {
        outline: solid;
    }

Your browser information:

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

Challenge Information:

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

hi. doing the lab style a list. okay first time doing this. so using jaws for windows. so can some one help me out. so will paste my html code and css below. so also the error list when vallidating. and also as totally blind, need help with the links and the colors and the outline and solid. can any one help. and tell me what i am doing wrong and how to get it to work.
marvin.
ps: pasting my code, css and error messages below.


<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="styles.css">
        <meta charset="UTF-8">
        <title>Style To-Do List</title>
    </head>
    <body>
<h1>My To-Do List</h1>
<ul class="todo-list"> 
<li>Explore gaming</li>
<label for="gaming">Explore gaming keyboards</label>
<input type="checkbox" id="gaming" name="ganing" value="gaming">
<ul class="sub-item">
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">Store</a></li>
</ul>
</ul>
<ul class="todo-list"> 
    <label for="request">Finish the report</label>
<input type="checkbox" id="request" name="request" value="request">
<ul class="sub-item"> 
<li><a href="bfreecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">Request Access</a></li>
</ul>
</ul>
<ul class="todo-list"> 
<label for="phone">View Phone's Warranty</label>
<input type="checkbox" id="phone" name="phone" value="phone">
<ul class="sub-item"> 
    <li><a href="bfreecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">View Receipts</a></li>
</ul>
</ul>
<ul class="todo-list"> 
<label for="process">Check Processor Specs</label>
<input type="checkbox" id="process" name="process" value="process">
<ul class="sub-item"> 
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">View Model Number</a></li>
</ul>
</ul>
</body>body>
</html>html>


ul {
    list-style-type: square;
    }

    a {
        color: blue;
        text-decoration: none;
    }

    a:visited {
        color: purple;
    }

    a:hover {
        color: grene;
    }

    a:focus {
        outline: solid;
    }
2

you have some issues with your html

to start, your closing tags for body and html are like this:

</body>body>

</html>html>

after that there is also a duplicated boilerplate

the first test that fails ask for one element with a class of todo-list, you have multiple such elements.

Start from this, then share your updated code, and we will see the other issues

3

hi. okay yes visual studio code does that. sorry, most times i catch that. thanks. okay pasting my updated code. so still not liking it. why? how to fix. first time doing nested lists and so how to fix. will paste my code and the error. sorry, trying my best.
marvin.

Skip to content
Search 11,800+ news articles, tutorials, and books

Menu
Profile
Certified Full Stack Developer Curriculum
Build a Stylized To-Do List
Instructions
index.htmlEditor
styles.cssEditor
ConsoleHide the previewPreviewMove the preview to a new window and focus it
Build a Stylized To-Do list
Build an app that is functionally similar to this example project. Try not to copy the example project, give it your own personal style.

In this lab, you will practice the different styles that can be applied to links when they are hovered over, focused, clicked, and visited.

Fulfill the user stories below and get all the tests to pass to complete the lab.

User Stories:

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

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

Inside each list item, there should be:

An input element with the type checkbox and id set to a unique value.
A label element with the for attribute set to the corresponding input element’s id.
An unordered list with the class sub-item.
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.
Your anchor elements shouldn’t have any default text decoration.

You should set the text color of the links to a color of your choice.

When your links are visited, the color should change to another color of your choice.

When your links are hovered over, the color should change to another color of your choice.

When your links are focused, there should be a colored outline around the link.

When your links are clicked, the color should change to another color of your choice.

Note: Be sure to link your stylesheet in your HTML and apply your CSS.

Run the Tests (Ctrl + Enter)
Reset this lesson
Get Help
Tests
Failed:1. You should have one unordered list with the class todo-list.
Failed:2. You should have four list items inside the unordered list.
Failed:3. The li inside the ul with the class todo-list should contain an input element with the type of checkbox.
Failed:4. The li inside the ul with the class todo-list should contain a label element.
Passed:5. All input elements should have an id.
Passed:6. All label elements should have a for attribute.
Passed:7. All label elements should have some text.
Passed:8. The id and for attributes of the input and label elements pairs, should have corresponding values.
Failed:9. 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-link.
Passed:11. All anchor elements should have a valid href attribute.
Passed:12. All anchor elements should have text.
Passed:13. Each a element should have a target attribute with the value of _blank.
Passed: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.
Passed:17. The links should have an outline when focused.
Passed:18. The links should change color once visited.
373839404142434445

151617181920212223

// running tests

  1. You should have one unordered list with the class todo-list.
  2. You should have four list items inside the unordered list.
  3. The li inside the ul with the class todo-list should contain an input element with the type of checkbox.
  4. The li inside the ul with the class todo-list should contain a label element.
  5. After the label elements, there should be an unordered list with the class sub-item.
  6. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.
  7. The links should change color when hovered over.
  8. The links should change color when they are being clicked.
    // tests completed
    Skip to content
    Search 11,800+ news articles, tutorials, and books

Menu
Profile
Certified Full Stack Developer Curriculum
Build a Stylized To-Do List
Instructions
index.htmlEditor
styles.cssEditor
ConsoleHide the previewPreviewMove the preview to a new window and focus it
Build a Stylized To-Do list
Build an app that is functionally similar to this example project. Try not to copy the example project, give it your own personal style.

In this lab, you will practice the different styles that can be applied to links when they are hovered over, focused, clicked, and visited.

Fulfill the user stories below and get all the tests to pass to complete the lab.

User Stories:

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

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

Inside each list item, there should be:

An input element with the type checkbox and id set to a unique value.
A label element with the for attribute set to the corresponding input element’s id.
An unordered list with the class sub-item.
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.
Your anchor elements shouldn’t have any default text decoration.

You should set the text color of the links to a color of your choice.

When your links are visited, the color should change to another color of your choice.

When your links are hovered over, the color should change to another color of your choice.

When your links are focused, there should be a colored outline around the link.

When your links are clicked, the color should change to another color of your choice.

Note: Be sure to link your stylesheet in your HTML and apply your CSS.

Run the Tests (Ctrl + Enter)
Reset this lesson
Get Help
Tests
Failed:1. You should have one unordered list with the class todo-list.
Failed:2. You should have four list items inside the unordered list.
Failed:3. The li inside the ul with the class todo-list should contain an input element with the type of checkbox.
Failed:4. The li inside the ul with the class todo-list should contain a label element.
Passed:5. All input elements should have an id.
Passed:6. All label elements should have a for attribute.
Passed:7. All label elements should have some text.
Passed:8. The id and for attributes of the input and label elements pairs, should have corresponding values.
Failed:9. 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-link.
Passed:11. All anchor elements should have a valid href attribute.
Passed:12. All anchor elements should have text.
Passed:13. Each a element should have a target attribute with the value of _blank.
Passed: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.
Passed:17. The links should have an outline when focused.
Passed:18. The links should change color once visited.
373839404142434445

151617181920212223

// running tests

  1. You should have one unordered list with the class todo-list.
  2. You should have four list items inside the unordered list.
  3. The li inside the ul with the class todo-list should contain an input element with the type of checkbox.
  4. The li inside the ul with the class todo-list should contain a label element.
  5. After the label elements, there should be an unordered list with the class sub-item.
  6. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.
  7. The links should change color when hovered over.
  8. The links should change color when they are being clicked.
    // tests completed
4

if you want more help please share your updated code

you have added everything in your post but your code

5

hi. sorry about that. now pasting my updated html code and css code. sorry.
marvin.


<!DOCTYPE html>

<html lang="en">

<head>

<link rel="stylesheet" href="styles.css">

<meta charset="UTF-8">

<title>Style To-Do List</title>

</head>

<body>

<h1>My To-Do List</h1>

<ul class="todo-list">

<li>Explore gaming</li>

<label for="gaming">Explore gaming keyboards</label>

<input type="checkbox" id="gaming" name="ganing" value="gaming">

<ul class="sub-item">

<li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">Store</a></li>

</ul>

</ul>

<ul>

<label for="request">Finish the report</label>

<input type="checkbox" id="request" name="request" value="request">

<ul>

<li><a href="bfreecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">Request Access</a></li>

</ul>

</ul>

<ul>

<label for="phone">View Phone's Warranty</label>

<input type="checkbox" id="phone" name="phone" value="phone">

<ul>

<li><a href="bfreecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">View Receipts</a></li>

</ul>

</ul>

<ul>

<label for="process">Check Processor Specs</label>

<input type="checkbox" id="process" name="process" value="process">

<ul>

<li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">View Model Number</a></li>

</ul>

</ul>

</body>

</html>

    ul {
        list-style-type: square;
        }

        a {
            color: blue;
            text-decoration: none;
        }

        a:visited {
            color: purple;
        }

        a:hover {
            color: grene;
        }

        a:focus {
            outline: solid;
        }
6

your element with a class of todo-list closes after the first sub-item, that is incorrect

you also have various ul elements with no class, those should not be there, consider if they need a class or if they need to be removed

there are other issues, but let’s go slow

7

hi, do you have an example of how to do that. and do i need only one or two classes and then separated with the list elements. okay tackles those first. first time doing nested lists and just two classes. please explain. not to do it for me, want to learn, if you can show me how to get this part to work, then work on other issues.
marvin.

8

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

You should have one ul unordered list element. (You have many)

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

In the single ul there should be 4 li list item elements.

Here is the basic structure of an unordered list with list items:

<ul>
  <li>item one</li>
  <li>item two</li>
  <li>item three</li>
</ul>
9

you need one ul with a class of class-list

you may want to reread the user stories if you have doubts

it also says where the ul with class of sub-item should be used

10

hi, okay so trying to get this to work. so pasting my errors. so how to get this to work, what am i doing wrong? first time doing nested lists. so pasting the error list and my code. so how to get this to work. sorry trying my best as a screen reader user.
marvin.

Skip to content

Menu
Profile

  1. Certified Full Stack Developer Curriculum
  2. Build a Stylized To-Do List

Instructions

index.htmlEditorstyles.cssEditor

ConsoleHide the previewPreviewMove the preview to a new window and focus it

Build a Stylized To-Do list

Build an app that is functionally similar to this example project. Try not to copy the example project, give it your own personal style.

In this lab, you will practice the different styles that can be applied to links when they are hovered over, focused, clicked, and visited.

Fulfill the user stories below and get all the tests to pass to complete the lab.

User Stories:

  1. You should have one unordered list with the class todo-list.
  2. Inside the unordered list, you should have four list items.
  3. Inside each list item, there should be:
  • An input element with the type checkbox and id set to a unique value.
  • A label element with the for attribute set to the corresponding input element’s id.
  • An unordered list with the class sub-item.
  • 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.
  1. Your anchor elements shouldn’t have any default text decoration.
  2. You should set the text color of the links to a color of your choice.
  3. When your links are visited, the color should change to another color of your choice.
  4. When your links are hovered over, the color should change to another color of your choice.
  5. When your links are focused, there should be a colored outline around the link.
  6. When your links are clicked, the color should change to another color of your choice.

Note: Be sure to link your stylesheet in your HTML and apply your CSS.

Run the Tests (Ctrl + Enter)Reset this lesson

Get Help

Tests

  • Passed:1. You should have one unordered list with the class todo-list.

  • Failed:2. You should have four list items inside the unordered list.

  • Failed:3. The li inside the ul with the class todo-list should contain an input element with the type of checkbox.

  • Failed:4. The li inside the ul with the class todo-list should contain a label element.

  • Passed:5. All input elements should have an id.

  • Passed:6. All label elements should have a for attribute.

  • Passed:7. All label elements should have some text.

  • Passed:8. The id and for attributes of the input and label elements pairs, should have corresponding values.

  • Failed:9. 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-link.

  • Passed:11. All anchor elements should have a valid href attribute.

  • Passed:12. All anchor elements should have text.

  • Passed:13. Each a element should have a target attribute with the value of _blank.

  • Passed: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.

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

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

28

29

30

31

32

33

34

35

36

Model Number</

li>

15

16

17

18

19

20

21

22

23

color:

grene;

}

a:focus {

outline: solid;

}

// running tests 2. You should have four list items inside the unordered list. 3. The

li

inside the

ul

with the class

todo-list

should contain an

input

element with the

type

of

checkbox

. 4. The

li

inside the

ul

with the class

todo-list

should contain a

label

element. 9. After the

label

elements, there should be an unordered list with the class

sub-item

. 10. The

li

inside the

ul

with the class

sub-item

should have an anchor element with the class

sub-item-link

. 15. The links should change color when hovered over. 16. The links should change color when they are being clicked. // tests completed```
type or paste code here

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Style To-Do List</title>
</head>
<body>
<h1>My To-Do List</h1>
<ul class="todo-list"> 
<li>Explore gaming</li>
<label for="gaming">Explore gaming keyboards</label>
<input type="checkbox" id="gaming" name="ganing" value="gaming">
<li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">View Model Number</a></li>
<ul class="sub-item">
<li>Request Access</li>
<label for="request">Finish the report</label>
<input type="checkbox" id="request" name="request" value="request">
<li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">View Model Number</a></li>
<li>View Receipts</li>
<label for="phone">View Phone's Warranty</label>
<input type="checkbox" id="phone" name="phone" value="phone">
<li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">View Model Number</a></li>
<li>View Model Number</li>
<label for="process">Check Processor Specs</label>
<input type="checkbox" id="process" name="process" value="process">
<li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank">View Model Number</a></li>
</ul>
</ul>
</body>
</html>
11

hi. been over 3 hours. so patiently waiting for help.
marvin.

12

what do the instructions ask you to have inside the li elements? what do you have inside them?

13

hi. okay went back and stripped out everything for the lab and started again. and now getting failures. totally blind and using a screen reader. so will paste my html code. so what am i doing wrong. why is well not worried about the css stuff, will fix that later or get help. so getting other failures. very frustrated. i dont know what i am doing wrong. so why am i getting some errors. what stupid thing am i doing wrong. what wrong code am i putting in. please help and advice. not to do it for me, but where to then fix and maybe as i cannot see, not getting it, dumb, stupid or not getting it. it may be easy for you advanced developers, but firstime doing nested lists. or multiple lists. so pasting my code below and the errors, can you point me out where i am going wrong and how to fix so it passes, then worry about the color stuff later, as cannot see with the links stuff. so can you help me out. this is driving me nuts. tried working on this for about an hour or two or more. totally frustrated. and not sure how to proceed. yes got a text file with the instructions, and tried to follow them. please help me out where i am going wrong. need your help and probably be tomorrow until i hear a reply for helping me out. a one totally blind developer student on this forum.
help!
tearing my hair out!
pasting the error message and my html below.

  • Passed:1. You should have one unordered list with the class todo-list.

  • Passed:2. You should have four list items inside the unordered list.

  • Failed:3. The li inside the ul with the class todo-list should contain an input element with the type of checkbox.

  • Failed:4. The li inside the ul with the class todo-list should contain a label element.

  • Passed:5. All input elements should have an id.

  • Passed:6. All label elements should have a for attribute.

  • Passed:7. All label elements should have some text.

  • Passed:8. The id and for attributes of the input and label elements pairs, should have corresponding values.

  • Failed:9. 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-link.

  • Passed:11. All anchor elements should have a valid href attribute.

  • Passed:12. All anchor elements should have text.

  • Passed:13. Each a element should have a target attribute with the value of _blank.

  • 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.

<!DOCTYPE html>

<html lang="en">

<head>

<link rel="stylesheet" href="styles.css">

<meta charset="UTF-8">

<title>Style To-Do List</title>

</head>

<body>

<h1>My To-Do List</h1>

<ul class="todo-list">

<li>Explore gaming</li>

<input type="checkbox" id="gaming" name="ganing" value="gaming">

<label for="gaming">Explore gaming keyboards</label>

<li>Request Access</li>

<input type="checkbox" id="request" name="request" value="request">

<label for="request">Finish the report</label>

<li>View Receipts</li>

<input type="checkbox" id="phone" name="phone" value="phone">

<label for="phone">View Phone's Warranty</label>

<li>View Model Number</li>

<input type="checkbox" id="model" name="model" value="model">

<label for="model">View Model Number</label>

</ul>

<ul class="sub-item">

<li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">Store</a></li>

<li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">Request Access</a></li>

<li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">View Receipts</a></li>

<li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">View Model Number</a></li>

</ul>

</body>

</html>
  • Failed:18. The links should change color once visited..
14

you do not need to paste the error message, but you should do an effort to format your code correctly, only mods can fix your post, so if people can’t read your code you’re going to wait longer for help

I have edited your post

let’s loonk at these two failed tests:

You have only text inside the li element

the input and label elements are after the li, not inside it

15

hi. so you are saying i need to put the input and label tag inside the li element. okay, will try that.
marvin.

16

hi, well get failures for line 4 and 5. and so pasting my code below.
so how to fix.
marvin.

type or paste code here

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Style To-Do List</title>
</head>
<body>
<h1>My To-Do List</h1>
<ul class="todo-list">
<li> <input type="checkbox" id="gaming" name="ganing" value="gaming">
<label for="gaming">Explore gaming keyboards</label></li>
<li><input type="checkbox" id="request" name="request" value="request">
<label for="request">Finish the report</label></li>
<li><input type="checkbox" id="phone" name="phone" value="phone">
<label for="phone">View Phone's Warranty</label></li>
<li><input type="checkbox" id="model" name="model" value="model">
<label for="model">View Model Number</label></li>
</ul>
<ul class="sub-item">
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">Store</a></li>
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">Request Access</a></li>
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">View Receipts</a></li>
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">View Model Number</a></li>
    </ul>
</body>
</html>
17

please read again what test 9 says (or user story 3) and consider your code

18

hi. okay getting these two errors. so where do i put the second class,inside the label elements. totally confused and frustrated. so where do i put them? so, totally blind and use a screen reader. have read the user story. and the putting the code. so where do i put it. sorry. just totally lost, and how to get this to pass part of the lab. maybe you sighted people able to glance and see what the error is. but first time doing nested lists or multiple lists. so where to put it.
will paste the errors and my code.
marvin.
ps: putting it now.
Failed:9. 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-link.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Style To-Do List</title>
</head>
<body>
<h1>My To-Do List</h1>
<ul class="todo-list">
<li> <input type="checkbox" id="gaming" name="ganing" value="gaming">
<label for="gaming">Explore gaming keyboards</label></li>
<li><input type="checkbox" id="request" name="request" value="request">
<label for="request">Finish the report</label></li>
<li><input type="checkbox" id="phone" name="phone" value="phone">
<label for="phone">View Phone's Warranty</label></li>
<li><input type="checkbox" id="model" name="model" value="model">
<label for="model">View Model Number</label></li>
</ul>
<ul class="sub-item">
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">Store</a></li>
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">Request Access</a></li>
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">View Receipts</a></li>
    <li><a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class=""sub-item">View Model Number</a></li>
    </ul>
</body>
`Preformatted text`</html>
19

hi. had the extra quotes in visual studio for the class. so took them out. but still not working rule 9 and 10. so how to fix.
marvin.

20

Your code is not structured correctly based on the instructions. In user story #3, it explains what should be included in each of the li items within the .todo-list element.

  1. Inside each list item, there should be:
  • An input element with the type checkbox and id set to a unique value.
  • A label element with the for attribute set to the corresponding input element’s id.
  • An unordered list with the class sub-item.
  • 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.

Instead, you have created a new ul element.