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

Solution responsive advice generator HTML, CSS, Javascript

@jack970

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

@joaskr

Posted

Hi Ítalo Gabriel, great job with this challenge! It looks awesome. I really like the loading spinner 😊

There are a couple of things that you can improve - they are mostly related to accessibility:

  • Wrap your content in a <main> tag instead of using <div class="main">. Using landmark HTML elements such as <main> <header> <nav> <footer> is better for accessibility.
  • You are currently using a <h1> for a advice text and <h4> for advice number. I would consider using <h1> for the advice number because it is technically a header for the card content and <p> for the advice text. It feels more natural that way and generally we should use headers in order - so h1 then h2 then h3 and only then h4. You can read more about it here

Let me know if you have any questions.

Good luck with next challenges!

Marked as helpful

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