My Tribute-Page

Aslaam-O-Alaikum and Hello to every one!

I am new to Web Development. i have just done my project of Tribute Page. Please help me out by giving your feedback. how can I improve it more although my page has passed all tests required.

Regards,

here is link:
https://codepen.io/arhamdaudsandhu/pen/OeKLLZ

1 Like

Congrats on your first completed project ! It looks pretty good and the page has some repsonsiveness. I even like the hover effect on the image.
There are just a an error in your code that isnt too bad

  • Your a tag isnt closed in line 16

Its also a good idea to keep ids in html unique. Ideally ids should only be used once. In this case it doesnt really matter too much but its a good idea to keep that in mind in your future projects.

Thanks Buddy. Your feedback give me more energy.

There isn’t really too much to say.

  1. Maybe put the background-color on the body.

  2. Add a transition to the hover.

#image {
  transition: transform .3s ease-out;
}
  1. Technically the hover causes an overflow on small screen size, but it isn’t a huge deal. One thing that would be good is to give the #img-caption some margin-top so the image doesn’t get so close to it on hover.

  2. Give the paragraph container a max-width and center it. Text is much harder to read if the lines run too long because the eye has to travel too far when going to the next line.

#tribute-info {
  max-width: 980px;
  margin: auto;
}
  1. Add some more line-height and increase the font size on the paragraph. Maybe pick a nicer font
#tribute-info p {
  line-height: 1.2;
  font-size: 24px;
}

Good job.

Thanks Dude,

Really nice suggestions. I will consider.