My Tribute-Page

Code Feedback
1

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
2

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.

3

Thanks Buddy. Your feedback give me more energy.

4

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.

5

Thanks Dude,

Really nice suggestions. I will consider.