Product preview card component using Flexbox

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  add the alt attibute with a value of null alt= " " to the icon img tag to fix the error issue.

  To center .hero on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. Give the img a width of 100%.

  Give .hero display: flex instead of inline flex and give it a width value . give sec_a nd .sec_b a width of 50%

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Pankaj Bisen•70

  @packerpotPosted almost 2 years ago

  @Hassiai Thanks a lot for your suggestion

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • The image’s alt tag description needs to be improved upon ⚠️. Assume that you are describing the image to a someone over the phone.

  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

  • The only heading ⚠️ in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.

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

  Happy Coding! 🎆🎊🪅

  1

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  • 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 CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it.

  Here are some examples that you can freely use:

  Josh Comeau Reset

  Eric Meyer Reset

  1

  

  Pankaj Bisen•70

  @packerpotPosted almost 2 years ago

  @vcarames Thanks a lot; your suggestions are helpful for me, but you mentioned a property called "css reset." I've never heard of this property, which may be because I'm still learning CSS.

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @packerpot

  Glad I could help!☃️

  A CSS Reset is more of a group of several properties that help in ensuring your site looks the same in each browser, it’s helps speed up the web development process by not having to always write repetitive code, and you can always add more to it.

  Create a stylesheet with the CSS Reset and anytime you create a new project, just copy and paste the file.

  Keep it up!

  1