Design comparison
Community feedback
- @John-Davidson-8Posted 3 months ago
Hi Sheikh-Mussadiq,
I really liked your solution to this Frontend Mentor project. A new thing I learnt when working on this project was the "visually hidden" attribute. I saw Kevin Powell using this while building this very project on Youtube.
On the card the original price of $169.99 is crossed out. I used the strikethrough element <s></s> and I see you used the delete <del> element. This is great for visibility, however, a screen reader can not pick this up — that the original price was $169 and the current price is $149. Kevin in the video shows how to place a span surrounding each price, and within the span element, a class called "visually-hidden." The first with "current price" typed in it, and the second surrounding the original price stating "original price." This is where the CSS comes into play to hide the extra text with the "visually hidden" attribute, which looks like this:
.visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;
This hides extra text from view. I hope you find this helpful and I will link Kevin's Youtube video below also, as he explains it a lot better than I can.
https://www.youtube.com/watch?v=B2WL6KkqhLQ&t=133s
Marked as helpful0@Sheikh-MussadiqPosted 3 months agoThank you for going through my code, and thank you for your suggestion. I will watch the Kevin video for a better understanding.
0
Please log in to post a comment
Log in with GitHubJoin 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