Submitted about 1 year ago

FAQ Accordion Card Solution using Sass, BEM, and Responsive Design

#bem#sass/scss#accessibility

Alex Garcia 🦝 Garcialexco• 440

@garcialexco

Preview site View code

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

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

Vanza Setia• 27,855

@vanzasetia

Posted about 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 helpful

Alex Garcia 🦝 Garcialexco• 440

@garcialexco

Posted about 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! 😄

Vanza Setia• 27,855

@vanzasetia

Posted about 1 year ago

@garcialexco

No problem! 👍

Abdul Khalid 🚀• 72,140

@0xabdulkhalid

Posted about 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 helpful

Alex Garcia 🦝 Garcialexco• 440

@garcialexco

Posted about 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! 😄

Please log in to post a comment

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