Product preview card component solution using Flexbox

Community feedback

• 

  y4rb0w•260

  @YavanhaPosted about 2 years ago

  Hello @Eyelin

  Very nice job you did there !

  I went through your code, here is what I think you can do better :

  1. fixed height are a not a good idea, when you really need to fixe the height use min-height instead, to let the element always grow if needed.

  2. Try to start with the mobile first approach, you wil often see that it uses lots of default values meaning that it's easier for you to handle. Then add all the complexity of the desktop version in a media querry. In this way you will override way less properties.

  3. Make a good use of the html semantics (article, section, aside, h1-6...)

  otherwise it's a good project that you built there.

  good luck for the next one.

  ofc, if you need more in depth understanding feel free to repply :)

  Marked as helpful

  2

  ---

  

  Eyelin•70

  @EyelinPosted about 2 years ago

  @Yavanha thank you very much for taking your time and helping me, I will review these best practices you have shared with me, and I will try to improve, thanks a lot!

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey, great job on this project!

  Some suggestions to improve you code:

  1. For accessibility purposes, its better to use rem/em instead of px for your CSS property values.
  2. To make it easier to deal with CSS and have more control over your content, I suggest taking a look at CSS Resets.

  It makes it easier to make changes and will ensure that everything will look the same regardless of browser used and don’t have to worry that the browser will be using its own styling.

  One important thing about CSS Resets, is that there is no such thing as “one is better than the other.”

  CSS Resets are customizable for your preference.

  Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  Happy Coding!

  Marked as helpful

  1

  ---

  

  Eyelin•70

  @EyelinPosted about 2 years ago

  @vcarames thank you very much for taking your time and helping me, I really appreciate it!! I will review carefully your comments here and I will try to improve, thanks a lot for the useful links! 🤗

  0