Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card component using HTML&CSS with flexbox and bg-images

Alex 270

@chillcodemao

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


UPDATED code:

  • positioned elements relative to container
  • used margins for positioning
  • streamlined code: less code written to achieve the result

Community feedback

HYDROCODER 555

@HYDROCODER

Posted

Hey there! Your HTML markup is very semantic so there are no accessibility issues at all! Good work!

You did use flex box a lot. I would suggest to use a class with the common flex styles and just use this class wherever you wish to use it. Layouts can be difficult so do be patient with it. Try flexbox on different challenges involving layouts and you will get the hang of it. Use margins to position things instead of padding. Padding work better when they are used to give spacing inside an element, not outside. Margins work better when they are used to position an element relative to other elements.

Never use fixed heights and widths. For this profile card its fine since it is a small element but larger elements take a toll when you do that and it can be a real headache to fix it when we set a fixed height or width.

Hope it helps :).

Marked as helpful

0

Alex 270

@chillcodemao

Posted

@HYDROCODER hi, nice to meet you and thank you for your feedback. I updated my code and I think the responsiveness of the page is now improved. I tried to avoid fixed dimensions and eliminated positioning of elements with padding - thanks for the tips.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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