Skip to content
Submitted almost 4 years ago

FAQ Accordion using SCSS and no JS (with pseudo-element :checked)

Guilherme Magno•300
@devMagno
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    Hey, Guilherme Magno! 👋

    Good work on this challenge! Your solution looks good and works great (especially in the mobile layout)! I like how you changed the favicon of the site to the floating cube! 👏

    The animation you added to the floating cube is pretty cool, although as you mentioned, seems a little laggy (that might be because you are animating the top property, which isn't optimized for animation, as far as I know—trying using the transform property and the translate function to animate the floating cube instead). I did the exact same thing when I completed this challenge, too (our great minds think alike—LOL, IDK)! 😂

    I suggest increasing the height of the accordion and decreasing the font-size of the text inside it just a little in the desktop layout so that there's more room for the content inside to be seen. 😉

    BTW, you can use the HTML <details> and <summary> elements to create a HTML/CSS-only accordion very easily (since those elements were practically made for that). 😀

    Your Sass looks fine to me (kudos for trying it out in this project). You're separating your Sass into different files, which is a good practice and makes your project so much more organized!

    Keep coding (and happy coding, too)! 😁

    1
    Guilherme Magno•300
    @devMagnoPosted almost 4 years ago

    @ApplePieGiraffe Thank you man! Hope you're having a good evening. I'm new to animating with CSS so I was just using something I saw on a tutorial, but now I switched to transform and it looks so much cleaner! About the <details>, I knew the tag existed but I found out about it when I was finishing the challenge, so I didn't bother to change. Thanks for your feedback, happy coding bro! 👊

    1

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