Product Preview Card (Vanilla CSS )

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Manu , congratulations for your new solution!

  🎨 Here’s some tips to improve your component design:

  1.A shortcut to deal with the multiple images in this challenge is by using the <picture> tag instead of importing thhis as an <img> or using a div with background-image. Use this tag to make the image 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

  2.The value you’ve used for the shadow make it too much dark and strong, to create a smooth shadow you need to give it less opacity and more blur. This is a better value for this shadow: box-shadow: 1px -7px 40px 6px rgb(67 90 128 / 22%);

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi Manu,

  Welcome to the frontend mentor community and congratulations 🎉 for completing this challenge, it was a great attempt. The card looks great but there are some issues I want to address.

  1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
  2. You should also wrap the footer within the footer tag e.g. <footer class="attribution"></footer>
  3. The size of your card looks good, but I would suggest you increase it in mobile screen to around 300px
  4. I noticed you took the desktop-first approach however I would suggest you take the mobile-first approach as this is a better option in regard to rearranging your card and the elements within it, as you increase the screen size. Therefore, you should use the min-width property within your media queries instead of the max-width property. Also, it would be better to change the media queries so that the card shows before 1400px and to 900px instead.

  Overall, great attempt and wish you the best for your future projects so keep coding 👍.

  Marked as helpful

  0

  ---

  

  Manu Jayakumar•70

  @manujayakumarPosted about 2 years ago

  @romila2003 Thank you for the advice and the time taken to analysis my code. Next time, I will do better and won't repeat the same mistake! In future, I hope that you analysis my code again.

  1