Feedbacks on my tribute page

Hi everybody, some time ago I dropped the project due to lack of motivation so I started learning again at FCC and did my first tribute project. Any tips on how to improve it?

https://codepen.io/robertgtx/pen/WNQvmXz

I’d appreciate any feedback. Thanks

The Tribute page looks crisp and beautiful.

I just put the HTML in a validator and it shows some errors and suggestion, nothing major but the images are missing alt, an image having a target .

You can also check your CSS in a validator to further improve your tribute page.

:+1:

1 Like

Thank you. Which validator did you used to check my code?

No major problems, but a few things:

  • Don’t skip header levels. You go from h1 to h3. All the h3’s should be h2.
  • The images need alt text.
  • The social media links at the bottom need text associated with them (e.g. the Twitter link needs “Twitter” text in the link). You can visually hide the text with CSS (google ‘CSS visually-hidden’). You’ll want to hide the icon images from screen readers with aria-hidden=“true”.
  • I don’t think you are taking full advantage of responsive design. As I narrow my browser window the side margins on the content remain basically the same (i.e same percentage) so eventually there are only 2-3 words per line (and at larger text sizes it gets down to one word per line). I think you should have smaller side margins at narrower widths so that the content has more horizontal room to display more words per line.
1 Like

W3C Validator

And the feedback from @bbsmooth is very valuable .

  • Can you give a code example of the fourth point w.r.t taking full advantage of the RWD principles.
    Do you mean something like this where it is not possible to set a screen size smaller than a certain value and content holds its form ?
    @bbsmooth
1 Like

Thanks for the feedback. I was noticing that when I was doing the project, but I didn’t understand well how to adapt the text to the size of the screen and it also got quite complicated in the “Social Media” section because the icons were very small when the page was narrowed down

Do not change the text size itself, just remove most of the side margin/padding so your content has more horizontal room. The text size should be left alone so that the viewer has complete control of it from their end.

1 Like