Design comparison
Solution retrospective
It's pixel-perfect!
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
Community feedback
- @Islandstone89Posted 8 months ago
Great job, Thomas!
A few things to take note of:
HTML:
- This image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor.io).
CSS:
-
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
max-inline-size
on the card should be in rem - change it to20rem
. -
letter-spacing
should not be inpx
.
Marked as helpful1@FixitoPosted 8 months agoI've updated my solution based on your feedback, thank you! @Islandstone89
1 - @StroudyPosted 8 months ago
Hello @Fixito,
It does look great and responsive, I am curious because I am learning to, why did you use these variables
/* Typography */ --fs-base: 0.9375rem; --fs-xl: 1.375rem; /* Fonts */ --ff-sans: 'Outfit', sans-serif; --fw-normal: 400; --fw-bold: 600; /* Rest of vars */ --rounded-xl: 0.75rem; --rounded-3xl: 1.25rem; --letter-spacing: 0.19px; --shadow: 0px 25px 25px 0px rgba(0 0 0 / 0.0477);
For example, there are not many elements that need a
font-weight: 400; font-weight: 600;
is it not best just to set thefont-weight: 600;
on the element instead of using variables? I really want to learn if you could take the time to answer that i would greatly appreciate it.Great work, I look forward to seeing more from you.
0@FixitoPosted 8 months ago@Stroudy Thank you!
I saw this on Kevin Powell's YouTube channel: using CSS variables for typography, fonts, and other styling elements is common for consistency, reusability, and ease of maintenance. Even if it seems like font-weight: 400 is rarely used compared to font-weight: 600, having it as a variable allows for easy adjustments across the project. This approach facilitates scalability and long-term maintenance, especially in large or collaborative projects.
1@StroudyPosted 8 months agoHey @Fixito
Could you share a link to these videos I want to know what best to put in the
:root
for this reason, I believe if it's applicable out in the real world it's a good idea to get used to it now. Thank you so much for taking the time to reply I greatly appreciate it and I hope we can discuss topics like this in the future.How did you get it to be pixel perfect how was you measuring it using the Figma file on Figma?
0@FixitoPosted 8 months agoHere is the link @Stroudy : https://www.youtube.com/watch?v=B2WL6KkqhLQ&ab_channel=KevinPowell
I've used the design from Figma and the PixelPerfect plugin for Google Chrome to overlay the mockup on my webpage.
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