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

Responsive blog preview card using flexbox

Adnan N. 60

@Adnan7389

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 specific areas of your project would you like help with?

  • Layout
  • font weight and size
  • line-height and letter-spacing properties
  • color

Community feedback

Liyyy9 80

@Liyyy9

Posted

Well done on completing the challenge! I have a few suggestions for further improvement based on feedback I received. I’m not claiming to be an expert, but I think these could be helpful insights for your project.

  1. To improve the responsiveness of the webpage, consider using rem units for font sizes instead of px. Set the html selector to a font-size of 16px, and then define other font sizes relative to this base size, such as 1rem (16px), 2rem (32px), and so on.

  2. In line 49, the font-size is currently set to 1 (i.e., font-size: 1;). It would be clearer to specify the unit of measurement, such as px, em, or rem.

  3. Similarly to the font sizes, using rem units for max-width can enhance responsiveness.

I’m not sure if I’ve caught everything that might need improvement, but those are the only issues I’ve noticed so far. I hope my suggestions are helpful! I'm not entirely sure either, but they should be a good starting point.

Marked as helpful

0

@ElkuchWaltz

Posted

Excellent work! I just completed this project too, and it looks like you were able to match the original much more closely than I was, well done!

One piece of advice I received on mine was to use rem instead of px for font size. I know the Frontend mentor style sheet gives us the <p> font-size in px, but rem can scale better for users who want to change the font size in their screens.

0

Adnan N. 60

@Adnan7389

Posted

Thanks!@ElkuchWaltz

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