Frontend Mentor | QR-Code callenge solved by html, css coding challenge solution

@PhoenixDev22

Posted over 2 years ago

Greeting @Omar-majdi,

Congratulation on completing your Frontend mentor challenge,

I have few suggestions regarding your solution:

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 .
The alternative text is needed on that image for assistive tech and SEO search engine optimization . So it needs to contain a description like QR code for frontend mentor .
To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> add a little the margin to the card or a little padding to the body .You can remove the extra div.container and position and the margin margin: 100px 600px;

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

In width: 350px; an explicit width is not a good way . Consider using max-width in rem instead, Then add a little margin on the component or padding on the body to stop it hitting screen edges. That will let it shrink a little when it needs to.
height: 550px;It's rarely ever a good practice to set heights on elements, you almost never want to set it . let the content define the height.

General points :

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.
It's recommended not to use px for font-size. you can use rem instead .
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

QR-Code callenge solved by html, css