User story 5 & 12 for product landing page

I have been having trouble with my product landing page for the “responsive web design” course. The trouble occurs with 2 of the user story requirements the first is 5 “When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page”
Here is my code regarding that section:

<nav id="nav-bar">
      <li><a class="nav-link" href="#products">Products</a></li>
      <li><a class="nav-link" href="#sponsors">Sponsors</a></li>
      <li><a class="nav-link" href="#faq">FAQ</a></li>
 <div id="products" class="Products">
<div id="sponsors" class="Sponsors">
<div id="faq" class="FAQ" </div>

The above code works as it should and takes you to the corresponding section of the page but it doesn’t pass the test. I have no clue could someone explain what their asking for exactly cause at this point I am unsure what they are asking.

The second issue I am having is with the " When I click the #submit element, the email is submitted to a static page."
Here is my code regarding this section:

 <form id="form" action="">
    <label>E-mail Address
      <input id="email" type="email" placeholder="Enter your email address"/>
    <input id="submit" type="submit">


I have the action added and I’ve tried it in a bunch of different spots and its just not passing the test either. I can click the “Submit” button and it links but the link does not work ANY explanation is helpful ! I am not just looking for answers I’m looking for explanations ! Thank you in advance!!

Welcome to the forums @brandn.gearhart.

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.

For additional help please provide a link to your pen. With a small snippet of code all anyone can do is guess.

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 (’).

On div ‘faq’ you need to close the opening div tag, just as you did for the others.

Also, if I remember correctly, submit willl only be used as a test for your actual form, and will not submit to anything at this point because a form handler has not yet been declared.

Thank you all for the guidance. The tip of reading past the first line was a huge help :sweat_smile: wish I just did some more looking beside the first line, would have understood the questions more like I was looking for.
I have completed this project thanks to your help!

Thank you! I have looked over this code maybe 1000 times and did not catch that! that solved the nav button issue. That’s currently what I am struggling the most with currently is not catching those small but important errors. However I will not let it discourage me. Practice makes perfect!

Glad to be of some help @brandn.gearhart.

A suggestion for codepen. Switch the Syntax Highlighting on Codepen to help catch errors. Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.

It’s usually the little things we forget to catch.

My main thing was almost always the end ; unless I confused when it needed a ,
Yes, practice does make perfect - and you are going to create great projects!

This is extremely helpful THANK YOU SO MUCH!! :smile:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.