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 with no JS

#accessibility#bem#sass/scss

@AmirhosseinHashemi

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


Hello everyone

This challenge was a really nice challenge for me and I do my best to write clean, accessible and use semantic tag.

What I learned :

  • I learned about details and summary tag which introduce in HTML5 and helps to create FAQ accordion without JS.

  • Learned about figure tag which introduce in html5 and learned how to use picture tag to change image just with html.

  • learned about meta tag with description name that explain content of page

Built with :

  • HTML
  • SCSS
  • Mobile-first

you can see the result here --> My solution

Feel free to comment any idea about anything :)

Community feedback

@3eze3

Posted

Hello name, good result with this challenge, I have some questions you may find useful. Scss:

  • Instead of using the "@import" rule in the main.scss file to import partials, it is recommended to migrate to the "@use" rule. The "@use" rule provides greater flexibility and more effective scoping compared to the discontinued "@import" rule.

  • It would be highly beneficial to consider using mixins for repetitive styles, such as media queries and flexible layouts using flex layout. This strategy allows for cleaner code and centralizing repetitive styles within mixins, which creates better code organization.

  • It has been observed that, in the interaction with the details of each block, multiple blocks can be allowed to open simultaneously without closing the previous ones. This behavior can negatively affect the page layout. It is suggested to apply a "max-height" property to the corresponding container to avoid possible mismatches when opening a block and, in this way, maintain consistency in the design.

JavaScript:

  • In addition, one could consider implementing a class system that, when opening a block, removes the classes in the other blocks, so that they are automatically closed. This solution would add an additional level of control and ensure a more consistent interaction.

Happy coding 🍞

Marked as helpful

0

@AmirhosseinHashemi

Posted

@3eze3 hello my friend

Thanks a lot for your useful help.

  • I will use your tip in my next challenge.
  • about using mixins I think increase mixins make code messy so when I use mixins that decrease considerable lines my code.
  • After that I will apply specific height for question block it's really bad for layout.

happy coding :)

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