Skip to content
Submitted about 2 years ago

My Product preview card component solution with HTML / CSS

Aurélie•70
@aureliemesbahi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everybody,

I really need to improve my code so don't hesitate to give some advice or review about my code.

Happy coding :-)

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @aureliemesbahi 👋, good job on completing this challenge! 🎉

    I like this solution for the challenge. Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further:

    • Try to use semantic tags in your code. It should have the main tag that groups all of the product card elements:
    <body>
   <main class="card-container">
      . . .
   </main>
<body>
    • On big screens, the card container isn't centered correctly. You can use flexbox to center elements:
    body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    Additionally, remove the margin to center the card correctly.

    @media (min-width: 1100px)
.card-container {
    .  .  .
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* margin-top: 21.87vh;
} }

.card-container {
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* margin-top: 16px; */
    /* margin-bottom: 16px; */
}

    Links with more information:

    .

    • In this challenge, you should not use the background property to set the image because this image has semantic meaning. Use the CSS background property if the image is not part of the content.
    • You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query to modify the image.

    Example:

    <picture>
   <source media="(max-width: 1100px)" srcset="./images/image-product-mobile.jpg">
   <img src="./images/image-product-desktop.jpg" alt="your_alt_text">
</picture>
    • The <div> tag defines a division or section on a website. It is used to style a container with CSS, set special alignment, or position content. It might be more efficient to use the <p> tag; the <p> element represents paragraph-level content, usually text:
    <p class="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
    • You could use the <del> tag to display the old price:
    <del class="older-price">$169.99</del>

    I hope those tips will help you.

    Good job, and happy coding!

    Marked as helpful
    1
    Aurélie•70
    @aureliemesbahiPosted about 2 years ago

    Hi @MelvinAguilar

    Thank you so much for taking time to see my work and for your comment. It's really usefull because he make me learn a lot.

    I didn't know <del> and i didn't think about this solution for the picture and you're right it's a better one.

    My goal is now to do every challenge to pratice a lot and improve my way to coding so i really appreciate your usefull comment.

    1
    Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    @aureliemesbahi Happy to hear that was helpful! 😊 I hope you achieve all your goals!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord