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

faq-accordion-card-main solution

@Philip-Droubi

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


Hey everyone 🙋‍♂️, this is my solution for faq-accordion-card-main challenge.

Please take a look and give me some feedback. Thanks :)

Community feedback

@IamArshadAli

Posted

Amazing Solution with Clean Code 🚀

Out of curiosity, your clean and accurate solution led me to check the lighthouse report and congratulations it is a clear 98% 🎉

You may need to add a <meta name="description" content="..."> to your <head> and specify explicit width and height to your arrow buttons to get a full score of 100%🔥

Also, after reviewing your code, I learned some tricks about relatively positioning multiple images which I can use to improve my version of this challenge. ✌️

One more thing to add: You can try doing the same challenge without using JS. You just need to implement the same thing using:

<details>
  <summary>...</summary>
  <p></p>
</details>

Learn more about <details> and <summary> elements from here.

Thanks for writing such an amazing solution. 😉

Happy Coding! 🤓

Marked as helpful

2

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