Fernando Pérez• 320
@fermop
Posted
Hi Ian! You did a really good job! your page looks cool on mobile and desktop devices.
I have some suggestions for you:
- You have some accessibility reports because you are using a
divinstead of semantic html elements such asmain(where the main content of your page should be in). - It looks like there's another accessibility report due to the browser doesn't know if you have a
footerinside thebodyof your page. Although you have afooter, it doesn't recognize it because you have yourfooterout of yourbody:
<body>
<div class="card">
<img class="qr" src="./images/image-qr-code.png" alt="" />
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</𝗯𝗼𝗱𝘆> <---
<𝗳𝗼𝗼𝘁𝗲𝗿> <---
<div class="attribution">
<div>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a></div>
<div>Coded by <a href="https://www.frontendmentor.io/profile/ianbuen">@ianbuen</a></div>
</div>
</footer>
- I highly recommend you to use rem instead of px in the css. Browsers have a default size which is 16px equals to 1rem but what if the user has their personalized font-size to large instead of medium? your page would be the same although the font-size is set as large. Here are two YouTube videos where it is explained better.
If you have any questions feel free to send me a message or answer this comment. I hope it helps!
Marked as helpful
2
Ian• 310
@ianbuen
Posted
whoops, thanks a bunch @fermop- helped out fixing the reports
1
