I want feedback for my Tribute Page project

Hey! Here’s the link to my tribute page project of Responsive Web Design course, I would like to get feedback about it.

Website - https://codepen.io/MrAI_Rohan/full/WNEXrPj
Code - https://codepen.io/MrAI_Rohan/pen/WNEXrPj

1 Like

Your page looks good @Mr.AI_Rohan. Some things to revisit;

  • 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). (be wary of duplicate selectors. they can make maintenance a nightmare)
      (The one for HTML misses things which is why I recommend W3C)
  • 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.
    • his wikipedia page” is not accessible

This is a suggestion. You don’t have to change anything if you don’t want to. As for semantics you may want to look at the difference between the strong tag and the bold tag. While they both render the text the same there is a difference in using one over the other.

1 Like

What do you think could be better than his wikipedia page? I can’t think of any.
I used validator and its very useful. I had two selectors of #title and I corrected it.
Thanks for your feedback!

With a screen reader the whole sentence will not be read to the user. Hearing “his wikipedia page” will not make much sense because it is out of context.
You could have the link be “Read more about Steve Jobs” and either include the rest of the sentence without it being part of the link or just drop the end of the sentence altogether as that as a link is understandable and accessible.