First HTML/CSS project: Tribute Page

Code Feedback
1

Check out my first freeCodeCamp HTML/CSS project; the Tribute Page! Let me know what you think, any feedback welcome!

Thank you!!

2

Hi @russ430, welcome to the forums.
It’s a good looking page. Just a couple of things;

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • make your page responsive. Right now, only the main image is responsive.
1 Like
3

Thanks for the advice Roma! I definitely need to shape up the responsiveness of my projects. I appreciate the feedback!!

4

Beyond the already mentioned responsiveness, I would use a more intuitive class name than tbrady1. Overall, it’s really outstanding from a design standpoint. I’m mostly jealous my first project didn’t look that good!

5

You got everything in and passed so on the code side, good.

There are some design elements I highly recommend fixing now as it will be a lot more difficult to fix in the future if they become a habit.

  1. Color Balancing- replace the white with a mid-tone gray. Everything else is very dark and the lightness contrasts to much. I would play around between #333 & # 777. If you still want to stay light, try something in the silver category like #d2d2d2

  2. I would stylize your image caption so it isn’t off to the side it like it currently is

  3. When adding elements to a page. Spacing is a huge factor. Most of the spacing on the site is decent already; however, add spacing to your title-box class so it isn’t directly under the picture. maybe a margin-top: 50px;

  4. Lastly, Your images are “bleeding” out of their containers. pay attention to overflow and your margins. A simple fix is to apply overflow: hidden; to the parent element. However, You may want to play with the sizing so you can get the image sizes the same as the info panel sizes.

I know this is an early project, and this is not meant to deter you in any way. I just wanted to point out a few things that stood out immediately without looking at the code. Best of luck moving forward.