Static Blog preview card using HTML and CSS
Design comparison
Solution retrospective
Being able to change the size/placement/order of each element is very satisfying.
What challenges did you encounter, and how did you overcome them?I didn't realize the category tag on the blog preview card was a button at first so I had trouble trying to make the padding match the design. Once I realized it was a button it made it a lot easier.
What specific areas of your project would you like help with?I'm not sure how to use the figma files to help me with these projects.
Community feedback
- @RanitManikPosted 5 months ago
Congratculations on completing this challenge. Here are couple of suggestions for improvement:
- Shadow Effect on Hover
The shadow should grow when hover over the blog card. observe at the active state design closely. To make the shadow grow when hovering over the blog card, you can use the
:hover
pseudo-class in CSS. Here's an example:.blog-card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; } .blog-card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
This will create a smooth transition effect where the shadow grows when you hover over the card.
- Explicitly Mention Font-Size Property
would strongly recommend you to explicitly mention the font-size property. It's important to set a base
font-size
to ensure consistency across different screen sizes. Here’s how you can do it:body { font-size: 16px; /* Adjust this value as needed */ line-height: 1.6; font-family: 'YourFontFamily', sans-serif; } h1 { font-size: 2em; /* Example for heading */ } p { font-size: 1em; /* Example for paragraph */ }
Adjust the
font-size
property according to your design needs to ensure readability on larger screens.- Centering the Container
Don't use position properties to center a item like that. Instead use the conventional and more effective one. Using CSS Grid for centering elements is a modern and efficient approach. Here's how you can update your CSS:
body { min-height: 100vh; display: grid; place-items: center; } .container { /* Your container styles */ }
This method ensures that the container is centered both vertically and horizontally within the viewport.
- I hope you find these suggestions helpful for improving your site's design and functionality. Feel free to reach out if you have any questions or need further assistance!
Marked as helpful0@eatwanderexplorePosted 5 months ago@RanitManik Thank you for your feedback. I've implemented many of the changes you suggested and it definitely helped.
0
Please log in to post a comment
Log in with GitHubJoin 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