My tribute page ready for feedback

1 Like

After completing my survey form and figuring out how to make typography responsive I may go back into this project and do so. It’s also the first thing I’ve ever coded. Super newbie here.

Nice UI.

I would make it responsive, on mobile views, some texts are spilling to the right.

1 Like

Hello Hat!

I really like the look of your page. In fact, I’m going back into my project and fixing it using some of your layout ideas before I post mine for review.

This is one of the first things I check for when reviewing other people’s projects as well. This article provides a good overview of what “mobile-first” means, why Google has changed their page rankings to account for it, and where web traffic is going in the future. (Hint: It’s already more than 50% mobile traffic!)

As a new programmer you certainly don’t need to learn and begin using everything in this article, but it could help give you some perspective on future projects. Nothing in this project says it should display 100% perfectly on mobile so this is just a friendly FYI that I hope you find helpful. :slight_smile:

One other small detail I noticed here. Your main body and your footer share the same color property for the link <a></a> tag declaration.

/* footer */
a {

This causes your link in the main body of your text to blend into your background-color property. I won’t spoil how to achieve this, and you likely already know how. freeCodeCamp has taught me to value Read, Search, Ask methodology when learning myself and helping others.

Don’t hesitate to reach out if you want more info!

1 Like

Thanks everyone! I will go back in and make everything more mobile friendly before it’s all said and done. I did so on my survey form so I’m pretty sure I know how to do this now.

Nice work, you did well.

1 Like

Looks nice.

  1. Personally, I find the ‘Cinzel Decorative’ font hard to read. It works great for the headers but not for the body text. I would see if you can find a more legible typeface for the body (I think Raleway might work with it).

  2. I would give the li’s some space with margin-bottom.

ul > li {
  margin-bottom: 18px;
  1. I would make the footer a little bigger, give a font-size of like 22px to it.

  2. As already said. The link color on the body text background has very low contrast, I would give it a different color (works fine in the footer). Also, “Click here” is not considered good link text.

1 Like