Product Preview Card Component Using Flexbox and Grids

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Jenna, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  1.Don’t use id to give the style of your elements, it's not a good idea because id is a too specific selector used for forms and Javascript code. Instead, use class for styling and let the id for much specific stuff. It's also not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

  2.Something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. Look that for SEO and search engine reasons isn’t a better practice import this product image with CSS since this will make harder to the image be found. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Jenna•50

  @Beans-InJeansPosted about 2 years ago

  @correlucas Thanks for the tips!

  1
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @Beans-InJeans,

  Congrats on completing the challenge

  Remove the product image you already have it as a background image.

  You can use the below linked website for eloquent box shadows just click on the one you want and paste it in the CSS rule.

  https://getcssscan.com/css-box-shadow-examples

  Hope this is helpful.

  Marked as helpful

  1

  ---

  

  Jenna•50

  @Beans-InJeansPosted about 2 years ago

  @hyrongennike Thank you!

  0