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

React App, Generate Advices from Advice Slip Api

@muhammad-medhat

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

mitul 360

@mitulpatel224

Posted

Hey, This looks nice. Please find some of my observations. I hope it will be helpful to you!

  1. Apply @media for responsive UI.
  2. Apply the default font size in the body. And overwrite it for advice-id elements.
  3. Class ".advice-id" can be <h1>
  4. Class ".advice-text" can be <p>. Use <span> for right-quote and left-quote sign.
0

@muhammad-medhat

Posted

@mitulpatel224 Thank you for providing feedback on my project! I is there a better way you can suggest so i can adjust my media queries

0
mitul 360

@mitulpatel224

Posted

@muhammad-medhat

I will suggest creating this with a mobile first approach. In which you first design all the layouts for the smallest device(mobile) and using @media you can modify the look for bigger devices step by step.

I wrote all CSS for mobile devices and then used @media (min-width: 768px) for bigger screens.

Marked as helpful

0

@muhammad-medhat

Posted

@mitulpatel224

Thank you for your advice about the mobile-first approach do you have any other comments on my design? again Thank you for all your comments

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