Tribute Page for the most influential man

Hey, I created a simple tribute page for the Prophet Muhammad, the most influential man in history according to Wikipedia.
I’m pleased to hear any feedback or thoughts about it. thnx everyone.
https://fawezz.github.io/prophet-Muhammad/

1 Like

Hey, just a few suggestions:

  • You’re skipping from <h2> to <h4>. All those <h4>s should be <h3>s.
  • You’ve got some “read more” links in there. The link text should be a little more descriptive of what the link points to:
    https://webaim.org/techniques/hypertext/link_text
  • There is a permanent horizontal scroll bar. Granted, it doesn’t scroll very far, but it probably shouldn’t be there.
  • You’ve got a max-width of 680px set on the container section. If I need to increase the text size a lot, that width doesn’t change and I end up with only 2-4 words per line while all of that space on either side goes unused. When you need to set widths on elements with text I suggest you use em units so that the width expands as the text size increases.
  • As I increase the text size the timeline dates all run together, basically making the timeline unreadable. Using em for the max-width on the section container would solve this somewhat because the list would be able to grow horizontally as the text gets bigger. I see at some point you are just removing the timeline as the view port gets too narrow. If you based that decision on em instead of px then it would also take into account text size.
  • Is there a reason you decided to use CSS generated content for the timeline dates instead of just putting the dates in the link text? There may still be some accessibility issues with CSS generated content so I think it would be safer to just put the dates in the HTML. This should not affect styling.
1 Like

Welcome to the forums @Fawezz. In addition to what bbsmooth has given you;

  • 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 2/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.)
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
1 Like
  • mm I just thought it wasn’t as important to be an h3
  • That’s right I’ll fix that now
  • Ouch, didn’t see this one xD
  • mm that’s a good idea didn’t think about that, roger, I’ll do that right now.
  • yes you’re right, I’m working on a fix
  • oh I forgot about accessibility, I made that timeline in a rush so I kinda didn’t give it much thought, but I guess I used CSS-generated content because I wanted to use the anchor tag as a dot. but there are other ways around it using html I’ll think about it.
    and I did I used span inside the anchor tag I think this is better.

Finally, thnx for the feedback, that was super useful.
I committed the changes to GitHub they should be up by now check it out.

I didn’t follow the FCC guidance while creating the page ( the ids and classes and layout of the page ) so this page won’t pass the test because of this.
I chose to work free while delivering an equal or better result.
Shouldn’t I?
I’ll use the W3C validator now.
Thank you so much.

You asked for feedback on an FCC project so it should, at a minimum, meet the user stories.

You are free, if you’d like, to create another tribute page that doesn’t have the FCC requirements to showcase in a portfolio.

1 Like

I guess you’re right, that’s an FCC project after all.
Okay, next project I’ll make sure to follow the requirements.