Skip to content
Submitted 9 months ago

Flexbox based Profile Card Component

Harsh Kumar Dwivedi•740
@Harsh-Kumar-Dwivedi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learnt how to use flexbox and relative measurement units for creation of much smoother web pages.

I am proud that to some extent I was able to complete this project as I am a beginner.

I would try to use a shorter approach by which I mean to use an approach which consumes lesser lines of code and produce much better design next-time.

What challenges did you encounter, and how did you overcome them?

Essentially, I encountered the challenge to place background patterns, but was able to resolve it to a certain extent by utilizing "position" CSS property. Secondly, I encountered the challenge of using units which are relative and in that Chrome Dev Tools helped a lot.

What specific areas of your project would you like help with?

I would like to know what could be the simplest approach to place background patterns in this project to achieve the required design?

Checkout my solution ! Feedbacks are welcome ! Thanks ! Stay Happy & Well !

Community feedback

  • Jake Godsall•1,390
    @jakegodsallPosted 9 months ago

    Hi 👋

    The way you solved this problem with the background images using CSS pseudo-elements is the same way that I would go about it. Other options would be creating position: absolute <div>'s or using plain old <img> elements to represent the images.

    For almost every problem we encounter in frontend development there are different approaches, each with their own set of advantages and disadvantages. The trick is to understand the tradeoff's associated with each one for the specific problem.

    I guess the best approach is to trust your instincts but always be in a position to explain and justify your choice of solution A over solution B.

    Keep up the good work! Hope this helps 😁

    Marked as helpful
    0
    Harsh Kumar Dwivedi•740
    @Harsh-Kumar-DwivediPosted 9 months ago

    Hi @jakegodsall ,

    Thanks for the feedback.

    0
    Jake Godsall•1,390
    @jakegodsallPosted 9 months ago

    @Harsh-Kumar-Dwivedi You’re very welcome!

    0

Please log in to post a comment

Log in with GitHub

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