Advice Generator App with React-Typescript

Community feedback

• 

  P

  Rupali•780

  @rupali317Posted 7 months ago

  Hello @ArinzeGit

  Good job on completing the challenge!

  I have the following feedback for your code:

  • You may consider using rem instead of px for the button's width and height. Because if you change your browse's font size to "very small", you will notice that the proportion of the button is very big as compared to the rest of the UI elements

  • To enhance the code readability and maintainability, avoid using inline styles like <p style="font-family: Manrope; font-weight: 800; font-size: 1.71rem; color: rgb(206, 227, 233); >". Define them in the CSS itself like:

  p {
    font-family: Manrope; 
    font-weight: 800;  /*and so on*/
  }
  

  Also instead of color: rgb(206, 227, 233);, define rgb(206, 227, 233) as a custom variable. In fact, define colors, typography, spacing as custom variables. You can refer to my CSS file on how I create custom variables. Creating custom variables is ideal for maintainability.

  • I would not consider making the "Advice #" as a h1 because it does not look like a h1. It is a ribbon text. A <p> is more appropriate. In fact, the quotes can use <q> tag. Using the correct HTML tag can improve the accessibility.

  • Consider using <picture> element for displaying the divider based on the form factors. It is better for performance.

  Let me know if the suggestions work!

  Marked as helpful

  0