Design comparison
SolutionDesign
Solution retrospective
Hope you like it and feedback is welcome :)
Community feedback
- @ApplePieGiraffePosted almost 2 years ago
Hi there, Sebastian! 👋
Nice work on this challenge! 🙌 Your solution looks good and is responsive! 👏
A few suggestions I have for you are,
- Using
ul
andli
elements for the list of statistics at the bottom of the card component to make your HTML more semantic. - Not using
h2
tags for the numbers in the statistics section, since even though they have a larger font-size and heavier font-weight, they aren't headings for anything. A simplespan
element should work for styling them. 😉 - You don't need to add
aria-hidden="true"
to an image if you leave it'salt
text empty, as that will already cause screen readers to ignore that image. - You can use the
picture
element to switch between the mobile and desktop versions of the image in the card component. You can also just specify the image in one place and reverse the order of the image and the rest of the content of the card component by placing both of them in a flex container and using a media query to change theflex-direction
property between mobile and desktop views. 😉 If you'd like to learn more about thepicture
element and how to use it, check out this article from MDN. 🙂
Hope this helps. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful1 - Using
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