Project - Tribute Page

Project Feedback
#1

Hi guys,

Want to have a quick look at my first project website and share your opinions?
Click here…

1 Like
#2

Hi @rogozinski,
Your page looks nice. I like the color scheme.
Here are my suggestions,
I viewed your page on different screen sizes using Chrome dev tools and noticed that the words on the page get too small on mobile devices. This might give the user a hard time to read through the page.
I’d recommend changing the font size when the page shrinks.

1 Like
#3

Thank you for your opinion. Yh, I still have to work with responsive font size. First I’ve used px, later I’ve changed it to vw (Don’t have much experience with the second one yet :sweat_smile:)

#4

You don’t have to use px for everything. You could use em and rem for relative font sizing.
Just so you know, em and rem are preferred over px.
Know about em and rem in CSS

#5

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

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script should be included, with all tests passing, when you submit your projects.
  • 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.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
  • 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
#6

Wow. Thank you Steve. That’s pretty detailed analysis. Glad that we’re having you here. I will try to implement your ideas asap!