Design comparison
Solution retrospective
Please let me know if there's any better practices in the structure of my code. I find it difficult to find the exact measurements but Youtube helped me tbh.
Community feedback
- @vanzasetiaPosted almost 2 years ago
Hi, CalvinSales!
Alternative text should not be hyphenated ("frontendmentor.io-qr-code"). Alternative text is not a code (like a class name). It should be human-readable. So, the better alternative text is the one that @MelvinAguilar has suggested.
Use
<body>
element as the container of the card. Then, use the<main>
element as the card element. This way, you don't need any<div>
elements.Also, for the
<div class="text">
, you want to do these instead:- Add
margin-top
to the heading to give some whitespace between the image the heading, and - Use the
padding
of the card to control the width of the text.
I hope this helps.
Marked as helpful2 - Add
- @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.
- 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 π.
-
To center the content horizontally, use
justify-content: center;
to thecontainer
and you can remove themargin: 0 auto;
.container { /* margin: 0 auto; */ /* max-width: 360px; */ min-height: 100vh; display: flex; align-items: center; justify-content: center; } .card { max-width: 360px; /* Use the max-width here, this is your component not the "div.container" */ }
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful2@NoobKelvinPosted almost 2 years ago@MelvinAguilar Thank you so much for the suggestions. I really appreciate it a lot <3
1 - Use the
- @NoobKelvinPosted almost 2 years ago
I made some changes to the code based on your suggestions just need to tweak the paddings and margins a little. I did what @vanzasetia suggested had a little problem with the footer so I put it in position: absolute; so it will be excluded in justify-content:center; from the <body> tag. I've also changed the alt to make it more human-readable based on the suggestions of @MelvinAguilar. Massive thanks to the both of you, Please let me know if there something that I've missed or needs to work on. Hope you're all having a great day :D
0@vanzasetiaPosted almost 2 years ago@NoobKelvin
Good to hear that, CalvinSales!
For the footer positioning, I recommend setting the
flex-direction: column
to the<body>
element. After that, add somemargin-top
to the.attribution
. This way, you don't need to use absolute positioning.I recommend fixing the issues that have been reported.
Keep up the good work!
1
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