Need Honest Feedback on my Tribute Page

This is my first attempt at coding and I am proud of it, but I am sure that it is probably sloppy code wise. Could you all give me some feed back so that I can learn from my mistakes please? Project Link - https://codepen.io/k4custom/full/yPNLmO

It’s pretty good, I dig it, but it doesn’t seem to be responsive. When I view it on a mobile I have to scroll sideways to see the text. To fix that add the code below to your css file to see how it should look.

@media screen and (max-width: 717px) {
  p.ex {
    width: auto;
    height: 10%;
    margin: auto;
  }
  
  body {
    padding: 0px 10px 0px 10px;
  }
}

.larger-image {
    padding-bottom: 20px;
}

For more info research media queries.

Thanks for the feedback and the pointer, I had noticed the same issue right after I posted it. The addition to the CSS file worked beautifully! I will continue to research like you suggested to expand the tools in my toolbox.

Again, much obliged.

Congrats k4custom!

A few suggestions (I am not an authority on the matter, by far, so just assimilate what do you think makes sense):

  • I think you could name your classes in a more semantic way. I believe you want your h1 to look unique. And all h2 to look the same between them, right? So why use classes like “red-text”, “blue-text” and “text-center”? You could just include this styling in the h1 and h2 tags.
    Classes with more literal names like these are usually used in CSS Frameworks, like Bootstrap. But this is because the framework doesn’t know the context that it will be applied. You know.

  • The p indeed needs a class, but you could use a more readable class name. “Ex” doesn’t mean anything. Think about “content” or “description” or even “explanation” (is that what “ex” stands for?)

  • The footnote “**Reference material available…” is in a h3 tag, which is supposed to be used as headings. It is better if you use a footer tag. Or better, a p inside a footer tag, as you will want to include the image link in the footer as well.

  • The image link in the footer is not working. Probably the source.

  • Regarding the p font. I am not a designer, so it is just a feedback as a user: a dark grey font on a light grey background makes it difficult to read, as it has low contrast. The thin font type makes it worse. Consider making the font color much darker, black or almost black.

  • Also, three different types of font (“Economia”, “Julius Sans One” and “Open Sans Condensed”) seems too much. The overwhelming advice out there is just to use pairs: one font for the headings, another for the body.

This resource is more useful regarding typography than anything I might say: http://pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography

I hope it helps! And you did a lot of things right, I just focused on the things you could improve. After all, that’s why we are all here! (and the “need HONEST feedback” on the title encouraged me :wink: )

Good luck!

Thank you for the honest feedback. I appreciate the closer look to help me fine tune and improve. Still working out the kinks in making some more changes, definitely a larger learning curve for me with this than with other ventures.

So after some more tweeking and adjusting, a ton of research, I have a small problem. The link that I anchored to the image at the bottom is functional on a PC, but is not via a mobile device(iPhone and iPad). Any suggestions on a solution?

fixed the problem by adding target="_blank" behind the link:grinning::grinning: