@PhoenixDev22
Posted
Greeting @MoualiMust,
Congratulation on completing your first frontend mentor challenge,
I have few suggestions regarding your solution:
-
To tackle the accessibility issues, you can use landmark
<main>to wrap the card . HTML5 landmark elements are used to improve navigation . -
Page should contain a level-one heading . As this is not a real webpage , you can use
<h1>withclass="sr-only"(Hidden visually, but present for assistive tech) and use<h2>instead of<h3>. Always remember using heading tags in chronological order. -
When you write alternative text, it should not be hyphenated. The alternative text should be human-readable ex : **qr code for frontend mentor **
-
width: 15rem;an explicit width is not a good way . consider usingmax-widthto card instead and a little margin to the card . -
To center the card on the middle of the page , you can use the flexbox properties as you did and
min-height: 100vhfor the<body>. -
You should use
emandremunits .Bothemandremare relative units , Usingpxwon't allow the user to control the font size based on their needs. -
It's recommended not to use
pxfor font-size. you can use rem instead .
Overall , your solution is good. Hopefully this feedback helps.
