Skip to content
Submitted almost 3 years ago

Build Simple Profile Card Component

Huy Vo•340
@bmhuyquoc104
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

Please help me to fix my main background issue, I did try multiple approaches to do it like the original design but unfortunately, I could not finish it. By the way, as I just a beginner, please leave me any advices that could make my work become better.

Community feedback

  • Dev Rathore•2,600
    @GitHub-dev12345Posted almost 3 years ago

    And Good Work, Keep Coding😊😎

    Marked as helpful
    0
  • Dev Rathore•2,600
    @GitHub-dev12345Posted almost 3 years ago

    If You want to reduce accessibility To change this code: 1.Used Main tag to Wrap after the body Content Like :

    <body> <main> <h1> </h1> </main> </body>
    1. <div class="attribution"> to <footer> ( Used footer tag for footer design );

    I hope you again find this helpful

    Marked as helpful
    0
  • Dev Rathore•2,600
    @GitHub-dev12345Posted almost 3 years ago

    Congratulation to complete the challenge ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

    transform : scale(0.8); this property decrease the size of card. 😉

    large size for increase the number of scale & small size for decrease the number of scale

    I hope you find this helpful

    Marked as helpful
    0
  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @bmhuyquoc104,

    I have few suggestions regarding your solution:

    • screen reader only text is great for providing more context . (screen reader only is meaningless)

    • No need to mention user's avatar in the alt text as It’s going to be obvious to either a person or a machine when something they're accessing is alt text. Read more how to write an alt text

    • The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. the words like Followers should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

    Overall , your solution looks good .Hopefully this feedback helps.

    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