Tribute Page to my fav singer - Feedback welcomed

Hi all,

It would be great if you can take a look on my tribute page.

I had some issues with it and maybe some of you can help:

  • I was building it in the Visual Studio Code, the img supposed to be the full width of the screen, however it wouldn’t let me pass the test for the responsive img, so I left it with the side margins.

-Background image placed on top of the page - on the smaller screen the sides are cut off. Is it possible to resize it as with the normal img?

I’m open to all the feedback and suggestions.

Thank you,
Aleks

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • 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.
    • website” is not accessible
  • To help with responsiveness it’s best to use relative units. I notice you have a mix of em units mixed in with hard coded pixel units.

On a side note, the tribute link is very hard to see. There’s not enough contrast with a dark link color on a dark background.

2 Likes

I really love the design of your tribute page. Its cool

1 Like

Thank you @adekunlejulia !

1 Like

@Roma thank you for the feedback!
I run the code through the validator and fix the issues, also made the link accessible and changed the font colour.

Thanks a lot!

Good job cleaning things up @aleks_t.

Just remember, not every device has the ability to hover.