The .nav-link with href="#search-for-specific-flowers" is not linked

HTML-CSS
#1

Please, enlighten me when it comes to the part of my code that I should fix.

#2

@rafaelleduarte1993, 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 failing test says

When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.'
The .nav-link with href="#search-for-specific-flowers" is not linked to a corresponding element on the page : expected null to not equal null
AssertionError: The .nav-link with href="#search-for-specific-flowers" is not linked to a corresponding element on the page : expected null to not equal null

The message is telling you what it’s looking for.
You have a link but there is no target element.

It may help for you to review this lesson.

#3

Should I link the nav-link with the flex-container? The HTML analisation section has not spotted mistakes in my code.

#4

I’ll say yes. It looks like within .flex-container you’ll have your different sections.

I don’t rely on codepen’s analyze. If you want to check for errors in your HTML code use the W3C validator. Codepen’s misses a lot.
And there are errors in your code though they are not the cause of the user story / testcase failing.

One other thing, Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
You have elements out of order. Review this for an understanding of the HTML boilerplate tags.

#5

I inserted the body tag in order to colourise the page in CSS. Is my mistake uniquely related to the order of the content in the page? I would like to maintain the email input at the top. Thanks for recommending the W3C validator.

#6

I’m not sure which tag you’re referring to.

The mistake, the reason the test is failing is because you have no sections that are linked to your nav elements.
I expect (and the test does too) to see something like this in the .flex-container
<section class="features" id="search-for-specific-flowers">

and of course properly close that after the last img.

Then I expect to see something similar for your other two nav-links, “Prices” and “Methods of payment”

Does that make sense?

1 Like
#7

I referred to the body tag! But I realised that this tag is not necessary to colourise the page.

#8

I see. You’re right, you didn’t use it for color.

My point was that it was not placed correctly.

But let’s say you were going to use the body selector to set a font-family in CSS. In codepen, you still do not need to put the body tags in the HTML editor. Codepen knows they are there. You just use body as a selector in the CSS editor and add the property: value: pair to declare the font-family you wish to use.

Hope that makes sense.

1 Like
#9

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