FAQ accordion card using HTML, SCSS, Grid and Flexbox and JavaScript

Community feedback

• 

  P

  Jeff Guleserian•480

  @jguleserianPosted almost 2 years ago

  Jeroen,

  Hey, I really like your solution to the FAQ Accordion Card. Especially:

  1. you got the stacking/layering of the images and their placement spot on.
  2. Your animations work flawlessly.
  3. I see you used SASS through Node.js. I'm impressed, though I admit that I am a neophyte when it comes to SASS, so I'm afraid I couldn't provide much feedback for you. But the fact that you are studying some backend technologies give you a "thumbs up" in my estimation.
  4. I noticed you put your media queries in a separate stylesheet. I usually list mine on the same stylesheet with my other CSS. I'll have to try it your way and see if it makes it easier to track/code.

  You might consider:

  1. Using more semantic HTML, instead of <div>, try <section> or <article>. They behave the same way plus it makes things easier to navigate, plus, screen readers pick up on it and it helps in the interpretation of the site to someone visually impaired.
  2. While I like your creative solution to the according (with a <button>, I would have never guessed - hey! it works), next time you might try the <details> tag, which already has all the components built in, including the animated caret. It could save you time and lots of lines of code.
  3. I noticed that your CSS reset template was pretty thorough. I am guessing that you cut and paste it in from another source. It certainly covers everything, but if your goal is a quick-responding website, less is always more, and I would go back and take out the stuff that you didn't need at the end. For example, the overflow-wrap property isn't really necessary.
  4. Using the display: grid in your main container was my solution as well. however, you might want to look more closely at the columns when you do that. In this case, they were not quite even, so the grid-template of 1fr 1fr meant it was going to require more overriding to get things to fit properly. As a result, some of your elements are misaligned on each side.
  5. I also noticed that your main container was changing height when an accordion was opened. Though the effect is interesting, I don't remember seeing it in the brief. Anyway, this is just an observation more than anything else. it makes me want to go back and try it.

  All that being said, I reiterate that I loved your solution. The comparison slider here on Frontend Mentor does not do it justice. It may be the dimensions of your screenshot or the fact that theirs has one of the accordions in the open position and yours does not. All I'm saying is that you did a good job and I learned a lot from perusing your files. Thank you for the opportunity. Job well done!

  Jeff

  Marked as helpful

  1

  ---

  

  Jeroen Leijnse•1,420

  @jrleijnsePosted almost 2 years ago

  @jguleserian Thanks a lot for your thorough feedback and suggestions, really appreciate it!

  0