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

Mobile-First approach using CSS Grid / Flexbox and custom properties

@ilyesab

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was the hardest challenge for me. although it was similar to the previous ones.

I have a few concerns about the solution.

1- I used a picture element to pick the right image based on the viewport size. and css blend modes to apply the effect on the image. I'm not sure If I should have used css background images and linear gradients instead. what do you think?

2- I'm not sure about how I structured the html and css for this project. let me know if you like / dislike the structure of the code ?

3- I have doubts on how I handled the responsiveness and fear that my design looks bad on some screen sizes. let me know if that is the case for you.

Community feedback

hitmorecode 6,270

@hitmorecode

Posted

Nice well done, good try. Your page needs to be worked on to make it look good. I have a repository for this exercise, it's already a mobile first. It's a simple repository it already has the basic html and css. See if you can take it from here and create a finished product. Give it a try and if you have any questions let me know. I'll try to reply as soon as possible.

Stats preview card component repository

Keep coding

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