Tribute Page Project on Niki Lauda

Code Feedback
1

Hello fellow code campers,
My name is Emir Velazquez and I am an aspiring web developer. I finished the first project and would like and welcome some constructive criticism and feedback. Thank you, have a great day and stay safe. https://emirvelazquez.github.io/tributePage/

2

I am quite impressed with this. I was expecting those bubbles on the timeline to break as I increased the font size but they handled it quite nicely. And the responsiveness is good as you narrow the window. So just a few suggestions:

  • I don’t think you need to make the font size smaller for narrower viewports. The white outline text becomes especially hard to read at the smaller size. Even at the narrowest width I can make my browser there is still plenty of room to leave the font size at what it was for bigger widths.
  • Speaking of breakpoints, I think you should consider basing your breakpoint on ‘em’ instead of ‘px’. Em takes into account the font size that the user is actually viewing your page width. For example, if I have my browser width at just over your breakpoint it looks fine at the default font size. But once I start increasing the font size the bubbles can only fit a few words per line and some of the lines start breaking out of their bubble. Since the breakpoint is set on ‘px’ the bubbles will always stay on both sides of the timeline and thus they are too narrow for bigger font sizes. But if you use ‘em’ for the break point then the bubles will only switch to the left/right display if there is enough room based on the font size. If you don’t know how to increase the font size, using FF, go to View -> Zoom and activate ‘Zoom Text Only’. Hold down Ctrl and scroll the middle mouse button to increase the text size.
  • Also, with larger text sizes the icons at the bottom disappear into the white background.

There are a few accessibility issues:

  • The keyboard focus around the three icons at the bottom is very hard to see. Use the :focus pseudo-class to make the outline more pronounced.
  • The image of the car racing across the screen is purely decorative and should be hidden from screen readers. Add aria-hidden=“true” to that img tag. If you’ve never heard of ARIA then I don’t expect that you would know this. In that case I’m just introducing you to it :slight_smile:
3

@bbsmooth Thank you for the feedback! It must be a sign that I need to focus on my accessibility for my web apps, you are the second person to say the same thing today. Also, thank you for the aria-hidden=“true”, I had never heard of that.

4

Hi @emirleovelazquez, your page looks good. Just a couple of things;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes 8/10 user stories.
    • The test script should be included, with all tests passing, when you submit your project.
5

@Roma Thanks for the feedback! I actually had the tests all passing, then I removed the CDN before pushing it to Github. But I went ahead and put it back now, so you can see the tests are passing. Appreciate you!

6

This looks excellent. I also clicked on the links at the bottom and your personal page is amazing!

1 Like
7

On first look I thought the colors choice was wrong, but after being in the site for like 1 minute it became very natural so I must say you did a good job design wise

1 Like