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

HTML CSS

@alias01

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


I am learning please provide any feedback. Thanks.

Community feedback

Nikolay Borzunov• 125

@tydusgg

Posted

Hey!

It is a good job for a newbie but I found some issues.

First of all, try to avoid using element selectors in CSS: .card-details h1, .stats p , etc. The better is using classes for reusable blocks of style and ids for unique elements (the last is not a rule, just an option).

If you want to write better CSS - google BEM (it is a kind of approach to writing CSS class names that helps you to reuse styles and extend the code base).

Secondly, you could use CSS variables. It helps you to don't repeat your code several times, you can just pick a variable.

But also, I saw you used media queries, it is great for the young developer!

All in all, it is a very good job for you, you have to read more information about best practices in CSS and frontend at all and try to implement them in your next projects.

Good luck!

P.S. Here is some useful stuff.

  1. https://en.bem.info - Info about BEM. You can skip this if you don't understand something and come again later.
  2. https://css-tricks.com/a-complete-guide-to-custom-properties/
  3. https://blog.logrocket.com/5-things-to-consider-when-creating-your-css-style-guide-7b85fa70039d/
  4. https://medium.com/before-semicolon/50-css-best-practices-guidelines-to-write-better-css-c60807e9eee2
  5. https://www.webtips.dev/10-best-practices-for-quickly-improving-your-css

Marked as helpful

1

@alias01

Posted

@tydusgg Thanks for the feedback. I'll try the suggestions provided.

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