Design comparison
SolutionDesign
Solution retrospective
DONE! :D I appreciatte any feedback!
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi, Bárbara Damasceno! 👋
A few suggestions for improvements.
<figure>
does not need to wrap every<img>
element. Only use<figure>
when you need to include a<figcaption>
.- Alternative text for images should not contain any words related to "image" (such as picture, photo, logo, icon, graphic, avatar). It is already an image element (
<img>
) so the screen reader will pronounce it as an image. - Not every image needs alternative text. Decorative images should not have alternative text (
alt=""
). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page. - For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
- Use
<a>
withdownload
attribute for each of the download buttons. - Remove
<div class="main__section__info"></div>
. It is empty and has no styling. cursor: pointer
is already the default styling of<a>
. You can remove it from your stylesheet.- For faster loading speed, I recommend importing the necessary social media icons instead of the whole Font Awesome library.
I hope this helps. Happy coding! 😄
Marked as helpful2@barbaradamasdevPosted over 1 year ago@vanzasetia THANK YOU! You helped so much. I'll pay attention in everything you said. 😍
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord