Design comparison
Community feedback
- @StroudyPosted 2 months ago
Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…
-
It looks like your image did not load, I think this is because of the file pathing on GitHub, If you put a
.
in front of your file path like this<img src="./images/image-qr-code.png" alt="qrcode">
Where it says ./images is there the dot goes. If you wanted to look up why google relative and absolute pathing, -
Using a
<main>
tag inside the<body>
of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content. -
Using
max-width: 100%
ormin-width: 100%
is more responsive than justwidth: 100%
because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning. -
Developers should avoid using pixels (
px
) because they are a fixed size and don't scale well on different devices. Instead, userem
orem
, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.
Great job taking the time to learn! Your efforts are paying off, and I hope these insights guide you to even more success. Keep pushing forward, and remember, you’ve got this! Enjoy your coding adventures! 💪
Marked as helpful0 -
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