@MelvinAguilar
Posted
Hi @SemihRodoplu ๐, good job completing this challenge, and welcome to the Frontend Mentor Community! ๐
I have some suggestions you might consider to improve your code:
- Use the
<main>
tag to wrap all the main content of the page instead of the<div>
tag. With this semantic element you can improve the accessibility of your page.
- You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.:
<h1 class="sr-only">QR Card Component</h1>
- The
alt
attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a betteralt
attribute would beQR code to frontendmentor.io
- Instead of using pixels in font size, use relative units of measure like
rem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. You can read more about this problem here.
- You could use a CSS Reset to remove browser built-in styles and reduce browser inconsistencies.
Popular reset style sheets:
Above all, the project is done well๐. I hope those tips will help you! ๐
Good job, and happy coding! ๐