Responsive product-preview card mobile first design

Community feedback

• 

  P

  kaLihaRi•50

  @kalihari90Posted 4 months ago

  Hello @G-Gakii, congratulations for completing challenge. Good work. I like your usage of the custom properties and html structure. I've got few suggestions to make your solution even better.

  1.) HTML structure - add another class to the div "container", for example "container product-card"

  2.) CSS - "product-card" class - you should try put the flexbox or grid on it, so you can use properties like "gap", "margin', "padding" for general spacing and "border-radius" instead of using all of that seperately on every children.

  3.) Dev Tools - if you don't use it actively, try to use Dev Tools on the Google Chrome/ Firefox (hit F12 in the browser) to visualize and check your structure, spacing and which classes have more specifity.

  4.) Flexbox by deafult have "flex direction: row", but grid by default put children in the column, so remeber about it. You can use less code, if you want easy column just put display:grid on the parent

  5.) Typography - try to set "line-height: 1.5" on your paragraph. It will give your text more space to breath.

  6.) Width of the container - should be locked by "max-width" with the REM units (eventually px) on the container. Take margins and padding from the "container" and put it into "product-card". Your container wille be still responsive on the smaller screens.

  7.) Responsive units - try to avoid pixels. Use REM for the font-sizes, width etc. Use EM for the margins and padding and media queries. Em is relative to the REM.

  8.) Semantic HTML - use "article" instead of the "div" on the container with class "product-card"

  Recommended resource: you definitetly should check Kevin Powell free course "Conquering Responsive Layouts". There is good explanation and when use max-width, clamp function, rem & em, percents, vh etc. :) Good luck and have fun!

  1