Responsive stats-preview-card

Community feedback

• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Well done on building this responsive card, @Eshan01!

  You did a great job and I'm sure you've learned quite a lot of new concepts here.

  I have a few suggestions/observations that I hope can be useful to you in your upcoming projects:

  1. Look into rem units. PX units are absolute values - therefore they don't leave too much room for responsiveness. It's not a good practice to use px units when building responsive units.

  2. Add variables for recurring values. For example, a lot of your properties use a value of 10px. Since it's so frequently used, you'd preferably want to store that value in a variable. That way, if you want to modify the value, you only have to change the variable's value.

  3. Set the font-family property using the body selector. All the children elements will inherit it by default. You only need a different font-family for .stat-head

  4. Why did you set the body's width to 100vw in that media query? By default, the body's width is 100% of the viewport.

  5. If you want to center the card vertically and horizontally inside the page, you can use "place-content: center". You only set "display: grid", but that by itself doesn't create any visible change in the interface.

  6. Instead of adding two <img /> elements, you can use a div and set its "background-image" property to the required image and change it using media queries. It's a cleaner solution in terms of code efficiency and performance.

  7. The <main> element should never be the children of other semantic elements such as <article>, <section>, etc. Preferably, you'd want to use <main> as the wrapper for your entire preview card. It'd make much more sense to use it like that in terms of its purpose as a semantic element.

  8. You can use the "@import" syntax to add the Google Fonts straight into your CSS file.

  9. I noticed you have some internal styling in your HTML. Typically, that's not a good practice as you should keep your HTML and CSS separated for better maintainability. I suggest relocating the CSS inside your HTML to your CSS file.

  Hope my suggestions will prove useful to you.

  Keep up the good work and looking forward to seeing more of your work here on Frontend Mentor!

  Marked as helpful

  1

  ---

  

  Eshan Chandra Dangwal•50

  @Eshan01Posted almost 3 years ago

  @Remus432 Very informative suggestion, I will apply this to my upcoming challenges. Thank you! I just posted a new solution, would you like to take a look.

  0