Skip to content
Submitted 3 months ago

Blog preview card using CSS

Art0fMind•90
@art0fmind
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of my improved understanding of how fit-content works and how to effectively use meta and link tags to enhance performance and accessibility. I also really liked seeing the custom font applied correctly — that gave the page a unique identity.

Next time, I would be more careful with responsive design from the beginning, making sure the layout adapts well on smaller screens instead of adjusting it later.

What challenges did you encounter, and how did you overcome them?

One challenge was understanding the subtle difference between auto and fit-content. It took several tests and layout adjustments before I clearly saw the effect of each value. I overcame it by experimenting directly in the browser and asking chatgpt.

What specific areas of your project would you like help with?

I would like more help with advanced layout techniques like using grid or flex in more complex combinations. I’d also appreciate guidance on how to structure the <head> section to maximize SEO and loading speed.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Sameer Mehta•170
    @Sameer1003

    Try adding hover animation when the Card is hovered, not when that particular text is hovered. This will give much more realistic effect to your design.

    Marked as helpful

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