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 page using HTML, CSS and JS

ramneekdev089• 30

@ramneekdev089

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

This was my first project with JS and I did it very quickly.

What challenges did you encounter, and how did you overcome them?

The most challenging part was assigning the navigation buttons, I assigned the enter button but not the up and down buttons.

What specific areas of your project would you like help with?

I would like to get help with the up and down navigation buttons, how can I assign them?

Community feedback

P
Chamu• 12,970

@ChamuMutezva

Posted

Hi ramneekdev089

I have gone through you project , below is my suggestion:

HTML

  • They are recommended methods that should be used when you are using more than image that should be displayed depending on screen sizes. Such images should be displayed using the srcset , picture element or as background images. Refer to MDN responsive images on how to implement these. Another point to note , is that images should have a meaningful alt value. The alt value should carry a descriptive message that can be interpreted by screen readers or in the event that the image fails to load - the message should be clear. If the image is decorative - then the alt value should be blank.
  • interactive elements such as buttons should have readable text , that is the only way assistive technology users are able to tell how they should handle the button. A button without text is confusing to users.
  • read also the following article on how to create an accessible disclosure pattern

CSS

  • a modern reset stylesheet is needed so that the site can be adaptive to various browsers

  • font sizes should be written in either rem or em, px values are not recommended since they are not responsive. The following article can explain better on the reasons why font sizes should never be in px values

Marked as helpful

0

ramneekdev089• 30

@ramneekdev089

Posted

@ChamuMutezva Thanks a lot

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