Design comparison
Solution retrospective
I used a little bit of Flexbox. Probably a more code-efficient solution, but I think I did ok for my first try. Suggestions and criticism welcome.
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hello dan,
Congratulation on completing your first frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:
- 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.
- It should indicate where the Qr code navigate the user : like
QR code to frontend mentor
. It should not include the word image or photo as It’s going to be obvious to either a person or a machine when something they're accessing is alt text.
- There are some extra div’s need to be removed.
CSS:
- To center the component on the middle of the page you may use the flex/grid properties with
min-height 100vh;
to the body. Also you can add a little padding to the body to prevent the card from hitting. Remove the.container
is unneeded - 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.
height: 500px;
It's not recommended to set height to component, let the content of the component define the height.
width: 324px;
an explicit width is not a good way. consider usingmax-width
to the card inrem
instead.
- Using percentages for widths, using max-width and avoiding to set heights for the components, with these things is the key to mastering responsive layouts.
Aside these , Good work! Hopefully this feedback helps
0@txhawgPosted about 2 years ago@PhoenixDev22
Thanks very much for the feedback. It's now obvious to me I misunderstood some of the requirements. I thought the idea was to replicate EXACTLY the challenge output, therefore I used explicit sizing. I also had some sloppy editing for the code because I lost some of my work when I experienced a system crash.
0 - Page should contain
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