My Tribute Page - Please give feedback

Project Feedback
#1

Hi Everyone,

As a novice coder, I’d appreciate any feedback or advice on my Tribute Page please:
https://codepen.io/igorgetmeabrain/full/dyMGybe

Many thanks,

Doug

1 Like
#2

Hi @igorgetmeabrain !

I think your page looks good.

For codepen, you do not need to include the head tags.

You should not use br tags like this.

     <br><br>

Use css instead.

For me, sometimes the text is hard to read on the transparent background.
So maybe a more solid background would be better.

Screen Shot 2021-03-03 at 1.37.26 PM
Screen Shot 2021-03-03 at 1.37.26 PM918×1000 295 KB

Keep up the good work!

2 Likes
#3

I would decrease the opacity of your background so the text is easier to read. Other than that, it looks great!

1 Like
#4

Your page looks good @igorgetmeabrain. 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 is an HTML coding error you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • 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.
    • “obituary” is not accessible
  • Don’t use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?

I don’t often comment on someone’s design because I’m not the best but your page is hard to read. There’s not enough contrast between the text and the background and it’s a bad UX for user’s trying to read. Search for and use a contrast checker.

2 Likes
#5

Your tribute Page is wonderful @igorgetmeabrain
and Use https://validator.w3.org as @Roma mentioned

1 Like
#6

I have reworked my code now: https://codepen.io/igorgetmeabrain/pen/dyMGybe
Is it better?
I tried to address all of your points, except your advice about accessible links, which I don’t quite understand. I mean I do understand the concept, I’m just not sure why ‘obituary’ in the context of the page isn’t considered accessible and what you would suggest instead?
Thanks!

#7

It’s much easier to read now.

Reading the attached links may have helped.
Someone using a screen reader does not have everything on the page read to them. Hearing the word “obituary” out of context will mean nothing to them.

#8

Thanks for your help @Roma
I did read the links you posted, prior to replying previously, but that’s why I queried, as it still wasn’t clear to me:
"Content authors have the freedom to give meaning to their content in the ways that make sense to them. Still, as a general rule, links should be as concise as possible without sacrificing meaning.

Some authors make links out of entire sentences, paragraphs, or even multiple paragraphs. These long links are almost certainly unnecessary, and are user-unfriendly for screen reader users […]
Similarly, there is no minimum allowable length of link text, so long as the link is not empty. In most cases, links should be words or phrases."

I figured that the word ‘obituary’ as a link in a Tribute Page would be fairly unequivocal in its meaning, but perhaps I should include the whole sentence instead?

#9

Okay, I’ll concede. Your page looks good.

1 Like
#10

I appreciate your help, thank you!

1 Like
#11

No worries. Glad to help. Look forward to seeing your next project.

Happy coding!