FAQ

Hey, great work on this one. Layout in desktop looks great , the vector is just smaller than the design, the site is responsive and the mobile state looks great as well.

You already got great feedbacks which is really nice to see, just going to add some suggestions as well:

• Avoid using height: 100vh on a large container like the 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.
• You don't really need to create a separate element for the mobile-vector, you could have used a picture element so that you could define inside there the images that you want to show based on a certain screen-size.
• When using alt attribute, avoid using words that relates to "graphic" such as "logo" and others. An img is already an image/graphic so no need to describe it as one. But since all images here are purely decorative, hide them. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
• The accordion is not accessible. Remember, interactive components uses interactive elements. By using p you are making it not-accessible.
• You could use button in here, this will wrap the accordion question as well as the dropdown-icon ( to avoid extra markup, use the dropdown-icon as background-image for the button ). The button will have a default attribute of aria-expanded="false" and will be set to true via js, if the user toggles it and vice-versa.
• If you don't like to use button, use details element. This is already accessible and they are intended for dropdowns.
• Your accordion-answer is just being hidden visually but it is still being picked up by other assistive tech. When hiding elements, either use visibility or display , include either one in the transition so that your element will be properly hidden or not.

Aside from those, great work again on this one.

Hey @Al-Baraa-Bakri 👋🏻

I have some suggestion for the overall project.

• First things first, let's fix the background. Instead of a solid color, it should be a gradient, like this: background-image: linear-gradient(to bottom, #af67e9, #6565e7);
• Next, all the images in the project should have aria-hidden="true". You can read more about aria-hidden here.
• Also, try implementing shadow on the card. Check out this link for some cool box-shadows.
• Lastly, accordion only works when I specifically click on the arrow. I'd suggest adjusting JS, so it also works when I click on the text.

I hope this was helpful 👨🏻‍💻 overall, you did a great job especially with responsiveness. Cheers 👾

Good work !

I would allow users to click on the whole .line element to see the answer. I think you're also missing the mobile background image on mobile layout! Keep up the good work!

Hi Al-Baraa,

I just want to say your project looks great! I like the animation you made for your accordion :) Keep it up. There isn't much for me to suggest as other members already gave great points!