Design comparison
Solution retrospective
Feedback Please... This is My First Try
Community feedback
- @PhoenixDev22Posted over 2 years ago
Hi Jay shaktawat,
Congratulation on completing your first challenge. Your solution looks great. I have some suggestions regarding your solution if you don't mind:
-
You should use the
<main>
landmark to wrap the card, and<footer>
for the attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.` -
Page should contain
<h1>
. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>
withsr-only
class hidden visually and present for assistive tech users. -
The alternate text should indicate where the Qr code navigate the user : like
Qr code to frontend mentor
.
Consider using rem and em which are relative units rather than pixels (absolute units). If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices. So it's better to use rem for font size
Aside these , Your solution is great . Hopefully this feedback helps.
Marked as helpful0@ShaktawatCodePosted over 2 years ago@PhoenixDev22 Thank you so much for you feedback i will remember all theses points and will try to improve. actually i just started my coding journey before 2 months ago and i am learning by watching tutorials on youtube by myself. and i am trying my best to do well in this.
0 -
- @aja26Posted over 2 years ago
hey,
Try making your QR code image have a width of 100% and remove the margin. Then remove the padding left on the .box and add one value for all your padding. See below.
.box { background-color: #ffffff; border-radius: 15px; /* padding-left: 15px; / max-width: 345px; height: 570px; box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%); text-align: center; / display: flex; */ padding: 1rem; }
img { width: 100%; /* margin-top: 15px; / / margin-right: 13px; / / margin-bottom: 10px; */ border-radius: 15px; }
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