Product Preview Card

Hello there 👋. Good job on completing the challenge !

I have some feedback for you if you want to improve your code.

• Questions:

  1. For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here 📘.

  2. Yes, you can use the CSS property width: 100% to make the button stretch horizontally to the margins. This will ensure that the button always takes up the full width of its parent container, regardless of how wide it is.

  3. You can try decreasing the padding of the button and increasing the font size slightly to make it fit. the "content box" cannot be adjusted, as it adapts to the width, margin, and padding, and because of the large padding of the button, it doesn't have enough space for all the text to fit on a single line.

HTML 📄:

• Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

• Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

• You could use the <del> tag to indicate the price that was before the discount. Additionally, you can use a sr-only class to describe the discount. This will help screen reader users to understand that the price was discounted.

  Example: <del><span class="sr-only">Old price: </span>$169.99</del>

• The alt attribute is used to provide a text description of the image which is useful for screen reader users, assistive technology users, and search engine optimization. Add the alt attribute to the <img> tag of the product.

CSS 🎨:

• Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!