Skip to content
Submitted over 2 years ago

profile-card-component

Will•210
@wkan17012021
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

Hello, if i could get feedback, it would be appreciated. This one was quite challenging (and off the back of some frustration trying to install tailwind on my machine earlier, admittedly i was a bit demotivated going into this project!).

  • If you know how to render the background pattern as per both mobile and desktop designs, I'm all ears! I think its something to do with background-position: top/right/bottom/left?
  • I found the solution I had for the profile photo positioning quite 'hacky' using position: relative; adjust bottom, left and margin-bottom properties by trial and error. Is there a cleaner, more maintainable way of doing this? Perhaps tweaking margins (I'm thinking margin-top negative values?) and z-index? To get the card to centre in the middle of the screen, I used position: absolute; top/right/bottom/left: 0; margin: auto; Interested to see what other people are using- is there a better way of coding up the card position? Thanks in advance.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hello there, Will! 👋

    I agree that this challenge is challenging, especially to handle those background patterns. I recommend checking out the ApplePieGiraffe solution. He had done a great job of taking care of them.

    Some feedback:

    • Accessibility
      • Alternative text for images should not be hyphenated. Alternative text is a way of the developer to tell the user about the image without actually seeing the image. So, it should informative and meaningful. But, if the image is just for decoration, then you can leave the alt="" empty.
      • I would recommend making Victor Crest 26 London as one sentence by wrapping it with only a h1 because it only makes sense if the text reads as a sentence. You can use span to style each word differently.
      • For the stats, I would recommend using ul instead section and wrapping each stat with li. In addition to that, I would recommend making those numbers a p or span. They are not heading elements for sure.
    • Styling
      • I would recommend removing the min-width property from the body element. Let the body element grow and shrink (responsive). it's the main element of your webpage, so you want to make sure that it's responsive.
      • Don't limit the height of the body element, it will not allow the users to scroll the page if the page content needs more height. Use min-height instead.

    That's it! Hopefully, this is helpful! 😁

    Marked as helpful
    1
    Will•210
    @wkan17012021Posted over 2 years ago

    @vanzasetia Hi Vanza,

    Thanks for your suggestions. I used your advice for the above and a youtube video for the bubble background to pretty much redo this challenge. I'm happy i did this as i think i learned more and the process was clearer this time round. I've always struggled to appreciate the use cases and often mis-uses of setting width/height, min/max width/height properties (i was told anecdotally to refrain from setting with absolute measurements) especially when there are multiple nested containers. Just something for me to keep practicing on.

    I've updated the readme with yourself in the acknowledgements.

    Thanks again!

    1
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @wkan17012021 Thanks for the attribution! I really appreciate it! 👍

    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