My first ever tribute page: what do you think?

Code Feedback
1

Hello everyone!
I have created my first tribute page, I would like to hear your feedback on how I code, tricks to make it look better (please go easy on me :stuck_out_tongue: )
I still want to make some changes but I feel like this would never end XD so I am making a stop to this and would like to share this with the community.
here’s the link to my tribute page
Thank you for your support<3

2

It’s really good! Nice job!

1 Like
3

Your page looks okay @Hajarbadass. 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 1/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • 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 <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • You have elements grossly out of order. The head element would be before the body element. It would never encompass the body element.
    • The meta element and the link to the stylesheet would be in the head element.
      • Since codepen provides the link to the stylesheet, you don’t need to. Go into ‘Stuff for <head>’ and click the button to add the meta element.
    • Everything the browser renders belongs in the body element.
      • That means the footer element belongs in the body element
  • Clean up what I mentioned and then run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are coding errors you should address.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for HTML misses things which is why I recommend W3C
    • The one for CSS is good. Use it. You have an incorrect property and some duplicate properties. (May have to click ‘Analyze’ more than once after cleaning up one to see any others.
  • The text is hard to read and if you’re relying on the hover effect, what happens on smaller devices that don’t have a mouse to hover?
  • I’m not seeing your page the way you want.
    • I don’t know if a font called New roman…there is one called "Times New Roman" and it should be in quotes when used because of the spaces. (Something you can Google to learn more)