Product-preview-card-component-main

Well done! I have some suggestions regarding your solution if you don't mind:

• In my opinion, Add to cart is much likely to be a <button> with type="submit" instead of <a>, in a <form>. To know when to use one or the other in a specific situation, you must understand that every action on site falls under two different categories:

1. Actions where users affect the website’s back-end or front-end.

2. Actions where users won’t affect the website at all.

Action where users affect the website itself is where you use a button. For example, sign-up and purchase actions are often buttons. The user in these situations are creating a new account and completing a monetary transaction, which are actions that affect the website’s back-end. Creating new posts or making comments are actions that change a website’s content and what the user sees.

Actions where users won’t affect the website are where you use a link. These actions that take users from one page to another without changing anything on the website’s back or front-end.

• I recommend to use <picture> tag in HTML to specify image resources. The <picture> tag contains<source>and <img> tags. This way the browser can choose the image that best fits the current view and/or device. If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first<source>element with matching attribute values, and ignore any of the following elements.

The alternate text in the product image should not be empty it should describes the product.

• In HTML, the <del> tag is used to identify text that has been deleted from a document but retained to show the history of modifications made to the document. Strike through is a CSS property and does not carry any semantic meaning as inserted or deleted for screen readers. For screen reader: <del>deleted indicates text removed. In this instance, the two prices are read out which can be confusing.

• The cart image in the button is a decorative image. For decorative images, you set an empty alt to it with an aria-hidden=”true” to remove that element from the accessibility tree. This can improve the experience for assistive technology users by hiding purely decorative images. Remember the alternate text should not be hyphenated, it should be human readable.

• You should use object-fit: cover; to the image which sets how the image should be resized to fit its container. object-fit: cover; maintains its aspect ratio while filling the element's entire content box.

• width: 800px; an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem.

• height: 600px; It's not recommended to set fixed height to component, you almost never want to set it. let the content of the component define the height.

• line-height: 25px;Use a unitless line-height value to Avoid unexpected results. You can read more in mdn

• It's recommended to set letter spacing values in em.

• Remember a modern css reset on every project that make all browsers display elements the same.

Overall, great work! hopefully this feedback helps.