Design comparison
Solution retrospective
Proud of using flexbox which made it much easier to align a lot of the elements. Also using negative padding to get two elements closer than flexbox would allow.
What challenges did you encounter, and how did you overcome them?I completed the flexbox training on freecodecamp before attempting this challenge.
What specific areas of your project would you like help with?My sizes are all absolute here. I will aim to use responsive sizes (vh, em etc) in future but any tips will be gratefully received.
Community feedback
- @kepper104Posted 7 months ago
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 helpful0@ABergelinPosted 6 months ago@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.
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