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 advice slip JSON API

P

@grmbyrn

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


First challenge using an API. Let me know if it works or if it can be improved!

Community feedback

@jgengo-alt

Posted

Hello there 👋 I'm back to give some advice on your latest assignment :)

I find interesting that you made yourself the -- " -- under the advices instead of using an image, you gain speed in loading the page, that's awesome!

However, what you gain to load the page, you sadly lost it by reloading the page everytime we click the button. Would have been better to make onclick call a function that would have fetch a new advice and replace only the needed text on the page instead of reloading everything.

Also with a wide screen, your main div would have benefits having a max-width ;)

Keep going 💪

Marked as helpful

0

P

@grmbyrn

Posted

@jgengo-alt the -- " -- was mainly an opportunity to practice pseudo-elements as I don't use them very often. Really good advice on the onclick. It's a good idea to get in the habit of making the page more efficient, rather than just sticking with the first thing that works, so thanks!

0

Account Deleted

Hi there,

  • put the quote inside a <blockquote> tag instead of h1 to be more semantic

  • check Html report to fix accessibility issues

i hope this is helpful and goodluck!

Marked as helpful

0

P

@grmbyrn

Posted

@Old1337 Some helpful advice there that I can implement, thanks!

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