Design comparison
Solution retrospective
More CSS practice!
I tried using sass. It was pretty easy to learn and to organize. I really liked that you can change the value of variables using darken() lighten(). Will definitely use for future projects.
Community feedback
- @0xabdulPosted over 1 year ago
Hello Developer well congratulations on Completing the Product preview card component
- A Some suggestions for improve your code
- In Html 📃 :
- LANDMARK 🚀
- The main landmark role is used to indicate the primary content of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the main function of an application.
- The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
- To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
- Note This Elements are don't sikp
- semantic elements :
<aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect.. - non- semantic elements :
<div> , <span> ect ... - for easy way to clear the Accessibility reports using non semantic elements Ex :
<body> <div class="container" role="main"> //Html code here </div> </body>- Or
- using semantic elements
- Ex :
<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>- I Hope you find the solution and it's useful comment for you your Product preview card component project is great 😊 Happy Coding Developer
0@madosyPosted over 1 year agoHi @0xAbdul, thanks for the feedback!
Honestly, my biggest gripe with semantic HTML is knowing which one to mark what in a logical manner since it feels like a guessing game for me.
What landmark/role would you suggest for my div.description, or div.price?
Also, as for the 2 spans in div.price, would I need a landmark for each of them as well? What would be the most logical one in this case?
Would I need to indicate a landmark/role for my button? If so, what should I mark it as?
0@0xabdulPosted over 1 year ago@madosy
<div class="product-container" role="main"> //Your whole html code here </div> and wrap them0@madosyPosted over 1 year ago@0xAbdul
I understand the product-container should probably be marked as main. And div.attribution should probably be footer...I think.
What I'm super unsure about are:
- div.description
- div.price
- div.price > span.current
- div.price > span.original
- button (if I need one?)
Thanks for the assistance with sorting through the confusion!
0@0xabdulPosted over 1 year ago@madosy
<body> <div class="product-container" role="main"> <div class="image"></div> <div class="details"> <h1 class="name">Gabrielle Essence Eau De Parfum</h1> <div class="description"> <p> A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL. </p> </div> <div class="price"> <span class="current">$149.99</span> <span class="original">$169.99</span> </div> <button>Add to Cart</button> </div> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://github.com/madosy/product-preview-card-component">Madosy</a>. </div> </div> </body> </html>- For your recommendation i should moderate your code
- The product-container div tag wrap the whole html code
0@0xabdulPosted over 1 year ago@madosy don't use the footer tag because I use the non sematic elements like <div> <span> for easy way to clear the all Accessibility reports so I use the role attribute in Product-container div tag
Marked as helpful0@madosyPosted over 1 year ago@0xAbdul
I think so. I'll just have to look at bunch of sites and see how they handled their accessibility I suppose.
But even for site like this one (a store specializing low-vision/blindness products): https://carroll.org/store/
When I inspect the html elements and check the accessibility tags, some things don't make perfect sense.
Forget accessibility on Netflix, Facebook, or Amazon. Almost all their links have accesibility role "general" :(
I'll just be more conscious of it and use it when I can when it makes sense.
0
Please log in to post a comment
Log in with GitHub
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