Submitted 16 days ago
QRCode page using flex box and text shadow techniques
@vardhan-venkata
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
In this i have learnt a new thing called text-shadow
What challenges did you encounter, and how did you overcome them?I faced challenge in achieving the text-shadow, and then finally i achieved it.
Community feedback
- @gmagnenatPosted 16 days ago
Hello, congrats for giving this one a try !
There is a nice list of concepts that needs to be understood on this challenge. It will help greatly later to build responsive solutions with more complex layouts.
- You need to add a <main> landmark to indicate the main content of your page.
- alt tag should not contain words such as "Image" it is already announced by screenreader as an image. It should describe the image and it's purpose. So here it's a QR Code and the purpose is "going to frontendmentor io".
- As this is a small component that would sit on a larger project it will probably not use an h1 as the main page title. You can use an h2 here and ignore the automatic validator.
- Use a modern css reset at the top of your stylesheet in all your projects. Look up for Andy Bell or Josh Comeau, they both have great ones. Use the one your prefer and try it out. It will help you deal with browser inconsistencies and you will start your css on a strong foundation.
- use a min-height instead of a fixed height on your main class
- use a max-width in
rem
on your qrCode class, and remove the height. - remove the width and height on the image. It is contained in the card so you can just have a small padding on the card and that's all.
- never use pixels for font-sizes https://fedmentor.dev/posts/font-size-px/
I hope you find something helpful in these comments to improve your solution and your next ones.
Don't hesitate to reach out on discord with your questions.
Happy coding !
0 - @0prii0Posted 16 days ago
good one but have not followed the colors for heading and paragraph text.
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