Product Preview Card Responsive

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • For improved accessibility 📈 for your content, it is best practice to use rem for your property value. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

  • To properly center your content to your page, you will want to add the following to your Body element (this method uses CSS Grid):

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  More Info:📚

  Centering in CSS

  • Implement a Mobile First approach 📱 > 🖥

  With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

  More Info:📚

  Mobile First

  • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

  Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

  Josh Comeau Reset

  Eric Meyer Reset

  • 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

  • Do not capitalize "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.

  • 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.

  • 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

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

  Happy Coding! 🎄🎁

  Marked as helpful

  1

  ---

  

  Lizbeth García Lebrón•20

  @Lizz3108Posted almost 2 years ago

  @vcarames Thanks for the resources I will check them out and reach out in case I need clarification.

  0

  

  Lizbeth García Lebrón•20

  @Lizz3108Posted almost 2 years ago

  @vcarames Hey I got a question but is not related to this challenge. do you have slack?

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Lizz3108

  Unfortunately, I don’t. What’s up?

  0

  

  Lizbeth García Lebrón•20

  @Lizz3108Posted almost 2 years ago

  @vcarames do you by any chance have any resources about how to turn an SVG map into an interactive one using CSS? I have been trying to find but most of them used a site that builds websites without coding.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Lizz3108

  With pure CSS, that might be tricky, depending on what features you want… you definitely need JS make it fully interactive.

  What type of features do you want the map to have?

  Here are some articles:

  https://css-tricks.com/svg-map-rollovers/

  https://betterprogramming.pub/creating-an-interactive-map-using-svg-and-css-94a688c11bd6

  0

  

  Lizbeth García Lebrón•20

  @Lizz3108Posted almost 2 years ago

  @vcarames

  I want that when the user presses the map they get redirected to another section of the website.

  By the way, I just tried out the article, and it works. I can hover over the city it changes colors. Thanks, man!!

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Lizz3108

  Awesome!

  I would apply the anchor on the cities themselves, using the class the cities have on them.

  0