Please assess my Tribute Page

Code Feedback
1

Can you please check my Tribute Page? I want to know more about how to style pages with CSS. I’ve checked it with HTML and CSS validators. They say it’s OK. What do you think?

Thx, have a great day! :slight_smile:

1 Like
2

It looks nice. I like the use of srcset to switch the images.

  • Look for a nice font you like (google fonts) and add it to the page.

  • Giving main more width at lower screen sizes does give more room for the text but it also is causing some asymmetry. I would have the #tribute-info and #wiki elements widths be more similar. Maybe just let the #wiki element be full width as well (in the media query) and add a bit of padding to the main container. You might want to add box-sizing: border-box to a universal selector * to make the size calculation easier and avoid overflows with padding on the main container (if you add padding to the main container).

  • Set the footer height to a min-height instead. If you make the footer a elements flexbox containers you can center the icons vertically inside them (align-items: center).

Good job, keep at it.

2 Likes
3

Hello!

All in all great job, interesting topic, this is one of the better tribute page projects I have seen on here.

A few tips for improvements:

  • Make it a habit to set your padding and margin to 0 and the box-sizing to border-box under the body CSS selector. This will remove all default values and give you more control over the UI.

  • Use rem for the font sizes. This allows the user the set the sizes in their browser and is great for accessibility. Rem units also work well with visual design principles.

  • I found setting the font to 1.25rem and to 1.15rem for smaller screens make your article look better, but that’s a matter of taste. Some will find the bigger text fitting for the topic.

2 Likes
4

Thank you so much for your feedback. I will improve this tribute page via box-sizing: border-box. I’ve just learned about it yesterday by repeating fCC web design course; now I start with this CSS rule in all my HTML projects for better cross-browser support.

Also, I’ll try to add flexbox. I used to struggle with this topic, but I found some nice and free interactive exercises on the Internet, and I now feel more confident to use flex.

Thank you

5

Thank you for your feedback. I will look into rem. I find it difficult to distinguish between em, rem, and %. The only thing I know is that px is a bad choice for cross-device support.