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 with focus

P
JF 50

@JFGEER83

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 to have been able to use css variables in this project, to have made it responsive and to have respected the layout to the pixel (I hope). I added a hover effect to the component's shadow. Next time, I'll try to use the variables in the whole project in a more efficient way.

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

I didn't come across any real challenges, so I wanted to take the opportunity to optimise the way I write css, with variables among other things, to avoid doing DRY. I think that the medias-quieries were the most challenging for the moment, but with a bit of testing I was able to find a decent solution.

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

I'm curious to know if my code is optimised enough, there's surely a more efficient way that I'm curious to know about. So I hope I've understood the focus, and that my media querries are correct.

Community feedback

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