FAQ Accordion Card Without JavaScript

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great job on this one. Desktop layout is great, however the responsiveness and mobile state should be addressed since right now, resizing the layout until mobile breakpoint, the image is just gone since it is small, and the mobile state, the contents are being hidden.

  Elaine already gave great tip on this, just going to add some suggestions as well:

  • Avoid using height: 100% or 100vh on a large container like the html and body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Those decorative images on the site could have use an extra aria-hidden="true" attribute so that they will be totally hidden alongside with the alt=""
  • You don't need to use header on this one since this just looks like a main component of a page. You can just use div on the FAQ.
  • Using checkbox on this is not really suited since there are more accessible and suited elements to be use, also do not use display: none on an input element, don't, you are removing this completely on the dom, visually using mouse you can click the label right but it is limited to that, you can' use keyboard or screen-readers.
  • Instead, a good approach to avoid extra manipulations, you could use details element for each accordion. This is much suited and accessible from the start.
  • Also right now, clicking all the accordion overlaps the container, you might want to check that one out.
  • Lastly, just the responsiveness and the mobile view needs to be adjusted.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Alisha•20

  @AlishaSoPosted about 3 years ago

  @pikamart Raymart, thanks again for checking out my solution! I just understood this height limitation thing with this project. That's the reason why my text goes over the edge when you open more than one question at a time (yikes).

  I really appreciate all your helpful advice!! Clearly there's a lot I have yet to learn, and it's nice to have some feedback from more advanced developers 😁

  How long have you been doing frontend?

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @AlishaSo Hey, glad that I could help with it!

  Well I am reaching my 10th month this October 17 doing fullstack web dev so yeah, 10 months with frontend as well^^

  I mostly review the markups and accessibility for every challenges but if others asked for a js checking or react, I do it as well as long it won't be a full review, just section of the problem within the code^^

  0

  

  Alisha•20

  @AlishaSoPosted about 3 years ago

  @pikamart oh wow, only 10 months!! That's really impressive! Is there a particular source you would recommend for beginners like me?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @AlishaSo Well I don't really have resources about web dev since I just google most of the things that I need.

  But of course when beginning in frontend, you should just first focus on using proper html elements so that your markup will be structured and I mean really focus on it, as long as you grasp those fundamentals at html, css and js, do not go into frameworks/library yet, don't. Because lots of solutions that I reviewed uses frameworks but their markup is really bad. Using un-interactive elements in an interactive elements.

  So just a tip at using markup, if you don't know what to use on such components, like a hamburger dropdown the menu dropdown, you should add like "accessible" word when googling like "accessible menu dropdown".

  A challenge as well is to create an accessible form, because you might build a form which works, showing errors but is only limited to sighted users, how about people who can't see. Making components inclusively.

  Also when in javascript, if you somehow takes courses in js, you might find your self doing data structures & algorithm and that always bugs dev when starting in frontend, because you might ask "where can I apply this on my website" and that is a struggle. So my advice is don't go first in dsa, just learn some functions and methods that you will use on your site or challenge, googling just what you need so that you won't be derailed.

  Also there are resources in the resources page here in fem, you might find some that will be beneficial for you in there.

  Also you can follow me so that you can see some of my reviews and you check it as well. I'll follow you so that I could see your submission and I can review it always. I have snippets as well of different accessible components and if I saw some components of yours that needs to use proper markups, I will add those link in the review.

  Also, join the slack community of frontendmentor and you can always ask in the help channel^^

  Marked as helpful

  0

  

  Alisha•20

  @AlishaSoPosted about 3 years ago

  @pikamart seriously, thank you SO much for all the advice! I have a CS degree, but have not worked in the industry yet. That's why I'm trying to learn frontend, because this is more engaging to me than writing Java code all day. I checked out the Resources tab and see that many of those I've seen and used, but forgot all about. I may need to revisit them haha. Following you now!

  1
• 

  Elaine•11,400

  @elaineleungPosted about 3 years ago

  Hi Alisha, I just completed this challenge as well; you can have a look at my repo and see if that helps: https://github.com/elaineleung/frontendmentor/tree/main/accordioncard

  I see in your live site that the text overflows outside of the card when all of them are clicked. I checked out your code but I couldn't figure out how the questions and answers are being expanded as I can't find your JS file, and the HTML doesn't show the link either. Anyway, you can check out my live site and see whether that's something you're looking for, and hopefully my code can help you out. Good luck!

  1

  ---

  

  Alisha•20

  @AlishaSoPosted about 3 years ago

  @elaineleung Hi Elaine! Thanks for checking out my solution! The thing is I did not use JS for this project at all. The accordion behavior is all CSS. I noticed after uploading my solution that by setting the height of my element I was messing up the resizing of the card when more than one question is opened at once.

  By the way, I saw the way you handled the shadow on desktop. I have to say, it took me foreverrr to try and position mine and it still was not correct. I will be referencing your code in the future if I need to, for sure!

  0

  

  Elaine•11,400

  @elaineleungPosted about 3 years ago

  @AlishaSo That box shadow is tricky, and mine still doesn't match the original's, but honestly the box shadow had a lower priority on my list compared to the other elements, so I didn't spend too much time tweaking!

  BTW, in your original post when you mentioned making the background position more static, I'm guessing you mean how to make it fixed to one position? If so, I did that using position: absolute on the images and then position: relative on their parent elements.

  I've seen some others use only CSS also, and personally I think that's fine as long as you can achieve the desired effect in the end. It is good to keep in mind though that the challenge includes JS, so that could be something to tackle in the future!

  I learned most of my CSS from Scrimba, which I highly recommend using. They have a lot of free courses actually, and their paid membership is also worth looking into.

  Marked as helpful

  1

  

  Alisha•20

  @AlishaSoPosted about 3 years ago

  @elaineleung I will look into that. I had heard about it before but tbh, totally forgot it exists lol

  I will probably come back to this challenge and do another solution using JS, I just wanted to focus more on HTML and CSS as I feel like those are where I lack the most. I've read a lot of HTML/CSS theory/documentation, but it's hard to translate that to my code. Scrimba should help out with that, along with these challenges 🙂

  0