Design comparison
Solution retrospective
Are there any details that I didn't notice? Are there any more efficient ways to create this?
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi Justin Diaz,
Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:
- You should use
<main>
to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
- In my opinion, the alternate text should indicate where the Qr code navigate the user : like
QR code to frontend mentor
.
- In order to center the card on the middle of the page , you can use the flex or grid properties and
min-height: 100vh
to the<body>
. Add a little padding to the body that way it stops the component from hitting the edges of the browser.
- Consider using
rem
for font size .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.
hopefully this feedback helps.
Marked as helpful0@Jad229Posted about 2 years ago@PhoenixDev22 Thank you, I was also trying to figure out a way to align things better I will definitely look into the flex and grid properties. Your suggestion on the alternate text definitely adds a new perspective, which I will consider from now on.
0 - You should use
- @correlucasPosted about 2 years ago
👾Hello Justin, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!
Here's how you can iea bit your code/design:
You can reduce your code like this removing unnecessary divs, wrapping all in a single block:
<body> <div class="qr-card"> <img class="qr-image" src="images/image-qr-code.png" alt="qr code image"> <h1>Improve your front-end skills by building projects</h1> <p>Scan the qr code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </body>
The box-shadow is a bit too evident, this is due the
opacity
andblur
. The secret to create a perfect and smooth shadow is to have low values foropacity
and increaseblur
try this value instead:box-shadow: 0 0.9375rem 1.875rem -0.6875rem rgb(131 166 210 / 50%);
Hopefully this will helps you, happy coding!
Marked as helpful0@Jad229Posted about 2 years ago@correlucas Thank you, I was unfamiliar with the box-shadow properties and how to utilize it properly. I will definitely look to minimize my code to reduce redundant code thank you!
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