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

BEM, no JS

Pavel Drow 220

@Paveldrow

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


in this solution I did not use JS on purpose. in such solutions, can i'm use checkboxes?

Community feedback

T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, Pavel Drow! 👋

Nice effort on this challenge! 👏

You might be able to use checkboxes to make the accordion card in this challenge, but another great HTML and CSS-only approach to creating the accordion card is to use the <details> and <summary> elements. You can learn more about them from this helpful page from MDN.

BTW, I'd like to suggest,

  • Adding a hover state and an active state to the titles of the FAQs (as in the original design).
  • Doing a little more work on the responsiveness of the site (since the content on the page looks very squeezed between the desktop and mobile layouts of the site).

Keep coding (and happy coding, too)! 😁

1

Pavel Drow 220

@Paveldrow

Posted

Hellow, ApplePieGiraffe! 👋

Thanks for the review and hint about "details". Haven't met this tag before, it's really great. I'll work on the rest of the tips! Thanks!)👍

1
T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@Paveldrow

NP! 👍

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