Responsive Web Design Project - Landing Page

Hello. I’m not sure why the test is failing for steps 5 and 6:

User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.

User Story #6: I can watch an embedded product video with id="video" .

<nav id="nav-bar" class="navbar sticky-top navbar-light bg-light">
      <a class="navbar-brand" href="#"></a>
      <ul>
        <li class="nav-link"><a href="#">Blogposts</a></li>
     
      </ul>
    </nav>
  </header>
</body>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Hi @American-Tahiti !

It would be better if you shared your codepen link so we can see the error messages better.

1 Like

Thank you very much @jwilkins.oboe
I wasn’t aware of how to make the code show up. Fairly new to this. :grinning:

Looking at your code, you don’t have any sections that go to Blogposts, Merchandise, etc.
When I go to the freeCodeCamp sample project, I can click on any of the nav links and it will take me to that corresponding section on the page.
Try it out for yourself and see what I mean.
That is what the error message is trying to tell you.
Right now, your nav links do not go anywhere.

I would suggest reviewing this lesson on how to link to internal sections on a page

But also, your video is not displaying because you are not using the correct code.
Here is how to get the correct code

Go to the youtube link

Click on share

Click on embed
Screen Shot 2021-12-27 at 12.24.29 AM

Copy the code

Add to html file

1 Like

@jwilkins.oboe Thanks a million! Extremely helpful. I will read that tutorial. Thanks again.

1 Like

When a test fails click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The failing message says

When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.'
Each .nav-link element should have an href attribute : expected false to equal true
AssertionError: Each .nav-link element should have an href attribute : expected false to equal true

Do you understand what the test is looking for and why it fails?

On a side note, as previously mentioned, clicking the link should take the user to the appropriate section of the page.

This is what I have already read:
"5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

Each .nav-link element should have an href attribute : expected false to equal true"

I understand that this is saying that each of my links that are in the nav bar should link to the corresponding section on the page. Well, when I click each link, the links do in fact take me to the corresponding sections. They also each have an href attribute. So I do not understand why the test fails.

The remainder of the error message that contains various URLs, I do not understand that part of the error message.

This is your code

<li class="nav-link"><a href="#food">Food</a></li>
<li class="nav-link"><a href="#drink">Drink</a></li>
<li class="nav-link"><a href="#gifts">Gifts</a></li>
<li class="nav-link"><a href="#merchandise">Herbivore's Merchandise</a></li>
<li class="nav-link"><a href="#form">Contact Us</a></li>

That is not what it is saying.
It is saying that each .nav-link element should have an href attribute.

In your code each .nav-link element is an li and does not, and cannot, have an href attribute.
The a element has an href attribute.
The li element and the a element are different elements.
Does that help?

When the class is correctly placed the tests all pass and the user is still taken to the correct corresponding section.

1 Like

@Roma Thank you very much for your help. Now that I realize my error, it’s hard to believe I didn’t understand it upon the first, second and third reading. It seems strangely simple now. Thank you for providing this guidance!

I’m glad I could help @American-Tahiti.