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

Stats preview card component

Kevin 30

@FNebEx

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 project helped me learn more about media queries, CSS custom variables, and using the child and sibling selectors. I got as close to the design as I possibly could. In the future, I might redo this project using Tailwind.

One thing that I struggled with was getting the image on mobile to not look so squished. I'll update it the future once I figure that out.

This was a fun project.

Community feedback

P

@jNembhard

Posted

Hey Kevin,

Great first attempt! I would suggest stepping thing up a notch after you feel you have a good handle with css to sass code. If you use something like Watch Sass in Visual Studio code, this will ensure your css code is compatible across all browser types.

Also try to make sure the object is centered in the layout for an optimal view. As for making sure the image doesn't get squished, there is a relatively new css code called aspect-ratio that you can set on the image to ensure it maintains it optimal width and height.

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