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

@mafernandezgo

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

Faris P 2,810

@FarisPalayi

Posted

Hey, nice job on this one 👍. Here are some of my suggestions:

  • set the image alt values to alt="" if images are only used for decorative purposes
  • I think the alt value divider is unnecessary in the divider img because it doesn't provide any useful information or extra context. i.e. since it's decorative.
  • try adding a :focus state style to the button so that people using keyboard to navigate can use the site easily
  • set an aria-label attribute to the button so that the purpose of the button is clear to assistive devices.
  • also, try using the blockquote tag instead of the p for advice, to make the html semantic

Happy coding ✨

Marked as helpful

0

@mafernandezgo

Posted

@FarisPalayi Thank you for your comments, I will consider them

1

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