Need help with the landingpage

HTML-CSS
1

Hi, i am stuck. I don’t know what i did wrong.
It keeps telling me there is an error here

[When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page]

i have spent hours trying to figure it out but no luck

https://codepen.io/hureira/pen/JjRzJqQ

2

Hi @Hureira!

Welcome to the forum!

Error message
Each .nav-link element should have an href attribute

These don’t have hrefs
<li class="nav-link">

Place that class in another element that contains an href and the test will pass.

3

Thanks, it worked…
Decided to add the href attribute to this <li class="nav-link">
making it <li class="nav-link" href="xyzx">

4

that’s the wrong way of fixing it, hrefis not a valid attribute for a li element

5

Thanks.
I was actually going to ask about that.
Before i posted the question, i tried wrapping the li in an anchor tag, it worked fine but the test kept showing same error

6

As @ILM pointed out, href is not a valid li attribute. The tests may pass but you have HTML syntax errors that you should correct.

Run your HTML code through the W3C validator. There is a correct way to use the list item and the anchor tag together but it’s not the way you’ve chosen.

On a side note, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

9

Yeah I wasn’t trying to confuse you.
I hoping you would add it to the anchor tag instead of the li tag as suggested by this line.

But maybe it wasn’t clear.

10

[quote=“Roma, post:6, topic:441555, full:true”]

Thank you. I will check the W3C Validator

I used a vscode to write the code and only copied it into the codepen. Thanks though, i didnt know i could use the settings button that way

11

I tried that but the error kept coming up

12

wow, the validator is good. Thanks

14

landingpagesnip
landingpagesnip1365×652 116 KB

please check this. Is there a mistake there? Its still showing same error

15

Oh I am an idiot.
I ignored my own advice. :laughing:

I should have placed the class in the anchor tag from the deleted screenshot earlier.

  <li>
          <a class="nav-link" href="#email-submit">SUBSCRIBE</a>
  </li>

That’s what the test means by clickable element.

Codepen must have not registered the change I made earlier and allowed the test to pass when it wasn’t supposed to.

Now it should pass and it is syntactically correct.

16

Thanks. Its fixed. That worked