Skip to content
Submitted almost 4 years ago

Responsive accordion layout; SCSS with BEM

LEUILLIER•120
@JulienLEUILLIER
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Second FrontEndMentor challenge completed !

I complicated things at first by trying to make the images responsive in size with the screen width, to be able to have a flexible width for mobile. I ended up just leaving a fixed size but learned some awesome ways to get responsive images ! I also tried to implement BEM to get some, I think, clean and maintainable SCSS code.

Any comment would be highly valued !

Code

Please log in to post a comment

Log in

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart

    Hey, awesome work on this one. Layout looks great in desktop, it is responsive and the mobile state looks great as well.

    You already got some feedbacks on this, just going to add some small suggestions:

    • Do not use a tag for the accordion toggle since those are not links, use button instead because it is a control element for the accordion.
    • If you are going to use button don't forget to add a default aria-expanded="false" attribute on it, it will be set to true if the users toggles the button and vice-versa. This will let your users know that is has expanded something to be seen.
    • The dropdown svg should be hidden so add aria-hidden="true" on it. Remember to always hide decorative images.

    Aside from those, great work again on this one.

    Marked as helpful
  • Ken•4,915
    @kens-visuals

    Hey @JulienLEUILLIER 👋🏻

    I just have one small suggestion, I suggest adding aria-hidden to the box image, like this <img src="/images/illustration-box-desktop.svg" alt="" aria-hidden="true" class="hide-for-mobile card__box">. You can read more about aria-hidden here.

    I hope this was helpful 👨🏻‍💻 looks good on every viewport width size, well done. Cheers 👾

    Marked as helpful
  • Al-Baraa Bakri•330
    @Al-Baraa-Bakri

    good job :) I just finished this challenge .. What About Add Some Transition ?

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