Project Feedback: Tribute Page (Bill Gates Foundation)

Code Feedback
1

Hi guys,

this is my version of the Tribute Page project. I tried to keep it simple and clean. Front End and especially CSS as always been a struggle for me. I am more a backend kinda person :slight_smile: . However, I am trying to overcome this weakness and master CSS, one step at a time.

Please leave some feedback if you a chance. Every insight is welcome.

Thanks, guys.

https://camillacabto.github.io/TributePage/

3 Likes
2

Hey @camillacab!

I think your tribute page looks beautiful. The only thing I noticed was this.

scroll?
scroll?1882Ă—556 285 KB

You have a scroll setup to see the rest of the content but I think it might just be better to choose a smaller font size and get rid of the scroll all together. The scroll could work for phones but I don’t think it is necessary for a larger device like a laptop.

Hope that helps!

Happy coding!

1 Like
3

Hi @jwilkins.oboe,

Thanks a lot for your feedback. That was awesome! Just fixed the scrolling in the first section of the webpage. I think it is more responsive now.

:smile:

1 Like
4

Hi @camillacab :slight_smile:

I think this looks great! My only suggestion would be that on smaller screens, your banner-div takes up a lot of space:

gates1
gates11161Ă—1092 192 KB

Getting rid of height: 50vh; improves this imo:

gates2
gates21161Ă—1097 237 KB

1 Like
5

Hey @camillacab. Very good project! It’s very clean and minimalist! But, some suggestions:

  • Making the body text italics is a bad UX. Some people find italics text irritating. So, using it for body text (not header and titles) would not be good.
  • On smaller screens, the image is so small and is on the left side. If I was you, I would keep it on the top of the text so that it’s more viewable. Screenshot attached:
    image

Anyway, you did a great work! Best of luck for next project.

1 Like
6

Hi @gordon_woodbine and @paulsonstech ,

Thanks a lot for your feedback. I fixed the top banner, added media queries to moved the photo above the description, decreased padding and font size for smaller screens. Also changed the font from italic to regular.

Thanks again, guys. Your comments made my project much better, although still simple.

Screen Shot 2020-10-27 at 10.34.33 AM
Screen Shot 2020-10-27 at 10.34.33 AM696Ă—1356 185 KB

1 Like
7

Welcome to the forums @camillacab. Your page looks good. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There is an HTML coding error you should be aware of and address.
  • Review the lesson about giving meaningful text to links.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • If you want multiple paragraphs use multiple paragraph elements.
1 Like
8

It looks great! Well done :slight_smile:

1 Like
9

Thank you, @Roma. Will fix the issues and read through the content you shared.

1 Like