Design comparison
Solution retrospective
Nothing in particular, would probably try a smarter way to do the css.
What challenges did you encounter, and how did you overcome them?It was pretty similar to the Blog preview card.
What specific areas of your project would you like help with?Maybe a better way to write the responsiveness and css as whole.
Community feedback
- @Alex-Archer-IPosted 6 months ago
Hi! Well done =)
I see that you use
em
for paddings and margins andpx
for fonts. Although such values likeem
andrem
are primarily intended for fonts cos they depends on user's font settings. Also I recommend you to userem
instead ofem
. You see,rem
depends directly on theroot
element whileem
- on the parent element. It could lead to reducing of the sizes of nested elements.By the way, very neat work! Happy coding =)
Marked as helpful1@porumbachanovPosted 6 months ago@Alex-Archer-I Thanks for the helpful explanation! I didn't make much of a difference between
em
andrem
before, now I know xD. Pushed the changes.1@Alex-Archer-IPosted 6 months ago@Vrondir Yeah,
em
could be tricky value. Better to use it when you're 100% sure it's exactly what you need =)Also I can recommend you to learn about css-variables and start to use them - primarily for colors but sometimes for sizes as well. They looks like this:
:root { --white: hsl(0, 0%, 100%); } main { background-color: var(--white); }
It'll be incredibly helpful in future big projects =)
1@porumbachanovPosted 6 months ago@Alex-Archer-I Yeah, I'm aware of css custom properties, didn't really find the need to use them up till now because I was dealing with two or three colors. However, I am gonna use them in the recipe-page project cuz there are like eight colors in there. Thanks for the heads up tho!
1@Alex-Archer-IPosted 6 months ago@Vrondir Oh, sorry, sometimes it's hard to say who is at what level =)
1@porumbachanovPosted 6 months ago@Alex-Archer-I No worries, I'm here to learn after all, just trynna pass the first learning path so I get used to the platform :).
1 - @gdsimoesPosted 6 months ago
I really enjoyed reviewing your project—it's clear you've put a lot of effort and creativity into it! The overall design is visually appealing, and the functionality seems robust. I do have a few suggestions that could enhance the usability and accessibility of your project even further.
-
Contrast Issue: The contrast in your footer links is currently too low, which may cause accessibility issues for visually impaired users. Consider enhancing the contrast to improve readability.
-
Font Size Units: It's recommended to avoid using pixels for setting font sizes, as this can restrict users who need to adjust font sizes in their browser settings for better readability. Consider using relative units like
em
orrem
instead. -
Layout Consistency: The spacing between the description and the first button differs from the original design. Adjusting this distance could enhance the visual consistency of your project.
Marked as helpful1@porumbachanovPosted 6 months ago@gdsimoes Thanks for the remarks!
- I think I fixed the contrast issue by making the text bigger and changing the color to green so it matches the design.
- I also switched the units to
rem
. - I added a bit more space between the description and the buttons, but I'm kinda eyeballing it so I'm not sure if it's good or not.
I have pushed all the changes, I can't update the screenshot, but you can check it out in the live demo if you want. Thanks again!
1 -
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