Stuck on step 5! Product Landing Page - Build a Product Landing Page

Building a landing page and I’m one of the new-to-coding people stuck on step 5. I feel like I’ve exhausted my knowledge so far. Code is linked below is jsfiddle.

Step 5 console error:
// running tests
Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).
// tests completed

I imported the FCC js into codepen and ran the checks there, all 16 pass there but not within the FCC project page/editor. IDK what to do at this point. I’ve tried to link to other ids, tried casing, re-arranged properties, and comment out each <a> one at a time to see if I get the same error and it fails step 5 regardless. I’m just confuzzled since it passes in code pen.

I did write all the code within FCC and only copied it to code pen / jsfiddle to validate.

Help meh Tom Cruise!

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

this code is confusing the test

        <a class="nav-link" href="https://game.valeunleashed.com">
          <button class="demo-button">Play</button>
        </a>

you should not use nav-link class unless you want the test to check the link exists in the current page. (which it doesn’t in this case)

1 Like

That was it!

So for my own training, how would I know this is a problem on a future project within FCC? How did you figure it out?

Edit: I made the assumption the test was only looking at the <a>'s within the nav-bar. Did you use a special tool or was it just pure experience with helping other FCC users on these types of questions?

thanks for asking. Very few people bother to ask me how I found their issue, and knowing how is actually very important.

I used a code editor.
I put all your code in my editor and started out by confirming that the nav-links where all correct by searching for each id to see where it was being referenced. This all turned out okay so I turned my attention to finding all occurrences of nav-link references. And that’s how I found your extraneous use of nav-link. (I just did a search on all occurrences of this word and found too many…)

Ok that makes sense. I would guess that you would also have to have some experience knowing how FCC is running the checks in order to know that could impact the results.

I’ll keep this kind of thing in mind for the next projects.

Thanks for your time!

1 Like

I personally have never looked at fCC’s code but I have answered enough questions to know some of the common errors. It would probably help if I did know the backend test.