Product landing page test failure

Code Feedback
1

Hi,

I am trying to complete the product landing page test number 5 is failing.

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

However, when I click on the navbar links myself the site moves to the correct spot.

If anyone could let me know where I am going wrong I would really appreciate it. Any other feedback would also be appreciated.

https://codepen.io/TIGirling/pen/PozggVw

Thank you

2

Welcome to the forums @TIG.

Read the entire message, not just the first line. The 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

According to your code, li is the nav-link element and a has the href attribute.

3

Thank you very much for getting back to me. I am new to this and spent far too long making the page and my eyes just couldn’t spot the issue. Really appreciate the help and I am all fixed and passed.

I had read the message a few times, just didn’t make the connection that the id needed to be on the a tag. Thanks again.

4

Glad to have helped @TIG.

Happy coding!

5

Just realized you asked for additional feedback. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do yourself a favor and click on the down arrow in the CSS section and then click ‘Format CSS’. it makes reading your code much easier.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
      • You’ll have to click it more than once after fixing an issue. Keep running after each issue is corrected until it runs clean. Be wary of duplicate declarations in your selectors.
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • pixabay does not allow hotlinking. Your images do not show

https://devdocs.io/html/element/br

Hope this helps

6

Thank you Roma for the detailed feedback.

I have taken your advice, and I spent a few hours going through the HTML validator and CSS analyzer to improve the code. I made a lot of changes and tried to understand what was happening each time. I really appreciate you taking the time to help.

I wasn’t aware that I couldn’t link pictures from pixabay. I have changed them to unsplash, I read they allow hotlinks. I hope that works.

Thank you again.

7

Glad to help @TIG.

Your page is looking good and the images show. One thing to revisit;

  • The “All About Fast Flies” section isn’t responsive. But maybe you’re still working on it.
8

Good spot, I was having a couple of issues with media queries, but I think I have that sorted now. The responsiveness works ok for me in the chrome dev tools mobile view. Definitely need to spend some time making it look better in mobile though!

Thank you very much again for your help.

1 Like
9

Yes, you did get it sorted. Nice job!

Glad to have helped.

1 Like