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-component using : HTML, CSS, SASS

Parthβ€’ 75

@ParthPatel76

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


Please give your feedback and review my code and design !! I have tried my best to design as close as possible to the given challenge. I would really appreciate your feedback.

Thank-You !! Parth :)

Community feedback

P
Daveβ€’ 5,245

@dwhenson

Posted

Hey @ParthPatel76 Good work on this one - it's a tricky one for sure!! Your page looks good and responds well at smaller screens which is great! πŸ™Œ

Here's some points you might like to consider:

  1. Firstly good job making this work with no JS! My only suggestion would be that the sections should expand on a click rather than hover, and that some transition would be nice here as it's quite abrupt at the moment.

  2. One way to make this all much easier is to check out the details and summary elements. These have a lot of the functionality you are looking for built it. This will make it easier to change things on click rather than hover.

  3. You also add some opening transitions or even a simple animation to make things look smooth if you really wanted to make things look good. And again you can do all this without JS and it will help with some CSS selector practice!

Finally, just to say nice work on the image positioning. This is something I really struggle with but you seem to have done a great job here! πŸ‘

Hope this helps and keep up the good work!! πŸ‘‹

1

Parthβ€’ 75

@ParthPatel76

Posted

@dwhenson

Hey, thanks for such a great feedback, I really appreciate it.πŸ‘ I will definitely make the required improvements, considering your suggestions.

Thanks, ParthπŸ™‚

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