Skip to content
Submitted 25 days ago

Blog Preview Card

devindubin•60
@devindubin
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?

Learning how to use flexbox

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

Changing line height to match the design, I started editing the css directly in the developer tool to test multiple values and see how it changed things faster.

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

Estimating sizes base on the picture. How do I know the width to set the card? Guess and check? What is a good method at comparing my creation with the image? Having both side by side in the browser?

Also, what are some methods of testing on different screen sizes? What is a good resource to study (besides MDN).

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted 25 days ago

    Hi, @devindubin

    I checked out your solution and I have some thoughts:

    • Since you're not a Pro user, it’s understandable that you have to estimate the card width based on the design images provided. For exact measurements, upgrading to Pro gives you access to the Figma design files. Alternatively, you could use browser extensions that let you upload design images and measure them directly with available tools.
    • Great job using Browser Developer Tools—this is essential for frontend development! You can use it to test how the page looks on different devices, though it’s just a simulation. It’s still a cost-effective solution if buying multiple devices isn’t feasible.
    • For ongoing learning, there are plenty of free resources available online. I’d recommend continuing to practice on Frontend Mentor, and consider giving feedback on other challenges—it’s a great way to learn from others and refine your skills. Over time, articulating your thoughts will come more naturally.

    Hope this helps!

    Marked as helpful
    2
  • Himanshish08•60
    @Himanshish08Posted 25 days ago

    Keep going your skills are freshning day by day

    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