Tribute Page Feedback- Bob Marley

Campers,

I hope everyone is doing well. I just completed my tribute page, I would love some feedback. The link: https://codepen.io/jaymill/full/YzpwVWr

This is really solid. There is not much to critique here, but I’ll give it a shot :slight_smile:

  • The “here” link text at the bottom is not very accessible. Link text should describe where the link is going to take the user. Make it something like “Bob Marley’s Wikipedia page”.
  • The keyboard focus outline around that link is so faint as to practically be non-existent. Use the CSS outline property with the :focus pseudo-class to make the keyboard outline more prominent.
  • The HTML markup of the timeline is not bad, you used a list which seems acceptable. Consider using the time element for the dates.
  • Bonus points for using em units in your CSS break point! You are doing two things with that break point: making the font size a little smaller for narrower views and putting a max-width on main for wider views. I think you can clean this up just a little. First, for the max-width, use em units so it scales with the font size. Also, you can put the max-width outside of the break point. I would think you want this restriction no matter what the view port width/font-size combo is. Second, you’ve already declared the line-height for body/html to 1.5 so you don’t need it again in the break point. So that just leaves the font size change. I’m usually not a fan of forced font size changes like this since people tend to make them too small for narrower screens. But since you are only going to 17px that’s even a little larger than most people have set as the default in their browser, so I’ll allow it :slight_smile: What I think would be best though is if you used 1em (or something very close to that) as the base font size for the narrow view and then increase it using em for the wider view. This way you respect the user’s default font size they have set in their browser (just in case someone has it cranked up really big because they have poor eyesight). In general, I think it is always better to use em instead of px for font sizes wherever possible.

Other than that, this page rocks (pun intended). Great job!

1 Like

Hello,

Thanks so much for the detailed analysis and the suggestions. I’ll put what you’ve proposed into effect right away. I really appreciated the fact that you not only made suggestions but that you also gave rationalizations that made so much sense. I really appreciate you taking the time to do this.

Your page looks good @jahson8. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML 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 the boilerplate for you.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • bob marley” is not accessible
1 Like

I appreciate the feedback @Roma . I have noted the suggestions and made the changes.

1 Like

Nice job @jahson8. Your page is still rockin’ mon!

1 Like