FAQ Accordion Card Solution using Sass, BEM, and Responsive Design
Design comparison
Solution retrospective
Hello! Here is my solution for this challenge. π
I had a lot of fun with this challenge! I am still trying to get the hang of Javascript, please let me know honestly any critique and criticism that you have. I appreciate it in advance! π
Much thanks friends ππ½π»
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi, Alex Garcia π¦ Garcialexco! π
I recommend providing a non-minified CSS for code review. This way, people can easily review the entire stylesheet.
I would like to suggest some improvements.
- Use native HTML elements for the accordions by using
<details>
and<summary>
elements. Right now, I can't access the accordions using keyboard. - Having a desktop layout at 1440px width is too late. You should make the website using the desktop layout as soon as there is enough space.
I hope my suggestions help you. Have fun coding! π
Marked as helpful2@garcialexcoPosted over 1 year ago@vanzasetia Thank you! That helps a lot, I see what you mean about it not being accessible via keyboard. For sure, I will keep that in mind. Thank you very very much for your review! π
0 - Use native HTML elements for the accordions by using
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing your first challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
HTML π·οΈ:
- Since this component involves decorative svg's, here those images are only a decoration, so it must have an
alt
attribute with""
empty value.
-
Eg:
<img src="./assets/images/example-image.svg" alt="">
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful1@garcialexcoPosted over 1 year ago@0xAbdulKhalid Thank you very much for your help! I knew I was missing something with those alt tags. I fixed it, and hopefully it is better than it was.
Thank you again! π
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