Completed Tribute Page! Feedback?

Code Feedback
1

I’ve finally worked through my Tribute Page, with the help of a few people here, and now it’s complete I would appreciate some feedback? The link to the project is here, and the link to the actual submission piece is here. Any constructive criticism on both the code aspects and the aesthetic is appreciated!

P.S. The only real ‘issue’ I still have with the page is that the enlarged image towards the bottom of the page is a little janky, what with the dark outline stopping abruptly near the top of the page, and that you have to mouse off the image and background to zoom out again. That, and as far as I am aware I can’t include the second html page in the pen?
Anyway, enjoy!

1 Like
2

For the most part this is very good. Just a few suggestions:

  • Put a max-width on the content (I would use em units) so that the line length doesn’t get too long.
  • The image at the top gets rather tiny at narrow widths. I would make it fill out the available space a little more.
  • The link text at the bottom could be better (it’s not very accessible). The link text should state what it is linking to. You could reword the sentence to something like “Learn more about about Terry Pratchett” and make the whole thing a link.
  • Not crazy about the hover to enlarge thing. There is no way to shrink it back down except to move your mouse off of the image. Also, accidentally hovering over it will enlarge it when you don’t want to which is very annoying. I would prefer a link that you can click to enlarge.
  • Don’t skip heading levels (you went from h1 to h3).
1 Like
3

Hey there,

great job so far!

My ideas:

  • I use a wide screen and the text is hard to read, because the lines are very long
  • you can increase the readability of your code by 1. clicking on the small arrow on the right side of the code box and 2. clicking Format HTML/CSS
  • you can get a code validation here by pasting your HTML code into the body (without the script)

Keep us posted!

1 Like
4

Thanks, that’s super helpful!
Would I put the max width in body? And I’ll change the link and headings, too. I only really included the image hover as a ghetto alternative to actual JavaScript but I was only experimenting anyway, since the original image is massive!

5

Oh wow that is really useful, I’m doing all this of a raspberry pi so my text editor options are limited!

6

Sure, you can put it on the body. I see that you did and now the content is not getting too wide as I widen the browser. Also makes it easy to center using auto margins on the side. You may not always be able to do this, it will depend on the needs of your page, but in this case it works just fine.

Oh, also forgot to mention that the color of the link at the bottom does not have enough contrast with the background. You can check for color accessibility at
https://webaim.org/resources/contrastchecker/

1 Like
7

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

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should be aware of and address.
  • Don’t use <br> to force line breaks or spacing. Use another p element if needed.
1 Like
8

I like the color scheme. It is very nice.

1 Like
9

Thanks for that, turns out I had already fixed these errors save the using <br> incorrectly on the master copy of the file, but not copied the repairs over to the pen/project, because I had the images linked directly to the folders on the file but had to muck about changing the src to the image links themselves. I think it’s resolved, just need to adjust the link color (I had previously used lilac because if you know, you know).