Tribute Page for Free Code Camp

Code Feedback
1

I would like some feedback…

2

Your page looks good @epartney27. 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.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
      Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
      (The one for HTML misses things which is why I recommend W3C)
  • Since you do not have any footnotes it’s best to take the footnote number out of the text
3

Overall this is very good. I do have some accessibility enhancements to offer:

  • The text is very hard to read because it is so compact. Definitely add a line-height of at least 1.5. Also, do not center it (remove the text-align: center on the body and center those elements that need centering individually). Give the content a max-width (preferably in rem or em units) so that the line length doesn’t get too wide, which can be hard to read for some people. Finally, I am personally finding it very hard to read on that background. I would suggest you put some sort of light, solid background color at least behind the paragraphs of text.
  • Don’t skip heading levels. You start off with an <h1>, which is perfect, but then the next level down is <h3> so you’ve skipped <h2> completely. Turn all of the <h3>s into <h2>s and <h4>s into <h3>s.
  • The link text at the bottom doesn’t need to include the word “here”. I think the phrase “Full Documentation” could be reworded as well. Perhaps something like “More information on Mahomes’ record-setting 2018 MVP season”, making the entire thing a link.
1 Like
4

I did i just copied over the code to a cleaner one without it, But i promise i checked it with that

5

Thank you so much, This helps me a lot

6

For the people in the future this is a wide open topic to post suggestions as i will be updating it @bbsmooth @Roma Shout Out to you for helping me

7

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