Design comparison
SolutionDesign
Solution retrospective
Hopefully I did alright. Let me know what I could have done better. Thank you.
Community feedback
- @vanzasetiaPosted almost 3 years ago
š Greetings, Luca!
š Congratulations on finishing this challenge! I have some feedback on this solution:
- Accessibility
- š Good job on using
main
landmark! - For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. - For the card bottom element, use
ul
and wrap each item withli
. Don't usebr
for presentation purposes (making the text move to the next line) instead make thespan
element asdisplay: block
instead. Also, they should not be headings.
- š Good job on using
<ul class="card__bottom"> <li class="bottom__description__one">10k+<span class="break">Companies</span></li> </ul>
- Styling
- Don't limit the height of the
body
element, it will not allow the users to scroll the page if the page content needs moreheight
. Usemin-height
instead. - For the overlay, you can use pseudo-element instead of
div
.
- Don't limit the height of the
That's it! Hopefully, this is helpful!
1 - Accessibility
- @NaveenGumastePosted almost 3 years ago
Hay ! Good Luca Job you made it look nearly perfect to the preview
Keep up the good work!
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