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

1

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

2

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
3

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?

4

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

5

I gaved id=ā€œimageā€ to my tag and my score went from 8 to 6.

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

7

Ok I fixed the typo.

I added id=ā€œtribute-linkā€ to the tag and my score went up to 9.

8

Do I add in CSS an img tag and set its max-width to ā€˜blockā€™ as well as its display?

9

So I moved the id=ā€œimageā€ to my image tag in HTML. I saved the changes.

10

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

11

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
12

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.

13

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

14

So do I add max-width and set it to ā€˜blockā€™?

15

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

16

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

17

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

18

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?

19

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
20

:+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:--%;.