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

HTML-CSS
1

Tell us what’s happening:

Hello so far every step is checked except for step 17 but I thought I did the coding right to get the outline when focused? What should I do ?

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Styled Todo List</title>
    <link rel="stylesheet" href="styles.css">
</head>


<h1>A To do List</h1>
<ul class="todo-list">
 <li><input id="feed-dog"
 type="checkbox"/>
 <label for="feed-dog">Feed my doggie</label>
<ul class="sub-item">
<li><a class="sub-item-link" href="google.com" target="_blank">Puppy treats</a>
</li>
  </ul>
</li>

  <li>
  <input id="sleep" type="checkbox">
  <label for="sleep">Sleep</label>
  <ul class="sub-item">
  <li><a class="sub-item-link" href="google.com"target="_blank">KEEP SLEEPING</a>
  </li>
    </ul>
  </li>

 <li>
   <input type="checkbox" id="play">
   <label for="play">Play Some Videos</label>
   <ul class="sub-item">
  <li> <a class="sub-item-link"  href="google.com" target="_blank">Visit Web</a></li>
     </ul>

<li>
  <input type="checkbox"
  id="cat"/>
  <label for="cat">Clean stinky dog</label>
  <ul class="sub-item">
  <li>
  <a class="sub-item-link" href="google.com" target="_blank">soap</a>
  </li>
  </ul>
</li>    
 </ul>
 
</body>

/* file: styles.css */
todo-list{
list-style-type:none;
 }
 a:link{
  color:red;
 }
a:hover{
  color:green;
}
a:focus{ 
  color:blue;
}
a:active{
  color:pink;
}
a:visited{
  color:black;
}

a:focus{
outline: green;
}

a {text-decoration: none; }

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.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

You have 3 different rules for anchor focus. Try removing some and simplifying this.

1 Like
3

Thanks so much!!! Got it!!! :))))

1 Like