@MelvinAguilar
Posted
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:
- The Complete Guide to Centering in CSS.
- A Complete Guide to Flexbox (CSS-Tricks).
- How TO - Center Elements Vertically (W3Schools).
- CSS Layout - Horizontal & Vertical Align (W3Schools).
.
- 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
@aureliemesbahi
Posted
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.
@MelvinAguilar
Posted
@aureliemesbahi Happy to hear that was helpful! 😊 I hope you achieve all your goals!
