Submitted about 2 years ago

Product preview card component | CSS Grid | Flexbox | Javascript

User9511• 370

@User9511

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I was having sizing issues with the images when i was trying to place the images using CSS e.g.

 .image-original-dt {
        background-image: url(.images/image-product-desktop.jpg)
  }

I removed the images from the CSS and instead placed them directly into the HTML

<img src="./images/image-product-desktop.jpg" alt="bottle of Gabrielle Essence Eau De Parfum" class="image-original-dt">

Which of the methods of placing images is best practise ? Placing images into HTML or CSS?

I'm not sure if my Javascript is best practise. I made a function that toggles a class on click. Is there a better way of doing it or is my code correct ?

Any feedback is welcome!

Thanks, Shane

Community feedback

Yeabsira• 480

@itsyaba

Posted about 2 years ago

Hey Shane, nice work on your project

You can add image using both CSS and HTML but adding it through CSS is not recommended because when you are working in real life projects there are some people that are using accessibility materials so if you add the image through CSS they will not identify the image so adding it though HTML is recommended .

And the JavaScript toggle is the best of course there are others but the toggle option is fine .

And Keep it up!

Marked as helpful

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hello Shane, congratulations for your solution!

Is really creative and original the effect you did in the photo! That's amazing.

Maybe is a better way to manage the images, instead of using <img> or background-image is using <picture> because using this tag you wrap both images and also set whent he images should switch between devices all using only the html.

Congrats and keep it up!

Marked as helpful

Please log in to post a comment

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