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

@paulovictor1997

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


if would like give me feedback in my code, be welcome.

Community feedback

Shashi Lo 1,345

@shashilo

Posted

Don't be discouraged by this, but let it be a way for you to learn. I'm particular with design reviews because you're going to get grind out by the designer for not paying attention to the details. I hope I'm not too harsh, and let me know if none of this makes sense. Cheers!

Items to improve on:

The details. You may not have the Sketch file, but if you overlay the design onto your implement or looked at it side by side, you'll see some differences.

On Desktop View • Border-radius on the container is off • The content title and body should be left justified • Do not use <strong> unless it's made to be bold or stand out. For this instance, it's misleading because the entire title should be prominent. • Check the font sizes. They look a few sizes off on the title. • The stats column should be split into 3 equal parts and aligned to the start and end of the container. • The stats column label font and font size are incorrect. • The image should have an overlay fade. Right now it's way too bright.

Responsiveness • If you look at your implementation at 900px to 1400px, the image is cut off. Instead, make the two sections equal in size and I'd start the mobile view below 768px.

On Mobile view • The design should work on the minimum screen size of 375px wide. Why? Because this is the standard iPhone screen size nowadays. • All text should be aligned centered on mobile. • Please check the padding from the title to the body, from the body to the stats columns, and the stats columns to the bottom. It's all inconsistent and doesn't match the design.

Marked as helpful

2

@paulovictor1997

Posted

@shashilo thanks for supporting man, i will correct the things what you said.

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