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
Your session has expired please log in again.
Your session has expired please log in again.
Not Found

Submitted

Blog preview card

Dei 60

@deidalopez

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?

I'm proud about the amount of time it took me to churn this out.

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

I struggled with the card's width on mobile devices without using media queries, I think using rem units helped out a bit.

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

Best practices to handle a responsive design.

Also, why not use media queries?

Community feedback

@TedJenkler

Posted

Hi @deidalopez,

Nice project! Media queries can be necessary sometimes, but if you use min/max width (not fixed width) and avoid setting fixed heights (relying instead on padding or margin to properly use the box model) you can often make sites responsive without them. Sometimes using min-height is needed, but it’s best to avoid it when possible. I’d recommend checking out Kevin Powell on YouTube—he’s an excellent coach for responsive design. I thought I knew a lot until I discovered his content, which showed me how advanced responsive design can really be.

Hope this was helpful!

Best, Teodor

Marked as helpful

1
Jawad 170

@J-Jawad

Posted

You did great. Much better than i did so i cant really criticize your work. I really liked how neat and readable the code is.

1

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