FAQ Accordion Card using React

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  ACCORDION 🔴 :

  • The best way to go with creating the accordion elements in this challenge would be with the details and summary elements (or perhaps a combination of buttons and other elements).

  ---

  • They are already fairly accessible and provided a clean, semantic way to create accordion elements. I see you have used the div, h2 & p elements for the accordions, but those are not interactive or accessible by keyboard, so not all users will be able to open the accordions to see the content inside.

  ---

  • MDN's reference is a great place to start learning about the details and summary elements if you are interested.

  ---

  • If you have any questions or need further clarification, you can always check out my submission for this challenge and/or feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  Kamlesh Rajesh Yadav•5,060

  @Kamlesh0007Posted over 1 year ago

  When working with images and styles in React, it's important to follow a recommended approach for organizing and importing them. Here are a few tips:

  ◉ Images: Keep your images in the 'src' folder if they are specific to your application and not meant to be accessed directly by users. Create a separate folder, like 'src/images', and store your images there. To use an image, import it directly into your JavaScript or JSX files using the 'import' statement. For example, you can import a logo image like this: import logo from './images/logo.png';. Once imported, you can use the 'logo' variable in your components to display the image.

  ◉ Styles: Place your stylesheets (CSS,etc.) in the 'src' folder as well. You can create a folder like 'src/styles' to keep them organized. To apply styles, import the stylesheets into your JavaScript or JSX files using the 'import' statement. For example: import './styles/main.css'; This allows you to use the defined styles within your components.

  ◉ Public folder: The 'public' folder is used for static assets that need to be publicly accessible, such as the 'index.html' file and favicon. You can place your favicon.ico file directly in the 'public' folder, and it will be automatically included in your application.

  By following these practices, you can ensure a well-organized and maintainable codebase. If you have any further questions or need additional clarification, feel free to ask.

  Marked as helpful

  0