Check out my Tribute page for Albert Einstein

Code Feedback
1

Guys, please check out my first tribute page on the responsive design projects, on this https://danielkpodo.github.io/tribute/ and please leave your comments, Let me know what you think, and what can be improved.

By the way, I passed all scores:grinning:

2

@narh Good job young man!
Here is what I think you should change to improve the webpage.

  • Remove the white margins on the sides of the page OR add a border to the top and bottom.
  • Make the thumbnail images the same size. They look a bit off right now.
  • Add the top and bottom margin back to the img-caption text to move it away from the image above it.
  • Fix the list items in mobile view on the id=life. Adjust this setting until items take up more width margin: 20px 100px 0;
    albert
    Maybe this will work in mobile view padding: 0 1rem;
    albert2
1 Like
3

Hi @narh, your page looks good. A couple of things to revisit;

  • id's can be used only once. You should use class instead for your life-items
  • you have a lot of pictures without the required alt element. Think about someone visually impaired visiting your page and what a screen reader would do
  • review the lesson about giving meaningful text to links
  • run your code (HTML & CSS) through a validator. For instance, ‘none’ isn’t a valid value for ‘margin’
1 Like
4

Looks good dude. I like the subtle CSS animation with the images. I agree with the comment about the list items in mobile view - they appear squashed when using the mobile view in Chrome DevTools.

5

Looks pretty good.

  1. I would increase the contrast on the li text. Remove the opacity and just darken the text a tiny bit or make the text more opaque.

  2. Considering the years already act as bullet points I might remove the list-style and give the years a color, maybe the same yellow as you are already using.

  3. I’d center and give the ul a max-width. And as said make sure the list isn’t getting squished.

  4. Hovering on the images makes the footer move around, giving it justify-content: center; would fix it. I think it looks better centered anyway.

  5. Consider increasing your vertical spacing between the page elements, it feels a little cramped.

Good job.

1 Like
6

Love the aesthetics! You definitely have an eye for this.

2 Likes
7

@narh when you have lasjorg and Roma helping out on your project you can never go wrong.

1 Like
8

Thanks boss, Implemented the changes you suggested, I must say am most grateful

Kindly revisit the new update https://danielkpodo.github.io/tribute/
and see for yourself.

9

Thanks @Roma I almost forgot I have to validate my site before uploading. I just did the validation online and made all fixes. Your suggestions really did help.’

However, it looks like the css variables is having issues with validation. Guess they need to update their validator

10

Thanks so much, I made the fixes you suggested and it looks good now

11

Thanks, Boss, am humble.

12

Yeah, you right, I just made the changes now. you welcome to check again

1 Like
13

Wooow, am really humble. You guys are all great. I implemented all the changes and it looks better than before

14

@narh Yes, I agree. It looks even better than before, it looks professional. Having a few experienced people look at it and giving feedback can greatly help. Keep on coding!

1 Like
15

Hi @narh, I agree, codepen’s validator is not the most up to date. If there’s ever any doubt you can use W3C validator

1 Like