Build a Tribute Page : V3.0 Feedback Please!

Hello campers,

I wanted to introduce my dog and how awesome how she is.

Please provide me any feedbacks,

Thank you in advance!

https://build-a-tribute-page.netlify.com/

6 Likes

These don’t matter for a toy project, but you might want to consider:

  • Optimizing image file size. (+200kb is quite large for the given size)
  • Adding alt attribute for the image.

And you should never use identical value for id attribute. You don’t want undefined behaviors.

1 Like

Hello, your page looks nice. Suzy is cute :wink: Have you tried to validate your page with HTML validator? https://validator.w3.org It will help you to find errors and places where you need to improve things. Add alt attribute for accessibility. Fix duplicate ID’s. Good luck :wink:

Thank you for your suggestions, I will work on them!

Do you have any ideas on how to compress jpg images?

I used https://compressjpeg.com but that didn’t help much.

Simply compressing the image will give you significant result, but it is not enough. Image optimization requires some experiments; one click solution to image optimization won’t help you.

You can try resizing and dropping image quality to fit the purpose, then compress the altered image. By this way, I’ve compressed 3.8MB image to 14.8KB in reasonable quality.

It is best to use paid tools, but http://resizeimage.net/ includes bunch of free tools.

I made the updates that you suggested @gunhoo93 @edvinasurbasius credits to you!

Feel free to give more if you have any, thanks :slight_smile:

1 Like

Hello. Before script tag add </div> You forgot to close main element’s div :> I see you optimized images. Nice job. Good luck.

oops haha, rookie mistake. Thanks.

1 Like

Cute puppy, nice design. Thumbs up for using netlify. :+1:

  1. If you add align-items: center; to the .grid, your layout won’t “break” as much on the most problematic screen width (1170px) and the overlay text will stay in place better.

  2. I would add the border and border-radius to the image container (.cell) instead of the image, that way you don’t loose the rounded corners and borders on hover zoom (not sure if it is intended).

Thanks! let me make that fix when I get back home :slight_smile:

@lasjorg Thank you, I made the changes and it already looks better!

Please let me know if there is anything else that I can add or fix :slight_smile: