@kepper104
Posted
Hi! Great job on the card! Some things that I've noticed:
- You've set a constant height on the card and then used margins and paddings to add spacing between the elements while centering all the elements vertically in a flexbox. I would suggest against using negative paddings and margins (it can be considered a bad practice) and instead letting the card just wrap the elements vertically and using normal top and bottom margins on the element to space them out.
For example (general layout idea):
div (flex column with text-align: center)
img - avatar, horizontal margin auto
h1 - person's name, top margin of 40px
h2 - location, top margin of 8px
h3 - quote, top and bottom margins of 20px
etc
That's just how I do things, but I'm open to discussion!
And if you want to really make your solution identical to the design, there are minor differences in font sizes (e.g. "Front-end developer and avid reader." should be a tad smaller than the buttons below it and etc). Though in my solution I also had a bit of trouble nailing all the correct spacings and font sizes, so because there isn't a Figma design available, I believe you did your best ;)
Marked as helpful
@ABergelin
Posted
@kepper104 Hey, thanks for the detailed feedback! I think I've just taken the suggested font size as the law rather than working it out by trial and error as I did in my last challenge.
