Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card with HTML and CSS

@alekseibodeev

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@sakthivel155

Posted

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

@alekseibodeev

Posted

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

@sakthivel155

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord