Responsive FAQ Accordion with Tailwind CSS

Community feedback

• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. You did a good job 😎

  keep improving your programming skills🛠️

  your solution looks great, however, if you want to improve it, you can follow these steps:

  ✅ please add alternative text. It'll improve accessibility

   <img
              class="absolute top-1/3 h-[900px] max-h-[900px] w-[900px] -translate-y-1/2 overflow-clip object-cover object-right"
              src="./images/bg-pattern-desktop.svg"
              alt=""
            />
  

  ✅ don't use tag selectors. When you add CSS directly on tags, your markup can’t change. Your style is tightly coupled to your DOM, and any change increases the risk of breaking things.

  ul li input[type="checkbox"]:checked ~ h2

  ✅ place the Google import code such that it loads first directly after the html HEAD tag, EVEN before loading the CSS file. This ensures the fonts load before the CSS so there isn't any unexpected "jumping" of when the font finally loads.

  @import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap");

  ✅ you can avoid using scripts by using radio buttons

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  Marked as helpful

  1

  ---

  

  Yash Kadam•280

  @yash-278Posted over 2 years ago

  @isprutfromua Thanks for taking your time, and giving me value able feedback. I mostly forget about the accessibility stuff sometimes 😅. I'll incorporate your feedback into this project and upcoming ones.

  Thanks a lot! 😊

  0

  

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  @yash-278 I am glad that my help was useful to you

  Cheers, peace and happy coding!

  1