Design comparison
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi B33th0v3n,
Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:
- You should use
<main>
for the card. 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 mentor
not describes the image.
- Add
min-height: 100vh
to the body that let the body grows taller if the content outgrows the visible page instead.
Hopefully this feedback helps.
Marked as helpful1 - You should use
- @correlucasPosted about 2 years ago
๐พHello @B33th0v3n960, congratulations for your first solution and ๐ welcome to the Frontend Mentor Coding Community!
Great great great start, nice solution!
Something can be a good exercise for you is to reduce your code by removing unnecessary blocks/divs, all you need is a single
<main>
or<div>
to keep all the content inside, and nothing more. The ideal structure is thediv
and only the image, heading and paragraph.Hereโs a minimal html structure for this challenge:
<body><div><img><h1></h1><p></p></div></body>
Add a margin to avoid the container touching the screen edges while scaling,
margin: 20px
๐ I hope this helps you and happy coding!
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord