Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I'll be using rem instead of px in my future solutions
What challenges did you encounter, and how did you overcome them?i used px which made my design look bad
What specific areas of your project would you like help with?frontend skills
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML π:
- 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.
- Use the
<footer>
tag to wrap the footer of the page instead of the<div class="attribution">
. The<footer>
element contains information about the author of the page, the copyright, and other legal information.
- Always avoid skipping heading levels; Always start from
<h1>
, followed by<h2>
, and so on up to <h6> (<h1>,<h2>,...,<h6>). Swap the<h4>
tag with<h1>
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute. Thealt
attribute should explain its purpose. e.g.QR code to frontendmentor.io
CSS π¨:
- Instead of using pixels in font-size, use relative units like
em
orrem
. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here π.
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful0 - Use the
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