Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview Card

@devindubin

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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 1,940

@huyphan2210

Posted

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!

1

@Himanshish08

Posted

Keep going your skills are freshning day by day

0

Please log in to post a comment

Log in with GitHub
Discord logo

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