Review for Tribute web page

Code Feedback
1

I’ve completed the Responsive Web Design certificate from Freecodecamp, on of the challenges was to make a tribute page, so I did one and I need any suggestion for making it better or for code fixation.
Thank you.
LINK : https://codepen.io/anasshay/full/qBmrYqX

2

Few things.

  1. your img is too long, it looks like its stretched a lot. Also, some of your text runs up into your img
  1. I think you can allow for more than 5 words per line. Look into wrapping your text in <p> tags. Right now your three paragraphs just run into one big paragraph.

This is on mobile view

1 Like
3

Your page looks good @anasshay. 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, with all tests passing, should be included when you submit your projects.
    Your page passes 8/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. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
    Mentioning also because you have elements out of order. Everything the browser displays belongs in the body element. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “click here” is not accessible
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    There’s a horizontal scrollbar on large and small screens
1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.