frontend mentor qr code challange

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.