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

Frontend Mentor - Stats Preview Card Component

@esthercate

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


Am I repeating myself too much when it comes to margin and padding properties? Feel free to go through my code and tell me whether I am repeating myself or its okay.

Any other feedback will be highly appreciated.

Community feedback

P
hardy 3,660

@hardy333

Posted

Hey, everything looks clean and card is responsive... very good solution - nice Job.

Also I will suggest to align .statistics div little bit bottom and it will be perfect. Good luck.

Marked as helpful

3

@esthercate

Posted

@hardy333 Thank you for the feedback.

0
darryncodes 6,430

@darryncodes

Posted

Hi Catherine,

Really well done, great design and very responsive!

A couple of idea's for you that I've learned that could help:

  • SASS adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster
  • BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copying and pasting
  • also you might want to add a <h1> to your design to clear the accessibility report

All the best!

Marked as helpful

1

@esthercate

Posted

@darryncodes Thank you so much for your feedback, I will put the suggested tips on practise. I have been learning SCSS. And now you have suggested I learn SASS, can you kindly elaborate on which one is better between the two. Will be waiting to hear form you.

0
darryncodes 6,430

@darryncodes

Posted

Hi @esthercate you're welcome, sounds like you're on the right track. SASS is a SCSS pre-processor. This stackoverflow probably does a better job of explaining things than i will: What's the difference between SCSS and Sass?

Marked as helpful

0
P
hardy 3,660

@hardy333

Posted

You are welcome.

3

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