Tribute page: Bees

Hello everyone <3 I finished my first project a little bit ago and finally worked up the nerve to share it. I’d love if y’all could tell me your thoughts/critiques on my tribute page: https://codepen.io/floralmanatee/pen/bGwaXZJ

Hey @FloralManatee!
Welcome to the Forum!

Your page looks good.
There are some things you can change.

  • Please verify your email, so that we can see in full view.

  • You can add text at the bottom like “Made by FloralManatee”.

That’s my feedback.

Thanks and Happy Coding!

1 Like

@codely Thank you <33
Sorry about the email verification thing I always forget about that haha but it should be sorted now. I put some text in the footer, thanks for the advice :blush:

1 Like

I have just one suggesting

  • Decrease the size of the text at the bottom.

The part with the link?

no, the “Made by FloralManatee”.

Ah, I see. Thank you <3

1 Like

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • You have elements out of order. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • Everything the browser renders belongs in the body element
  • Never use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. Currently, the text size on your page will not change using this method because all of the font-sizes are defined with vw units. This means the only way I can increase the text size is to widen my browser window. What if I have really bad eyesight and can’t make my browser window wide enough?
1 Like

@Roma Hello, thank you for your advice <3
I think I’ve fixed everything up now (I changed font-size units to em and used a <div> tag instead of a <body> tag, as well as running it through the validator).
Let me know if anything else is wrong :blush: thanks for the help.