Product preview card component

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 2 years ago

  Hi Godwin

  Here is some consideration after going through your project: HTML

  • The challenge has 2 main images that should be used , one for the mobile version and another for the desktop version. Read about responsive images , especially the picture element
  • a heading should be meaningful , a number as a heading does not say anything to the reader or viewer. I look at heading elements in the same way as titles and subtitles of a story in a novel or magazine.
  • the alt value for images does not need to include words such as image, picture, graphic etc as those words are said by screen readers automatically. Writing them will cause an unnecessary repetition.
  • the img in the button is merely decorative and hence could just be written as alt="" . Well done also on putting text in the button - that's very important

  CSS

  • it is best practice to give the body a min-height: 100vh` . That allows content to scroll vertically when necessary.
  • another recommendation is to set your font-sizes in rems . Read the following article for a better explanation why-designers-should-move-from-px-to-rem
  • your break point was too early , check your site from 460px upwards. The responsive side of the app can be improved.
  • by all means , avoid setting height on elements . Let you elements decide the height by default. You need to be wary also when using fixed width as that can have some effects on how your site presents. Either content will overflow if the width fails to accommodate all the contents or you may have some large white space. In this challenge i would go for max-width on the .container div so that it does not exceed a certain length in width.

  Marked as helpful

  1

  ---

  

  P

  Godwin•410

  @itadori-kunPosted about 2 years ago

  @ChamuMutezva Thank you for the feedback, it was much appreciated and it pointed me to a bigger picture about what I was lacking. I have corrected it to a certain extent I think. if you could in your free time have a recheck, I would much appreciate it. Thanks once again for your help.

  0