Product preview card component

Community feedback

• 

  Jean Ruiz•590

  @jeancarlosruizPosted almost 2 years ago

  Hello Michal :D

  Congratulation on finishing this challenge, here are my suggestions detailed below:

  -HTML:

  -- <picture>: Using a picture tag you avoid using background-image setting width and height, inside of the picture tag set a main img and a source tag setting when the image will change with media query. Example with a mobile first workflow: Documentation, Video.

  <picture>
  <source media="(max-width: 810px)" srcset="img-mobile-location.jpg">
  <img src="img-desktop-location.jpg" alt="img-desktop"/>
  </picture>
  

  -- <h2> or <span>:

  • You can use an h2 or a span rather than h3 in <h3>Perfume</h3> because in order to use an h3 it needs to come after an h2 and so on. In my opinion the best solution for this is using a span. documentation

  -- SVG:

  • Since this SVG does not contain any visible text that describes the graphic, we need to add the alternative text (invisible) by:
  • Inside the <svg>, add: <title>A short title of the SVG</title>
  • Add the appropriate ID’s to the <title>: <title id="uniqueTitleID">The title of the SVG</title>
  • On the <svg> tag, add: aria-labelledby="uniqueTitleID documentation

  -CSS:

  -- rem:

  • For font-size is a must for accessibility, because px in some browsers doesn't resize when the browser settings are changed. documentation
  • Website to converte px to rem easly: PX to REM

  Best Regards, Jean Ruiz

  Marked as helpful

  1
• 

  namborghinii•220

  @namborghiniiPosted almost 2 years ago

  Good job on completing the challenge! :)

  Please remember to set font-family as well as font-weight for the different kind of sections.

  Marked as helpful

  1