Skip to content
Submitted about 1 year ago

Responsive Layout Using Flexbox

Olulana Dari•380
@DrizzyD1717
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I wasn't sure whether to upload the image with img tag or as a background-image

Community feedback

  • The Requiem•330
    @TheRequiemPosted about 1 year ago

    First of all, well done on your solution. You're brave and curious to ask that question and willing to learn! Always think about semantics. How accessible it will be on screen readers for example. Backgrounds are only decoration in nature and images on the other hand may contain meaning. In this case, the perfume is a product and it is not part of a decoration but an image of a perfume that the customer is supposed to order and buy. You should use <img> tag here and make sure to include alt attribute in the tag to describe the image because with it being background, the screen readers will just ignore there ever being an image and overall it is a bad HTML practice. Another thing you can do for accessibility is try to use <main> , <article>, <aside> etc. instead of just <div>.

    Marked as helpful
    2
    Olulana Dari•380
    @DrizzyD1717Posted about 1 year ago

    @TheRequiem Thank you very much. #Noted

    1

Please log in to post a comment

Log in with GitHub

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