Help/Advice 'Product Landing Page"

Tell us what’s happening:
Describe your issue in detail here.
Hello All,

I have coming up with errors on the following 3 User Story’s:

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 #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).//////

User Story #13: The navbar should always be at the top of the viewport.

Also, the video I am trying to put in the page is not showing up. Let me know where I am going wrong here:

///

What your life will be like after buying a shirt from Dan Flashes:

///

Your code so far

Your browser information:

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

Challenge: Build a Product Landing Page

@jborms210, 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 first 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

here is a piece of your nav

<li class="nav-link"><a href="#shirt-one">$500</a></li>
<li class="nav-link"><a href="#shirt-two">$1000</a></li>
<li class="nav-link"><a href="#shirt-three">$2000</a></li>

as you can see, li is the .nav-link. You cannot have an href attribute there so maybe look at putting that class elsewhere.

The second failing test says

When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).
The #form should have an action attribute : expected false to equal true
AssertionError: The #form should have an action attribute : expected false to equal true

Reading the full message do you understand what the test is looking for and why it is failing?

I’ll let you continue with the rest.

1 Like

Hi Roma,

Thanks for the help. I moved the class inside the to correct that error. Still working the #submit issue.

I am still struggling to find a solution for User Story 12 and User Story 13.

For User Story 12, The error message says I need an action attribute but I think I have one in there.

For User Story 13, I am lost. I am not sure how to make the nav-bar to stay at the top of the page, even while scrolling down.

The full failing message says

When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).
The #form should have an action attribute : expected false to equal true
AssertionError: The #form should have an action attribute : expected false to equal true

here is your code

<form id="form">
  <p> <label id="email-label">Enter Your Email for Exclusive Dan Flashes offers</label></p>
  <input id="email" type="email" placeholder="enter your email" required>
  <input id="submit" type="submit" action="https://www.freecodecamp.com/email-submit">
  </form>

Where is #form's action attribute?

The next full failing message says

The navbar should always be at the top of the viewport.
#header or one of its children should be at the top of the viewport even after scrolling : expected 326.125 to be close to 0 +/- 15
AssertionError: #header or one of its children should be at the top of the viewport even after scrolling : expected 326.125 to be close to 0 +/- 15

You have nothing in CSS that positions the navbar.

I think I got the US 12 figured out. I am still struggling on what code to use to make the navbar stay at the top of the viewport even while scrolling. Do I have to wrap the entire code in a CSS Flexbox or a CSS Grid?

From my previous post. Read the entire failing message.
My response of You have nothing in CSS that positions the navbar. was a hint to give you something to search.
I don’t see what you’ve tried to position your header to the top.