Design comparison
Solution retrospective
Hello!
This time I used the BEM (Block, Element, Modifier) methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules. You can learn more about BEM here.
Since my card is just illustrated introduction to some blog post I made the entire blog card clickable, not just an anchor. I did this with a simple JavaScript technique and used the card container as a proxy for the link. Then detected how long the user is taking between mousedown and mouseup and suppress the clicking event if user is likely to be selecting text. There's a few ways to make whole card clickable, but each method have it's own pros and cons. There is also an aspect of accessibility - Read more about inclusive card components
No specific questions, but feedback or a criticism will be appreciated!
Community feedback
- @grace-snowPosted 9 months ago
Remember that text should never be in divs or spans alone. Always use a meaningful element.
I wouldn't expect the main image to have an alt description to be honest. To me, that looks decorative.
Try to remember to include a modern css reset at the start of the styles in every project.
I would expect a pseudo in this to make the whole card clickable too. That technique is covered on the inclusive components site
Marked as helpful2@tedikoPosted 9 months agoThank you for your feedback! These are helpful suggestions and looking forward to implement them and read about technique to make whole card clickable.
Funny thing is that I agree that main image is decorative because it doesn't add any information to the content of a page in that particular case, but somehow while I was building this component I thought that other blog cards may have more meaningful images that adds some information to content of that component so I should keep it. My mind went blank because alt description for every image would be provided separately and it can be blank for some and descriptive for others.. my bad!
Edit: This was a nice read on why we should make the entire card clickable! I went down the road with redundant click method since it was more appealing to me that users can and should select/copy text within my card without clicking on it. But I think pseudo-content trick will find uses in other places. I left some
console.log's in code if you want to check it out!1 - @buneeIsSloPosted 9 months ago
Hey @tediko! Awesome to see you sharing solutions again!
1 - @uragunz16Posted 9 months ago
Wow!... Pretty Good...
1
Please log in to post a comment
Log in with GitHub
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