Tribute Page challenge requires a <a> tag, but I already put it

get this error message 7. 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").

But I did put a < a > tag already, and I put it there so then the button is clicked it will direct the user to the link. Can anyone help me to fix the error message?

Click the 3 lines and then test and there says the issue.

freeCodeCamp Tribute

HTML syntax:

  • line 10, 11, 12: <li> tags are missing the matching closing tags
  • line 10 and 12: </i> tags are missing matching opening tags
  • line 1 and 19: codepen expects only what you put inside body to go here, not the body tags themselves (maybe make it a main tag?)

CSS syntax:

  • line 10: font-famiy is not a valid css rule
  • line 19/21: empty #tribute-info selector

TESTS

  • content/4: you do not have an image with id="image" (even if the test passes - you gave the id to a p element, not an image element)
  • content/7: you do not have an element with id="tribute-link
  • layout/1: make the image responsive with max-width and display set to block

So you’re saying inline 1 I should remove the body tag and it would just be <id=“main”>?

Also, how is font-family not valid, Isn’t it what is used to add fonts?

No, id="main" would be an attribute to the element, it can’t be a tag name
I meant a main element, like met in challenge " Introduction to HTML5 Elements" of the HTML/CSS curriculum

You are right, font-family works like that and is valid, but font-famiy is not

I gaved id=“image” to my tag and my score went from 8 to 6.

I don’t see any changes in your pen so I can’t see what happened there. Save your code so I can see what you changed

Ok I fixed the typo.

I added id=“tribute-link” to the tag and my score went up to 9.

Do I add in CSS an img tag and set its max-width to ‘block’ as well as its display?

So I moved the id=“image” to my image tag in HTML. I saved the changes.

I ran the code again but this time it stayed at nine. Instead of changing to a lower grade.

you already have a selector for img in your CSS
max-width is a width, it can’t have block as value. You met max-width in the challenge Make an Image Responsive

good, that’s good

1 Like

Now the last error message is this 1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size. under #Layout.

and just below it as reason for why the test doesn’t pass there is written Try using the "max-width" style property

So do I add max-width and set it to ‘block’?

I did that but the score didn’t change. I added a comment next max-width tag.

block is not a valid value for max-width
you can review the challenge I linked above

that’s not a valid comment for CSS, if you want to add comments in CSS you need to use /* as starting point and */ as ending

I confused JS with CSS. So I added max-width:100%; and height:auto;, like in the challenge, yet the score didn’t change, I am doing it right?

check again the test, now the line below has changed

now it mention the display property, right? then you just need to add that too

1 Like

:+1: Thank you I got a score of 10 and the test tool is very helpful it tells you if an item is exactly centered or not because I was just guessing that it is right in the center by marginally changing the number in left:--%;.