Help me improve! :D

Hey guys, how’s going?

This is like my… 30th try making the tribute page and this time I think it is ok at most, so I want a little feedback and if you have anything that can be improved don’t think twice, tell me :smiley:

https://codepen.io/Lukhaz/pen/GRjPmPJ

One thing I would highly recommend you change is the font sizing. You are currently using vw units which means that the font size is completely dependent upon how wide I can make my browser. What if I need the font size to be bigger but I can’t make my browser any wider? This is an accessibility issue. The user should ultimately be in control of how big they need the font size to be. Change this to ems like you are using for narrow view port widths.

So for font its better to keep it in absolute units rather than relative?

em is a relative unit. It changes as the font size changes. Users are able to manually adjust the font size as needed. Usually this means increasing the font size in order to be able to read the content on the page. If you don’t know how to do this, using Firefox go to the Edit->Preferences menu, scroll down to Zoom and activate ‘Zoom text only’. Then while holding down the Ctrl key scroll with your middle mouse button to increase the text size. When you use vw units nothing will happen. But if you use em units the size of the text on the page will increase.

It is true, in chrome happens as you say. I’ll keep that in mind, it’s handy. Thanks man

I was looking for the links then I found out the whole text was the link. I’d recommend only using short phrases or words for the link, and it should be highlighted so that the user would know which is the text and where is the link.

1 Like

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (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>’
    • You have elements out of order. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Google and review semantic elements. All the information you have in footer is not the appropriate use of the footer element.
  • As mentioned, a tribute link should be short, informative and accessible.
1 Like