Skip to content
Submitted 7 months ago

Built a Responsive Blog Preview Card with React and Flexbox

Kannan Thirumalsamy•60
@kannanthirumal
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?
What challenges did you encounter, and how did you overcome them?

I had some questions about how to interpret the 'desktop active image' in the design. I wasn't sure if I should make the shadow bigger when hovering over the card or when clicking on something within the card. Also, I wasn't sure if I should use a custom pointer image similar to the one shown in the design, which had a black cursor with a white outline. Eventually, I decided to stick with the standard pointer because I felt like I might be overthinking it.

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

If you see anything in my project that could be made better, I'd love to hear your ideas and suggestions.

Community feedback

  • Grego•1,310
    @Grego14Posted 7 months ago

    Hello! 🎉 congratulations on completing the challenge! 🎉

    Leave the alt attribute empty if the image is for decoration and has no semantic meaning.

    The color of the pointer depends on the browser, so don't worry.

    Since you only need a box-shadow without blur or spread, it is not necessary to specify all the values, you can leave it like this:

    box-shadow: 16px 16px;

    You did amazing, so I have nothing more to add!

    I hope this helps! 😁

    Marked as helpful
    0
    Kannan Thirumalsamy•60
    @kannanthirumalPosted 7 months ago

    Haha! I was even thinking about shaking things up by using a custom pointer image to match the design. But hey, your tips are spot on. Thanks @Grego14.

    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