Tribute page failed 1 test - help

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Hi I’ve test the tribute page and it failed test number 7, regarding the a element with the tribute link

Your code so far
Here is my code: https://codepen.io/RadziMagoda/pen/MWEbeVj

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

2

@Radzi, 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 message says

I should see an <a> element with a corresponding id="tribute-link", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to "_blank" in order for your link to open in a new tab (i.e. target="_blank").
<a> element with id="tribute-link" must contain an href attribute 
AssertionError: <a> element with id="tribute-link" must contain an href attribute

Do you understand what the test is looking for?

A couple of things;

  • Remember an id must be unique within the document
  • Do not include the style tags in the CSS editor. They are HTML tags and would not appear in a stylesheet. Leaving them there will cause problems.
3

Alright I’ll go and correct this and tell you how it goes. thanks.

4

It passed now! Thank you very much
Could you please critique my project and give me some pointers for the future?

5

Yes I realised that there was another copy of the id in the section element and that’s why it didn’t pass. Thanks

6

Your page looks good @Radzi. Some things to revisit;

  • 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.
    Mainly mentioning because you have elements out of order. Everything the browser displays belongs in the body element. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
      Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “link” is not accessible

In the future, to get more eyes on it’s best to post in the #project-feedback subforum

1 Like
7

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