Product Preview Card Design

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the main element.

  More Info:📚

  MDN Main Element

  • The image’s alt tag description needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • This component requires the use of two images 🎑 at different breakpoints. The picture element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:📚

  https://www.w3schools.com/html/html_images_picture.asp

  • Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

  More Info:📚

  Del Element

  • Your "button" was created with the incorrect element. It should be created using the button element. So that when the user clicks on the button (with the help of JS) it should add the product to the cart.

  More Info:📚

  MDN The Button element

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0
• 

  Chris•180

  @chrizgxPosted almost 2 years ago

  Hello Ariya, and congrats on submitting your first project. I took a look at the design and the code, and they both seem pretty well structured. I am writing this feedback to provide you some tips for further development.

  1. You can use @media query on CSS to change styling based on device width (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width). The only thing you'll have to adapt is 'flex-direction' property (you have to set it to 'column', in order for the image to be on top of the .content-div element). Don't forget to alter border-radius values on '.img-div img' and '.content-div'

  2. You can use 'transition' property on '.cart-btn' to include some kind of animation when the user hovers on the button. All it does is smoothly transition from one color to another.

  3. Lastly, you can use variable names for colors to make your life easier. I really like that feature because I can give a name to every color (such as '--main-color', '--secondary-color', '--text-color', etc.) and stop copy&pasting color values all the time. It is also useful in case you want to change the page's main colors, because all you have to do is change the variable value. You can find more about how to use CSS variables here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  I hope you'll find my feedback useful. Have fun coding and exploring new concepts.

  Marked as helpful

  0