Can't finish Product Landing Page

HTML-CSS
1

Hello everyone,
thanks for your time and help. I can’t finish the user stories , 3 left:

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) that confirms the email address was entered and that it posted successfully.)
(User Story #15: My product landing page should utilize CSS flexbox at least once.)
Link:
https://codepen.io/anon/pen/oyKNGX

Best regards,
Pedro

2

Story 5: you need to create a navigation with jump links and add sections to your page
Story 12: you need to add attributes to your form tag
Story 15: You need to use flex box in your CSS

Look a previous lessons in the HTML/CSS sections.

3

you can always refer to the code in the reference page that FCC gives for each project. You will see how they pass these same unit-tests there…

1 Like
4

I am now roasting in User Story 5 although I easily set up a navbar for navigating to other sections of the page. But my code doesn’t pass the test:

Here is one of my navlinks that does navigate to another section of the page, yet does not pass User Story5:

    <li class="nav-link"><a href="#section1">Section1</a></li>

Here is the navbar code in the reference page:

  <li><a class="nav-link" href="#features">Features</a></li>

After seeing the reference page navbar code, I thought that I should move my class declarations from my <li> elements to my <a> elements. I tried this and not only was I still not able to pass the user story 5 test, my navbar lost the ability to navigate to other sections of the page.

Lost, lost, lost . . .

5

You should move your class=“nav-link” from li’s to “a” tag like :

<li><a href="#section1" class="nav-link">Section1</a></li>

and so on for each navigation link.

2 Likes
6

here’s one part of your code:

<li class="nav-link"><a href="#section1">Section1</a>

and here’s the reported user story 5 error details:

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

In your case, the test is looking for ‘href’ inside the ‘nav-link’ element.
Your nav-link element is a li and is not an href…
And your href element is not a ‘nav-link’ element.

So … now you know you need to make each href element a nav-link element to pass…

8

Simply put, your suggestion got me to pass User Story 5.

But I do not understand how I failed User Story 5 earlier when I tried lines like the following:

<li><a class="nav-link" href="#section1">Section1</a></li>

The “Original Trombones” code was similar yet passed User Story 5:

<li><a class="nav-link" href="#features">Features</a></li>

Thank you.

9

Simply put, your suggestion also got me to pass User Story 5.

But I do not understand how I failed User Story 5 earlier when I tried lines like the following:

<li><a class="nav-link" href="#section1">Section1</a></li>

The “Original Trombones” code was similar yet passed User Story 5:

<li><a class="nav-link" href="#features">Features</a></li>

Thank you.

10

you may have triggered a different error within the same story.
Always read the assertion text to see exactly what failed.

11

thanks you help alot