Product Preview Card (Grid)

Community feedback

• 

  Fox•550

  @urboifoxPosted almost 2 years ago

  Hey Mohamed, Congrats on completing this challenge🔥

  I have some tips that you might find interesting!

  first things first:

  html 📄

  • you shouldn't use the <main> element as your card in the page, The content inside the <main> element should be unique to the document 🙌. It should not contain any content that is repeated across documents, (it just contains the main elements in the page)
  • instead of using the img element you can use the picture element and change the img depending on the user screen size 👀, you can learn more about picture element from here📌
  • instead of using the <div class="container"> element you could have used the <article> element, the <article> element represents a self-contained composition in a document, page and it's perfect for such cases when you have one or multiple cards.

  CSS 🎨

  • you dont have to use values like 0.875rem and 0.625rem thats not practical, if you want to come up with a solution that matches the original design you can use extenstions like perfectPixel🙌 keep in mind that on style_guides.md you had the recommended font size, and for the padding sizes you shouldnt write more than one decimal point so keep that in mind.
  • you should use @media media queries to change the style of your card depending on the user screen width, you can learn more about media queries from here💻: for example on the screens that are smaller than (767px) you want your card flex-direction to be column instead of row so the code will be something like this:

  media (max-width:767px) {
    .card {
      flex-direction:column;
    }
  }
  

  I hope this helps!🙌

  good luck on your next solutions😄

  Marked as helpful

  0