Blog Preview Card Solution using HTML and CSS

Solution retrospective
These 2 projects has really helped me to learn the rules that I need to follow for creating a project in frontend Mentor.
What challenges did you encounter, and how did you overcome them?Encountered challenge with using boxShadow for the card.
What specific areas of your project would you like help with?Please go through my project and let me know on the areas that I can improve.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
The same feedback I've just left on your previous solution applies here so I won't repeat.
There's one really important extra consideration you've missed in this challenge though: the link. The design shows this card is meant to be clickable, but you've not included the essential interactive element, instead adding hover styles to non-interactive elements. This makes the whole component non-functional (I.e. Pointless! When it's purpose is to link to a blog).
Once the link has been added inside the heading, you'll need to make the whole card clickable. A common way to do that is by making the card position relative and adding a pseudo element to the link that covers the card with position absolute. Now tye clickable area of the link will cover the card.
The only other problem I see is the max-width 25% on the tag/category. You need to remove that. It will cause overflow for some users. Let the width of the category/tag be defined by its content and padding only. There's no need for a width or max-width.
Lastly, there's no need for a media query in this challenge. You can remove it all. Leave the font sizes as the default and don't worry about changing anything.
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