Four card feature section master

Solution retrospective
If there are any suggestions/comments about this will be much be appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vanzasetia
👋Hi Jonathan!
I have some feedback on this solution:
- I noticed the card border color is darker then it should.
- The box shadow opacity is too high, try to reduce it.
- For any decorative images, you should leave the
alt=""
empty and addaria-hidden="true
to make all screen readers ignore those images. In this case all images are decorative images. - For each card title, it should not be a heading. It should be a paragraph tag. Heading tag is commons used for titling
article
orsection
. - Also you may want to make the parent of the cards to be
ul
and make each card to beli
. It's optional but I think it's more semantic thandiv
. - For the CSS selector, keep the specificity as low as possible. It will make it easier to maintain and override styling if needed. Using
>
will increase the specificity unnecessarily. I recommend to use BEM class naming convention to make you write better CSS. - Using
%
formargin
,padding
, andgap
is not recommended since on wide screen and on small screen it may behave weirdly. Userem
orem
instead.
That's it! Hopefully this is helpful!
Marked as helpful
Join 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