@correlucas
Posted
👾Hello Orses, congratulations for your new solution!
You've done a really good work creating this grid layout with the cards and setting the media query to active the mobile design. Something you can change is the list you've used for the card and let all as <article> inside a normal div or section to hold everything, you don't need a code so long to keep everything together. I'll let you the link of my solution to you see how I've build it with less divs.
👨💻 Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/4-card-feature-section-vanilla-css-custom-design-glassmorphism-35MDUfOBdt
👋 I hope this helps you and happy coding!
Marked as helpful
@orses
Posted
@correlucas Thank you very much for your comments @correlucas. I like your solution because of the animation of the color bars and the icons. You're right about the lists: they make the code a bit long. But I am trying in each challenge, to make the code more semantic, abstract and accessible (although I am far from achieving it yet). In this case, I am inserting all the elements that may be repetitive in a list to favor their accessibility, because they seem to help screen readers:
- Screen readers provide shortcuts to lists and between list items
- Screen readers enumerate the items so users know how many are available
I am following the basic lines of Heydon Pickering for the creation of inclusive components, in this case of type cards: Inclusive components
Thank you very much for your comments, I see that you have many projects created and very advanced. I hope to continue counting on your comments. For now I don't dare to give mine to others because I still have little entrenched and assimilated knowledge.
@correlucas
Posted
@orses Ah okay Orses, I'll read this article right now because you've said something I didnt know, thanks for that bro! I was not thinking about these things you said, to say the truth, I am a beginner so this will help me to learn even more. Thanks Orses, good content = )
