Product landing page problems

There are several syntax errors I can’t seem to fix on my project and none of the links i put in there are working. I already disabled the ad blocker on my computer just in case that was the issue and it didn’t help. suggestions?

https://codepen.io/Rachel-Farley92/pen/VwpvPzG

Your browser information:

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

Challenge: Build a Product Landing Page

Link to the challenge:

@Rachel-Farley92, 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

Does your .nav-link element have an href attribute. (Not that I can see)

I won’t go through all the error message but will suggest you read them thoroughly.

On a side note, you do have some coding/syntax errors. I suggest running your HTML code through the W3C validator.

On a side note, I edited the title of your topic since including a link that cannot be clicked isn’t descriptive.

1 Like

I think my main issue is understanding what the errors are trying to tell me. I will try reading those more carefully.

Also I ran it through a validator and it was giving me errors I couldn’t identify. Like I was trying to give a division element an id and it said I couldn’t so I have it a name instead and it said that’s obsolete and so I gave it a class and it said I couldn’t do that either. Could you recommend a section to review in the html courses about this because I think I missed something important?

This <div id:"example"> is not correct syntax. You need to write is like
<div id="example">. Looks like your mixing up HTML syntax with CSS property: value; pairs.

I did give a hint with the first error message. Your .nav-link element does not have an href attribute.
<li> </li> is one element and nested within it is the <a> </a> element. So the class is in the wrong element.

A quick review of tags, elements and attributes;

HTML tags vs elements vs attributes

HTML tags

Tags are used to mark up the start and end of an HTML element. The following are paragraph tags.
<p></p>

HTML elements

An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
<p>This is the content of the paragraph element.</p>

HTML attributes

An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element’s start tag. An element’s start tag may contain any number of space separated attribute/value pairs.
The most popular misuse of the term “tag” is referring to alt attributes as “alt tags”. There is no such thing in HTML. alt is an attribute, not a tag.
<img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar's foobar.">

@Rachel-Farley92, here’s a suggestion. 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 is so much easier to see the errors now. Thank you so much for that tip!

1 Like

Good, I’m glad that helps.

Let me know if you need any further help.

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