Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card Component

P
Ebenezer 540

@ekankam

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback is welcome. Thanks!!!

Community feedback

@bramizdev

Posted

Looks great!

If you would like to add more semantic value. I would wrap the "old price" in a <del> tag.

The <del> tag is an HTML element that is used to indicate that text has been deleted or removed from a document. It is typically used in combination with the <ins> tag to show changes to a document over time.

The <del> tag can be used to apply a strikethrough effect to text, similar to the <s> tag, but it is more semantically meaningful and provides additional attributes that can be used to specify when the text was deleted and who deleted it.

For example, you might use the <del> tag to indicate that a particular sentence or paragraph has been removed or replaced in a document, while leaving it visible for reference. You can also use the datetime attribute to specify when the text was deleted, and the cite attribute to provide a reference to the source of the deletion.

Overall, the <del> tag is a useful tool for indicating changes to a document over time, and can help to improve the accessibility and semantic structure of your HTML.

BTW: In my solution I used the <s> tag, but I just learned that it is deprecated.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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