Skip to content
Submitted over 2 years ago

Profile card component using CSS grid

Dave Quah•660
@Milleus
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

This one's tricky with the image centering but I think I've found a nice way to always have the image centered even with larger heights or font sizes using CSS grid.

I'd appreciate it if I could get feedback on how to improve, especially on the use of semantic HTML and accessibility considerations. Thanks everyone o/

Community feedback

  • LiBee•370
    @Li-BeePosted over 2 years ago

    Well done on the design. I think you need to add sr-only class to you <h1> element. As the title Profile Card Component is showing on the screen.

    1
    Dave Quah•660
    @MilleusPosted over 2 years ago

    @Li-Bee thanks for your feedback. I was contemplating if it should be shown or hidden and figured I'll leave it as it is 😂 Let me hide it with sr-only to be more consistent with the design.

    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