Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive blog-preview-card using BEM and flexbox

#bem
P
tediko• 6,580

@tediko

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

P
Grace• 27,870

@grace-snow

Posted

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 helpful

2

P
tediko• 6,580

@tediko

Posted

Thank 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
bunee• 2,060

@buneeIsSlo

Posted

Hey @tediko! Awesome to see you sharing solutions again!

1

P
tediko• 6,580

@tediko

Posted

Hey @buneeIsSlo! That's nice to hear! Looking forward to see your next projects!

1
bunee• 2,060

@buneeIsSlo

Posted

@tediko Thanks, I've definitely been slacking 😅. I'll post one sometime soon. Happy coding!

1
P

@uragunz16

Posted

Wow!... Pretty Good...

1

P
tediko• 6,580

@tediko

Posted

@uragunz16 Thanks!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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