PhoenixDev22• 16,950
@PhoenixDev22
Posted
Hi Wolf Sketch,
Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:
- You should use
<main>landmark to wrap the card and <footer> for the attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
- In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like
QR code to frontend mentornot describes the image.
- Page should contain
<h1>. In this challenge, as it’s supposed to be a part of a whole page, you may use<h1>instead of<h3>.
- Adding
rel="noopener"orrel="noreferrer"totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.
width: 300px;an explicit width is not a good way to have responsive layout . Consider usingmax-widthto the card inreminstead .
- In order to center the card on the middle of the page , you can use the
flexboxproperties andmin-height: 100vhfor the<body>add a little padding to the body that way it stops the card from hitting the edges of the browser instead of large margins .
- Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
- 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.
Overall, Excellent work! Hopefully this feedback helps.
Marked as helpful
0
Wolf Sketch• 40
@angry-wolf-sketch
Posted
@PhoenixDev22 Really Helpful and also a thorough explanation. Thank you for your feedback. I now have specific areas of my project on which i should focus on. ❤
1
PhoenixDev22• 16,950
@PhoenixDev22
Posted
@angry-wolf-sketch Glad to help. Happy coding!
0
