Product Card Challenge Solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @boibolang, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  1.Add <main> instead of <div> to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.

  2.Instead of use ID to give style to your elements, use CLASS that’s better, note that with id these styles are not reusables, so prefer to use ID forms and Javascript and CLASS for styling.It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again.

  3.A better way to work this solution image, the product image is by using <picture> to wrap it on the html instead of using it as <img> or background-image (with the css). Using <picture> you wrap both images (desktop and mobile) and have more control over it, since you can set in the html when the images changes setting the screen size for each image.ote that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image.

  Here’s the documentation and the guide to use this tag: https://www.w3schools.com/tags/tag_picture.asp

  See the example below:

  <picture>
    <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
    <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
  </picture>
  

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  boibolang•40

  @boibolangPosted about 2 years ago

  @correlucas thank you for the advices

  0
• 

  P

  birkaany•240

  @birkaanyPosted about 2 years ago

  Hello, firstly congrats completing the challenge!

  I think everything seem to be beautiful as in general. About your question; as you're aware of flexbox, I highly reccomend you to dive into flex concept before proceed. It's gonna make your life much much easier.

  Trying to position whole compenent center via margin is not a good practice I believe. Instead of this, you could try this method;

  body{
      background: hsl(30, 38%, 92%);
      position: relative;
      min-height: 100vh;
  }
  
  .container{
      max-width: 500px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
  }
  

  By setting parent element relative, you can position your child element according to parent element's position. You can use same technique with the price tag. Set parent element's position to relative, then push the child element from top (top:50%) and pull from bottom (transform: translateY: -50%). Or you can simply use flexbox :)

  I hope that helps a little bit. Happy coding!

  Marked as helpful

  0

  ---

  

  boibolang•40

  @boibolangPosted about 2 years ago

  @birkaany thank you for the advices

  0