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 app

@nahinMSM

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


What are you most proud of, and what would you do differently next time?

Este projeto foi uma ótima oportunidade para colocar em prática minhas habilidades em JavaScript, HTML e CSS. A integração com a Advice Slip API foi particularmente desafiadora e ao mesmo tempo gratificante, permitindo-me explorar a manipulação de dados em tempo real.

Fico animado em compartilhar essa solução e receber feedbacks para continuar melhorando minhas habilidades de desenvolvimento front-end.

Community feedback

Arne 1,110

@Dudeldups

Posted

Hello!

Your solution looks good, there's just one small flaw with the divider. Always look at your result with the dev tools of your browser (or better more than one browser). If you set the viewport to 320 px (that's the smallest viewport you should take into account when laying out the website) the divider is breaking out of the card.

Do not use px to declare font-related sizes. This is crucial for accessibility. If a user sets a custom font-size in their browser and you use rem or em, their font-size will also change accordingly.

Headings should always be in descending order. There's no reason to use <h6> since there is no other heading on the site. Don't use heading levels just because they "look like that heading".

And here's an article about the alt attribute, the divider should have an empty alt attribute, since it does not add to the info on the page. It's just a decoration item. https://www.w3.org/WAI/tutorials/images/decision-tree/

Please take the time to go through your solution and try to improve it. As a small tip, you can visit the challenge hub after you completed a challenge and look at other ppl's solutions. Look for some that have comments on them and see if someone gave feedback to that person, there's a high chance that you can also learn from that 🙂

Hope this helps, happy coding 👾

Marked as helpful

0

@nahinMSM

Posted

@Dudeldups Espero que ajude, boa codificação 👾 Ajudou muito, obrigado!

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