Product landing page TEST PROBLEM

Hello. I have just started learning 2 weeks ago about html and css and this website is great. Now I’m facing an issue. In the product landing page test. 15th part of the test with the click the “nav-link” to take me to a section of the page. I did it in this way and when I click it takes me to the page sections but the test doesn’t let it go through and since I’m relatively new I have no idea what to do cause that is the only way I know how to do it.

<nav id="nav-bar">
            <ul>
                <li class="nav-link"><a href ="#works">How it works</a> </li>
                <li class="nav-link"><a href ="#services">Services</a> </li>
                <li class="nav-link"><a href ="#pricing">Pricing</a> </li>
            </ul>
 </nav>

This is the how I made it and it works but the test says it is an error.
Here is the codepen. I didn’t focus that much on appearance so it might look a bit ugly though also cause I used an image as a bg and am too lazy to include it.

https://codepen.io/m1rso/pen/YzKNMOV

When you run the test and check out the error message, it states that each nav-link class should have an href. You do have an href, which is written out correctly, but if you take a closer look, what element of your html really has that href?

Sorry, man. I still don’t get it. Would you be kind to clarify it ?

NP! This might sound a little confusing at first, so the element that has the classname nav-link is on your li element. But in between your li’s you have your anchor element, and that anchor element, or rather your a tags, they are the ones with the href associated to them, not your nav-link class, which, atm is tied to your li.

So in the big scheme of things, you nav-link does not have an href, only the a tag, which is a direct children to your li element. So that’s the tricky part I’m talking about. What you would want to do, is instead giving your li the nav-link, you can give your a tags the class name of nav-link instead. And in doing so, nav-link will directly have an href.

Hope I clarified that pretty well! I sometimes have a hard time explaining things haha.

1 Like

Yeah I get it. I usually use vscode to write the html and mainly give the ids to parents so I always have to give them to the elements directly when I’m running the tests. This time I just couldn’t see it maybe cause it is 4 AM and I’m exhausted. Thanks for your help man . I really appreciate it.

Anytime! If you have any other questions feel free to reach out again to the forums, we’re more than happy to help out. Glad that worked for ya, and good luck on on the rest of the path!