Responsive design using flex box and css grid

Community feedback

• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Hey Ebenezer!

  Congrats on successfully completing this awesome Frontend Mentor challenge. You've done a good job on it and I'm sure you've got the chance to practice with a lot of different concepts.

  After going through your code, I have a few suggestions / observations that I'll offer in no particular order:

  1. The first thing that stood out to me was the font - it wasn't just the size, but also the type. You're using a different font family from the one provided in the styles guide This in itself isn't anything detrimental, but in a real-world scenario, you'd preferably want to use the styling data provided for your assigned design ;)

  2. You've used a lot of the width and height properties. The upside is that you used percentage and viewport-based units, which is a good practice. The downside is that a lot of their usage was rather redundant. There are only a few places where you'd really need to use these two properties.

  3. For the view icon, you can actually use the ::after pseudo element instead of adding another <img/> element for it. It's a nicer solution to writing clean and simple code.

  4. I like how you used the background-image approach for the NFT image, but I'd say that in this context, it's better to use the <img /> inside a container. Then you can just set the <img /> width to 100% of its parent element and it'll scale nicely.

  5. You've used px unit in quite a few places. Px are an absolute value, meaning there won't be too much room for responsiveness and accessibility. You'd rather use rem units which basically scale in relation to the document's root font size. Check out this resource on Rem to better understand its usage: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

  Hope my suggestions and observations are useful to you.

  Once again, good job on completing this challenge! Make sure to celebrate every victory you achieve throughout your journey to becoming a competent frontend developer.

  Keep up the good work and I'm looking forward to seeing more of your work here on Frontend Mentor! ;)

  Marked as helpful

  1

  ---

  

  Ebenezer Awuku•70

  @codenayPosted almost 3 years ago

  @Remus432 Thank you so much for taking the time to look at my code. It is really appreciated. Your suggestions and observations were really helpful.

  0