Product Preview Card with HTML and CSS

Community feedback

• 

  Sakthivel Ramesh•150

  @sakthivel155Posted 3 months ago

  hello brother! your code is excellent keep up and move to next level to separate css file

  • important css rule don't use body as parent and use this { display: grid; place-content: center; }
  • there should contain this don't use grid in body it problem later period . body { font-family, font-size, background-color, color, line-height, text-align }
  • line no : 42 in html file the img tag doesn't have (alt="") value . check it out if need give some value for alt or clean that (alt = "")

  0

  ---

  

  Aleksei Bodeev•370

  @alekseibodeevPosted 3 months ago

  Hi 👋 @sakthivel155 . Thank you for feedback.

  You are right, applying custom layouts directly to body most likely will lead to troubles on scale. I will keep that in mind for the next projects. But I would argue on alt attribute usage. Empty alt="" says screen readers that image is just decorative, when missing alt says nothing.

  0

  

  Sakthivel Ramesh•150

  @sakthivel155Posted 3 months ago

  Hi @alekseibodeev,

  • You're correct that the browser doesn't display anything when alt="", as it simply recognizes it as an empty attribute. This is indeed the proper way to indicate a decorative image.
  • Using alt="" for purely decorative images is the right approach since it helps screen readers skip over these images, improving accessibility.
  • Additionally, it prevents HTML validation warnings that occur when the validator checks an img tag without an alt attribute.

  Thanks for clarifying!

  0