Tribute page https://codepen.io/bankslado/pen/gNbRgw

I’m a freshman,:slight_smile: and I just done finished my first project. Getting feedback from fellow developers would really be appreciated. Here, enjoy. https://codepen.io/bankslado/pen/gNbRgw

2 Likes

Hey, @Bankslado! It looks very good!

  • You have a small typo (Wekipedia instead of Wikipedia)

  • What if you turn the image into a link? Upon hovering over it, it says “learn more at Wikipedia”?

1 Like

Hey, @sdhutchins! Thank you for your feedback.
That’s a great idea. Thank you for the suggestion:)

Hi @Bankslado, welcome to the forums. Your page is looking good. I’d like to see it full so go ahead and verify your address with codepen.

As an aside, for anything you want to add to the <head> in codepen you can click on the ‘Settings’ button. So copy & paste the link to your font family into the ‘Stuff for <head>’ box.

2 Likes

@Bankslado the project is looking nice. Keep up the good work.

In mobile view the image should be bigger. Here is a screenshot at 420px width.

2 Likes

Hi @Roma, thanks for the review and the advice.
I did verify my account and here’s a link to the full screen codepen:
https://codepen.io/bankslado/full/gNbRgw

1 Like

Thank you @brandon_wallace for your feedback.
I’m struggling with the issue of images getting way too small on a smaller screen, even if the image is responsive. Could guide me on how to fix this issue?

@Bankslado my friend. You have simply added too much padding to the div. Try using rem instead of px.
Pixels are not flexible units of measurement. Rems are.
Here is an example.

#img-div {
    padding: 1rem .5rem;
}
1 Like

Nice @Bankslado, I can see it better now. I see you’ve added the link to the font in ‘Settings’.

  • One thing I was going to say was that in your tribute info you should make the dates bold <b> and I noticed you tried doing so but it’s not rendering correctly on your page. Here’s why, when you imported your font you only selected regular. Go back to Google Fonts and when you select your font it will give you the link. All well and good so far but what you then need to do is click on the ‘customize’ link (next to ‘embed’) and there click the bold checkbox also. Click the ‘embed’ link and put the new link in your page. (Notice it now has weights for 400 & 700). Btw, I did this too with a page I was working on and asked a question about why I wasn’t seeing the font output the way I expected here in the forums and it was explained to me. Here’s the link to my post which includes a quick video the responder made showing how to do what I just explained.
  • On a side note, since HTML5 uses semantics now there’s more of a difference between bold <b> and strong <strong>. They both render the same but when reading code there is a difference.
  • It’s a nit but when you copied some of the info it includes footnotes (the numbers within brackets) for instance [52]. Delete those from your text
  • Get rid of the <br> elements. Most of the ones you put in there are unnecessary anyway but if you do want to do something like that utilize either margin or padding in CSS.
  • review the lesson about giving meaningful text to links
  • there’s more to using accesskey than just putting it in the link. You can remove it

Once again, I think this is a really good first page

1 Like

Thank you @brandon_wallace, that really did the trick!

1 Like

@Roma, Thank you for getting back at me.

  • At first, I thought the bold dates were rendering. I realize the difference after adding the weights for 400 & 700. Appreciate the trick…
  • I read an article on the difference between the <strong> and <b> tags, I now have a better understanding at this thanks.
  • I noticed the <br> elements…
  • The accesskey makes it easier for keyboard-only users to navigate to the link by just pressing w.

Anyways, Thanks again for your time and feedback!

1 Like

@Bankslado, I know it was a lot to take in. Nice job!

1 Like

incredible work, one thing i would say is to decrease the image size because i have to scroll all the way down, otherwise i love your tribute page :slight_smile: keep it up

1 Like