Tribute Page Angel the Cat

Code Feedback
1

first time doing this. been doing coding for just one week. If anyone has feedback on anything that would really help!
Thanks

Angel the Cat

2 Likes
2

Welcome to the forums @parumani. Your page looks okay but there are a few things you need to go back and revisit;

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your fonts would go in the box labeled ‘Stuff for <head>’
    • Expanding on the above, your <body> </body> tags are not only not needed, they are in the wrong place.
  • you have a closing </figure> tag but there is no opening one. You should delete it. You have other stray tags too. Try running your code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
  • Don’t use the <br> element to force spacing. Use margin and/or padding in CSS.
  • 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 regular. Go back to Google Fonts and when you select your font it will give you the link. All well and good so far but what you then need to do is click on the ‘customize’ link (next to ‘embed’) and there click the bold checkbox also. Click the ‘embed’ link and put the new link in your page. (Notice it now has weights for 400 & 700). Btw, I did this too with a page I was working on and asked a question about why I wasn’t seeing the font output the way I expected here in the forums and it was explained to me. Here’s the link to my post which includes a quick video the responder made showing how to do what I just explained.

When you’ve cleaned up your HTML, click on the arrow in the upper right and then click on ‘Format HTML’ to give you a sense of how to structure your code so it’s easier for you, and everyone else, to read.

3

thank you for this detailed help! I will work on it. I have never used codepen before and like I said I have only been doing this for a week so I expected there would be plenty of mistakes.
Thanks again!

4

Thank you so much for your help, I got the bold to show up and cleaned up the HTML using the validator you sent me to the best of my ability. My one question is this :
I have made a section called “tribute info” where I made my unordered list to have bullet points on . The validator wants me to use headings throughout the section. However, since this is a list, I don’t want the headings. I have been looking online at examples. So should I be labeling the UL as something else instead of “section”?
Sorry for the trouble, I am looking online and can’t find any info on this. It says it’s the one issue remaining on the validator.

5

Does it have to be a section? Can it just be a div?
Did you follow the link that the validator had on the warning it was giving?
Something to follow up on is to read more about using semantic keywords such as section.
None of that is meant to be harsh. Just a lot more info for you to read than I could ever type.

Now that each of your tribute items starts with a bold date maybe remove the bullet points.

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes 9/10 user stories.
1 Like
6

Thank you so much for your time responding. This helps me a ton. Really appreciate it!
:grinning:

7

I was stuck on 1 of the tests for the tribute page and I actually solved it by snatching a piece of code from your page :slight_smile: thx man.

1 Like