Build a Product Landing Page - Problem on Story #5

Tell us what’s happening:

I have completed all of the challenges, apart from the @media queries. But the tests are returning only 9/16 and saying that the following ‘story’ has not been completed. But I’ve done more than I need to do with respect to this. I would appreciate any help. Here’s the request and then a link to my my code on CodePen:

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.

Your code so far
https://codepen.io/MathewJM/pen/oPbLgy

Your browser information:

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

Link to the challenge:

Hi,

#5 Easy fix- two things

You have to read the error messages closely. Your nav-link elements do not have an href. The href attribute is on your nav-link2 elements.

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

<button class="nav-link"><a class="nav-link2" href="#home-link">Home</a></button>

The way you set up your internal anchors is also not what they are looking for in the test suite so fixing above will only get you half way there. Using name attributes as an anchor still works but in the HTML5 standard preference is for id attribute. (The browser looks for matching id, if none found then looks for matching name attribute.)

<a name="home-link"></a> <!-- works but not ideal -->

F
but if, for instance, this code were present

<footer id="home-link"> <!-- browser will choose this first -->

The browser would ‘prefer’ this anchor and ignore your <a name="home-link"> anchor at the top.

It does not help that there are tons of tutorials online still showing how to use name attribute as the anchor. I think that was HTML4

Good luck

1 Like

Thanks very much for your help, alhazen1. I’ll take your advice, change my syntax and let you know. I appreciate your help. I understand what you mean about the cascading effects of more selective and specific selectors (I.e. IDs over names). Can I just ask one more question regarding names, IDs and classes?

If I was to create a form, isn’t it best to use name attributes to connect the input elements to the corresponding labels? In other cases, like the example above, if there is no ID and if it’s better to use a class to style multiple elements together, do classes also link with other elements in the same way that IDs do? Even if I was to use classes instead of IDs to connect input elements with their corresponding labels?

Thanks.

I’ve made the changes and I’m still getting the same 9/10 score. I remember changing these around as I was making the document, so that ‘href’ was included in the same element with the ID “nav-link”.

The alternative would be to use ‘href’ in the tag, but I have already tried this. I’m not even sure if button tags themselves can be used as links, rather than turning other tags (links) into buttons.

Do you have any more suggestions?

Hi,
Probably easier to show you than to tell you.
I forked your pen and made a few changes to demonstrate

I added some dummy text so your page is longer than screen height so navigation is obvious.

The visible anchors in red are totally optional. I just included them to show where your anchors actually exists on page.

Thank you very much for taking the time to fork my pen. I understand what you mean now. It’s basically better to ‘buttonize’ anchor tags with CSS rather than use the tags in HTML?

I ran the tests again and I got 12 so far, so I need to do the media query and then find out what the other issues are. Thanks again, alhazen1. :metal:

AlHazen1, I’ve now done what you mentioned and I’ve added (which definitely work). But now I’m returning a 14/16 score. It should be reading 16/16. I’ve gone through each point and I can’t see where I’ve gone wrong. Can you offer another perspective, if you’ve got the time?

Thanks.

My code: https://codepen.io/MathewJM/pen/ZMWEry
The task: https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page

What I’ve done is posted the url into the ‘Solution’ box and I’ve moved onto the next task, as I perfectly understood the task at hand. It’s the first one where I’ve not got 16/16. But I can always return to it if you have any ideas (see above). Thanks. :smile: