Help with anchor id tribute page

Code Feedback
1

https://codepen.io/awright185/pen/LYReMGR?editors=1010

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

The more information you give us, the more likely we are to be able to help.

3

Continuing the discussion from Help with anchor id tribute page:

4

Hi

Just need some feedback on my tribute page and some guidance.
I added the element with “id=“tribute-link”” with link to another site. test results cameback as failed.

I thought the img was responsive failed that as well.
5

Can you please give your code??

6

@davonwright1988, some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 5/10 user stories. 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.)

So more than just the two issues you mentioned. Regarding them, read more than just the first line in the failing message. It will tell you what it’s looking for and give you help on how to resolve it.
For instance, with the .tribute_link 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").
The target attribute should be set to "_blank", in order for the link to open in a new tab : expected 'blank' to equal '_blank'  
AssertionError: The target attribute should be set to "_blank", in order for the link to open in a new tab : expected 'blank' to equal '_blank'

Do you see what the test is looking for versus what you have?

7

Thank you.

I fixed the issues updated tribute.

8

Did you save after making changes?

I’m still seeing your page

  1. without the test script
  2. with 5/10 user stories passing
9

I thought it was autosaved.
lesson learned.

Done
https://codepen.io/awright185/pen/LYReMGR

10

Looks better @davonwright1988. Some things to revisit;

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 9/10 user stories. 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.)
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (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.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • Mentioning because you have elements out of order. The head element would not/should not be in the body. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML 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 lesson about giving meaningful text to links.

Users are not seeing your page the way you intend.

  • Not sure if you noticed but even though you’re using the <strong> tag the text on your page doesn’t render as such. This is because when you imported your font you only selected one weight.
    You should select the normal weight (400) and the bold weight (700) when you link your font. So for instance, the Raleway link would look like;
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">

On a side note, in the HTML and CSS sections click on the chevron (down arrow) in the upper right and then click ‘format’ to make it easier for yourself and others to read your code.

11

Wow I overlooked so many things.
Thanks for looking over my code and the feedback.

1 Like
12

No worries. Here to help.
Let us see it again when things are cleaned up.

13

Cleaned up code.
https://codepen.io/awright185/full/LYReMGR

1 Like
14

Looks good, well done! Nice layout and design.

15

Good job cleaning things up @davonwright1988. The formatted code is much easier to read. Somethings to revisit;

  • Run your code through the W3C validator again.
    • You’re using the title element incorrectly. title is a reserved keyword that is only used in the head element. Maybe using an h1 element here to give your page a title is a better idea. A few other minor things to clean up too.
  • The heavier weight is still not showing for your fonts. You need to select both font weights for your fonts if you want the browser to display the heavier weight.