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 using Grid

#accessibility
Zosima 220

@SantiagoPonce

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

Dytoma 570

@Dytoma

Posted

Hey👋

Good job on completing this challenge👏 the animation on the advices looks amazing

I have some suggestions you might want to implement to improve your code:

  • First you don't need the <header></header> and the <footer></footer> elements as they have empty content thus useless to your code and you could also put your h1 in the main element.
  • For your button, I suggest you give it an aria-label="new advice" and to the image an aria-hidden="true" as the image just serves for decoration. You cam learn more about ARIA.

Happy coding👏

1
adr99 410

@leorichy99

Posted

Great job @Zosima..

I just think you could add some transitions to the button that generates the advices.

Happy coding👏

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