Skip to content
Submitted over 1 year ago

Product Preview Card Component

Iggy19944•160
@Iggy19944
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Things I have learned from this challenge was:

  1. how to use <picture> element to offer alternate versions of an image for different display/device scenarios. good article here (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)

  2. How to write good markup tags for HTML. ( great article related to this assignment https://fedmentor.dev/posts/html-plan-product-preview/)

  3. How to write code for screen readers for hidden content, crossed out content, or market content using ::before and ::after pseudo-elements. article on it: https://adrianroselli.com/2017/12/tweaking-text-level-styles.html video refresher for psudo-element: https://www.youtube.com/watch?v=djbtPnNmc0I

Any feedback is appreciated, Thank you.

Code

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Iggy19944's solution.

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