Stats Preview Card using CSS Flexbox

Community feedback

• 

  Julian Krüger•100

  @juliankrugerPosted almost 3 years ago

  Hi Anosha,

  there is not really much to criticize, this looks great! One thing you could add to really get the color of the image right is a pseudo-element. An ::after or ::before css-class that sits right above the image with the same background-color and a low opacity.

  Another suggestion for future challenges: The design works perfectly on the two screen sizes set by the challenge, but in between it is not responsive anymore. What might help is mobile-first approach. Design it for mobile screens first and then later add the complexity of the desktop design. The dev tools of your browser help displaying all the screen sizes. I would not rebuild this just for that, though but maybe keep it in mind in the future.

  A nice free course for that is Conquering Responsive Layouts by Kevin Powell. It takes 21 days and only presents you a very small challenge each day including some break days.

  Hope that helps!

  Greetings

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @juliankruger I agree about the responsiveness. I just felt a bit lazy haha (especially after it took me a million hours to get the right colour for the overlay.) I've never started designing with mobile layout first, so I will definitely challenge myself to do that next time.

  I just finished watching a YouTube video on using ::after for image overlay. That's a game changer! Definitely will be using that in the future for image overlays.

  Thank you so much for helping me improve!

  1

  

  Julian Krüger•100

  @juliankrugerPosted almost 3 years ago

  @anoshaahmed Oh I get that, the image overlay really took me quite a while, too!

  I am glad my comment was helpful to you. Pseudo elements really are a game changer and they work on all kinds of stuff, it's a nice topic to explore.

  1