Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive accordion layout; SCSS with BEM

LEUILLIER 120

@JulienLEUILLIER

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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 !

Community feedback

@pikapikamart

Posted

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

1

LEUILLIER 120

@JulienLEUILLIER

Posted

@pikamart Very nice of you to take the time ! Thank you, I will look all those up.

1
P
Ken 4,915

@kens-visuals

Posted

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

1

LEUILLIER 120

@JulienLEUILLIER

Posted

@kens-visuals Thank you, will look that up ✌️

0

@Al-Baraa-Bakri

Posted

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

1

LEUILLIER 120

@JulienLEUILLIER

Posted

@Al-Baraa-Bakri Hi, thanks ! I saw your solution and it was a nice way of adding transition to the menus. I'm using display:none which can't be animated, I'll try another way later on, I think keyframes can work! I'll add some feedback on your solution as well.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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