
FAQ Accordion using SCSS and no JS (with pseudo-element :checked)
Design comparison
Solution retrospective
I would really appreciate some tips on using Sass because this is my first time using it in a real project and I feel like I over-complicated it and the responsive part was really messy to do but I liked the results. I decided to use :checked pseudo-element for a css-only approach and added a little animation on the box image because I thought it was gonna be fun to do it but looking at it now it looks kinda laggy and weird so I would like some tips on that and literally on anything else that you guys think can be improved, also I used overflow for the FAQ list so it won't break the design when the item is open but it doesn't look intuitive at all to scroll down so maybe I should add a custom scrollbar (?). Anyway, would love to get some feedbacks from you. Thanks! :)
Community feedback
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