Tribute page (Eddie Van Halen) - feedback request

Hello,

I’m submitting my solution to the Tribute challenge in the Responsive Web Design curriculum. Here is the Code Sandbox url.

I’ve run it through both the W3C HML and CSS validators and the Koa11y accessibility checker without any errors.

The only thing I’m not certain of from a design point of view is that the font I chose from Google Fonts doesn’t render <strong> tags in a very noticeable way in some browsers. It’s fine in Safari and Firefox, but the bolding is less obvious in Chrome and on Code Sandbox.

Thanks - all feedback appreciated.

Your page looks good @richard.a.cairns.

This is because you only choose one font weight and the browser does its best but doesn’t have anything to work with to make the weight bold.

You may have noticed that “nunito” has 14 styles. You only chose one, the light 300. You’d also need to scroll down and select the bold 700. Your link would then have to weights and the browser would now be able to render a bold font.

Once you do that you may want to reconsider having the bullet points showing.

1 Like

Ahh, I still remember how awesome Van Halen I was. I pretty much wore out the needle playing that album. Never heard a guitar like that before. Everyone wanted to learn how to play Eruption. I was never good enough to get the whole thing down. Of course back then you had to learn it by ear or know someone who could teach you all the licks. Kids nowadays have it so easy.

As for your tribute page, there isn’t too much to critique here. It’s responsive, no major accessibility issues, semantics look good. So I’ll point out a few very minor issues.

  • You’ve set a max-width of 50% on the list items, which is perfectly fine for wider view ports, but as I narrow my browser the list content gets squeezed a lot. Eventually there are only a few words per line but yet you have a ton of blank real estate on the side. I would recommend you change the max-width to em units. That way it never gets too big at wider view ports but as the view port narrows it will take advantage of all the available space.

  • For the copyright links, currently your link text is “See page for author” and “CC BY-SA 4.0”. If you heard that text in a screen reader you would have no idea what those links are for. For the latter, I would make the link text “© Creative Commons” and link it to the actual license (https://creativecommons.org/licenses/by-sa/4.0/legalcode). If you also want a link to the original image source then put it after the copyright and make the text something like “Image source.” Also, the <small> element is often used for copyrights and such:

1 Like

Thank you both, @Roma and @bbsmooth.

I’ve implemented all the suggestions in this thread. (I haven’t pushed them up to GitHub or CodeSandBox yet).

The site is better for your suggestions, so thanks for taking the time.