Feedback wanted please- first tribute page

Code Feedback
1

Hi, I decided last week to learn how to code as a way to keep my brain active in my spare time. I have a feeling that this will quickly become more than just a brain-booster.

I’ve just created my first tribute page and feedback is greatly appreciated . Hopefully I’ve done that link right lol.

I feel I’ve done a good job for my learning period but there could be ways to do things better or easier. If so im open to any helpful direction.

thanks😀
Niq

1 Like
2

good working, looks neat and simple, but has some small issues.

First thing is the media size, some images are very heavy!! And needs too much bytes! to load! like christmas day image.
Try to use just perfectly fit size images! not so small, not so big.

The next issue is about the absolute unites like pixel. try to use relative units like em, or vh, vw (more reading here)

Images also causes the horizontal scrolling for small screens. You may set a default image width (with height as auto) for small screens, and also maximum size when screen is big. example below

.img_dude{
width: 90%;/*90% of the screen when screen goes smaller than below*/
max-width:10in; /*for big screen, no more than 7in please, you set 500px./*
height:auto;/*automatically set the height based on width*/
}

Please note the above css rule might not work probably with your work, since you have kind of different layouting by html. For example you may not host your images with div which they control the size and the layout of the images, or better fix it.

There is also some clear area at the end of the page which could be removed.

For first two images, you may considering following more simple approach too

<div>
    <img class="img_dude border" src="https://sirpeterblaketrust.org/app/default/assets/forum/uploads/Peter%20crew%20talking%20red%20socks.CF.JPG" alt="Black Magic's Team New Zealand">
    <img class="img_dude border" src="https://sirpeterblaketrust.org/app/default/assets/forum/uploads/Off%20Shore%20racing%20dreams%20becomes%20a%20reality.JPG" alt="First Whitbread Race">
    
</div>

This is also very good you set alt attribute for each image, very good.

Again, keep an eye about relative units, they are good.

Keep going on good work, happy programming.

1 Like
3

Its looks cool. Good job!

1 Like
4

Looks like I’ve got some reading to do. Your comments are really helpful. The image sizes I was having thoughts about and I hadn’t heard about relative units so I will definately look into them. Thanks so much :blush: