frontend mentor qr code challange

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Greeting @navarcus ,

  Congratulation on completing your Frontend mentor challenge,

  I have few suggestions regarding your solution:

  • First of all , You may use a separate file for the styles.

  • Page should contain a level-one heading . As this is not a whole webpage , you can use <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

  • There should be two landmark components as children of the body element - a main (which will be the component ) and a footer (which will be the attribution).<Footer> should not be in the <main >. HTML5 landmark elements are used to improve navigation .

  • No need to mention image in the alt text as It’s going to be obvious to either a person or a machine when something they're accessing is alt text. Read more how to write an alt text

  CSS

  • Consider using min-height: 100vh; to the body, this allows the body to set a minimum height value based upon the full height of the viewport also allows the body to to grow taller if the content outgrows the visible page.

  • To stop the card from hitting the edges of the screen, you can add a little margin to the card(not 10vw) or a little padding the body.

  • width: 320px;an explicit width is not a good way . consider using max-width to card instead and a little padding to the body to prevent it hitting the edges

  General points :

  • It's recommended not to use px absolute units for font-size. you can use rem(relative units) instead .

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  • Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors.

  • It's recommended to use em and rem units .Both em and rem are relative units , Using px won't allow the user to control the font size based on their needs.

  Overall , your solution is good. Hopefully this feedback helps.

  Marked as helpful

  1