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!
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. 
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
bodyelement in the HTML editor. (No need to include thebodytags). 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.