Skip to content
Submitted about 2 years ago

Faq Accordion Card (Using pure HTML & CSS)

Naleeka•470
@Naleeka
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

👨‍🚀 This is my solution for Faq accoridon card challenge

The challenge was to complete this without using JavaScript

Break points

  • 1440px -Desktop Devices
  • 768px -Tablet Devices
  • 375px -Mobile Devices

Feel free to leave your thoughts

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hi, Naleeka! 👋

    Congratulations on finishing this challenge! 🎉

    For accordions, I would recommend using the native HTML elements, summary and details elements. It's much easier to style and by default, it is accessible by screenreaders since it tells the screenreader whether the accordion panel is expanded or collapsed.

    Regarding the breakpoints for the media queries, you should add media queries whenever it is needed. Those breakpoints should not be based on specific screen sizes. You want to add media queries whenever it is needed like when the layout is broken. Currently, 1440px width for the desktop layout is too late. I would recommend adjusting the media queries breakpoint.

    That's it! I hope this helps! 🙂

    Marked as helpful
    1
    Naleeka•470
    @NaleekaPosted about 2 years ago

    @vanzasetia Thanks for the advice man 🖤

    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