Tribute Page for Lionel Messi - Feedback Highly Appreciated

Hello everyone,

I have built my first project for responsive web design. I would really appreciate your feedback regarding any improvements in design, layout, coding practices, etc.

Thank you!

FCC: Tribute Page

1 Like

Hey @0XY, congrats on finishing your first project. I don’t have time to go through the whole thing right now (I’m old and it’s past my bed time) so I’m just going to mention one thing.

In order to use the <figcaption> element you must wrap it in a <figure>, so just change the #img-div div to a figure.

Your figcaption text is great, but you’ll need to change the alt text on the image just a little. First, you don’t want to include the word “image” in the alt text. A screen reader is going to automatically announce that it is an image, so including “image” in the alt text is unnecessarily redundant. Second, I think the alt text can be a little more descriptive. I would describe at least what he is doing and perhaps what he is wearing. Maybe something like “Lionel Messi in his home blue jersey and shorts facing the crowd with his arms raised.” I don’t know a ton about about soccer/football so maybe those aren’t the exact words you would use but hopefully you get my point. The purpose of the alt text is to allow someone who can’t see the image to be able to “see” it through your description. Just be sure not to include details in the alt text that aren’t in the image (such as the score). Those go in the figcaption, just as you have done.

1 Like

Thank you for your valuable feedback @bbsmooth. That was really helpful. I’ll definitely remember this while writing alt text for an image. :slight_smile:

Welcome to the forums @0XY. 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 the HTML editor. (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.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • biography” is not accessible
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens, elements fall out of the container and the timeline is too narrow.

On a side note, you call a font family that you never link or @import.

1 Like

Thank you for your detailed feedback @Roma .

W3C validator seems like a pretty handy resource so I’ll make sure to use it in the next projects. I’ll make sure to go through the accessibility topic as well.

About the responsiveness of the page, I am kind of lost on how should I make sure that the elements don’t fall out of the container. If you could guide me a little regarding that then that would be really helpful. Thanks!

looks good, but the image and timeline header are not centered and overlapping. You can fix this by adding a margin: 0 auto; to your div class that contains the image

to fix the overlapping heading you can add margin to the top of your heading
for example:

.tribute-heading{
margin: 160px auto;
}

if you want to make your image responsive, just set the width of your img
to 100% this will make sure that the image is only as wide as its container

1 Like

Thank you for your feedback @fred030.

I was making changes to make the image responsive so you might have checked it at that time and found that the image and timeline header are overlapping. Kindly check again and let me know if it’s fine now.

By the way width: 100% definitely resolved the issue with image responsiveness. Thanks!

Rather than hard coding pixel units use relative units (em, rem, percentage) to help with responsiveness.

Although you probably don’t need it for this project start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.

1 Like

Thank you for your feedback @Roma. I’ll definitely make use of relative units in my coming projects.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.