Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
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

Princeā€¢ 210

@princej02

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

Solution retrospective


I have some problems with my code when i change it to mobile size the width and height does not scale for some reason.

Community feedback

@pascall-de-creator

Posted

Hi Prince,

Great job.. its really nice... :{D

I might have a solution to your problem but it will be hard to explain... I will have to clone your repo and give it a fix .... I will also leave some fix notes so you will know the places I fixed and the issues :D

Marked as helpful

1
Shashree Samuelā€¢ 9,260

@shashreesamuel

Posted

Hey princej02, good job completing this challenge. Keep up the good work.

Your design looks good however I think that your card background is supposed to be a bit darker in addition the font size of the card title should be a bit smaller.

In terms of your accessibility issues

  • Buttons need text in order to be clickable, you can achieve this using the aria-labelledby attribute.

  • The object tag requires an alternative description. You can fix this by specifying the alt attribute with a description of the image.

  • Wrap all your content in <main> tag to fix all other accessibility issues.

I hope this helps

Cheers, Happy coding šŸ‘

Marked as helpful

0
Princeā€¢ 210

@princej02

Posted

Okay, thanks.

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