Design comparison
Solution retrospective
Super proud of myself for nailing this design! I’m taking a course and just got to the Flexbox module, so I tried using it for this challenge. I’m sure there’s room for improvement, so if you have any tips, send them my way! Thanks a bunch for the community support!
Community feedback
- @damigandPosted 2 months ago
Good job doing this design! The course you're taking seems to be working! There's three things I'd change about your design:
CARD
The card element could have simply been a
flex
container. You can then useflex-direction: column
to align all items from top to bottom, and usegap
to separate them from one another instead of having to usemargin-top
ormargin-bottom
in some of the child elements.IMAGE
I can see that you're doing the trick by using
background-image
on a div. However, this would be much simpler if you simply replaced thediv
element for theimg
one. The styling would be almost (if not) the exact same. However, there's no real difference between the two, it's just something that would work better for accessibility than anything else.PROFILE
The profile section is done using a table. To me, this seems a bit overkill, specially after reading that you're just learning flexbox, which could have been perfect for this section. There's two elements:
img
andp
. You can completely remove thetable
and its corresponding elements and put both the image and the text inside adiv
element. Then, you can style it as follows:.profile { margin: 0; display: flex; align-items: center; }
This would place both elements in the same row, and align them to the center vertically.
Keep up the good work and happy coding!
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