Design comparison
Solution retrospective
All opinions on how to write cleaner code are welcome.
Community feedback
- @danielmrz-devPosted 8 months ago
Hello there! šš½āāļø
Your solution looks excellent!
I have a suggestion that might interest you:
š If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.
It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!
I hope it helps you in future projects! š
Other than that, great job!
Marked as helpful0 - @grace-snowPosted 8 months ago
This appears a bit broken to me. I haven't looked at the code but expect you have limited the body height to 100vh. Never do that. Never limit the height of elements that contain text, including the body. Change to min height instead so the body can grow when it needs to.
1@grace-snowPosted 8 months agoThe html needs adjustment too.
- main can't be wrapped in sections. This is a single card component. It would sit within main.
- this does not have a header. Make sure you understand what landmarks are for. A header is definitely not for wrapping an image.
- the alt text on the image needs to say what the image is (QR code) and'where it's going (to FrontendMentor.io). Alt shouldn't include words like "picture" or "image" because it's already on an image.
- similar to above, remember the context of how this component would be used. It would sit within a page. If would not be the title for the page. That means it shouldn't have a h1. Use h2 instead.
- all content should be contained within landmarks. Put the attribution in a footer.
Marked as helpful0@samimkabiruPosted 8 months agothank you for the feedback. I would revisit it and make some changes.
0
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