Design comparison
Solution retrospective
The biggest struggle I had was the sizing of elements and having proper ratios to match with the design pictures. What are some more effective ways of approaching the scales and sizing when basing the design off of a static image?
Community feedback
- @vanzasetiaPosted over 2 years ago
Hello there, Riley! 👋
Congratulations on completing your first Frontend Mentor challenge! Good effort on this challenge! 👍 It's great that you are able to finish this challenge without any media query! 👏
Three things that can be improved.
- First, put all the styling on the
styles.css
. I notice an inline styling on thebody
element. It's a good thing to always separate the styling from the HTML. In a big project, it can prevent a lot of issues because inline styling has the highest specificity. - Second, the QR code is the main content of this page. It should not be hidden from screen reader users. Add an alternative text that says something like, "QR code for Frontend Mentor".
- Third, I would highly suggest using flexbox to center the card. Absolute positioning is not a good choice if flexbox and grid can do the job. Also, add
max-width
to the card element to prevent the card from becoming too large on the widescreen.
That's it! I hope this information is useful! 😁
Marked as helpful1 - First, put all the styling on the
- @arfarobsPosted over 2 years ago
Hey. If i was designing this just from the picture. I would use the text as a method to scale a close size. In the downloaded files for the project there should be one that tells you what styles to use. This will tell you the font sizes, colors, etc.
In the design picture you can see that the heading is two lines. After the word "front-end" you will see that the line breaks. By looking at it this way you can make a better estimation for the components width.
In a project like this i think its best to try and style things in relation to the information that you are given in the style guide.
Marked as helpful1
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