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

Advice Generator (FLEXBOX + JS + MOBILE-FIRST)

idriss khβ€’ 370

@drisskhattabi6

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@MelvinAguilar

Posted

Hello there πŸ‘‹. Good job on completing the challenge !

I have some feedback for you if you want to improve your code.

  • There isn't much information about what the button is for, and icon-dice as the alt attribute value is not very descriptive, screen reader users will hear "Button, icon-dice" and they won't understand what the button does. You can use Generate new advice as the alt attribute value. You can see an example here.
  • Not all images should have alt text. The divider image is a decorative image, it does not add any information to the page. You should use an empty alt attribute instead of a descriptive one. You can read more about this here πŸ“˜.
  • Note: The Advice Slip JSON API documentation says that the repeat requests within 2 seconds will return the same response

CSS 🎨:

  • Avoid using uppercase text in your HTML because screen readers will read it letter by letter. You can use the text-transform property to transform the text to uppercase in CSS.

I hope you find it useful! πŸ˜„

Happy coding!

2

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