Skip to content
Submitted almost 3 years ago

profile card component main make in record time

Jehan Carlos Hurtado Guerrero•710
@Jank1510
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

Lately I have challenged myself to develop these projects in a short period of time, I appreciate the comments !

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    👋 Hi Jehan!

    🎉 Congratulations on finishing this challenge!

    In my opinion, you should not challenge yourself to do projects as fast as possible. It's not beneficial and makes you write low-quality code, especially when you are just starting out. I would recommend challenging yourself to focus on the quality of the code and I think speed will come naturally.

    Feedback:

    • Accessibility
      • All the page content should live inside landmark elements (header, nav, main, and footer). By using them correctly, you can make users of assistive technology navigate the website easily. In this case, you can wrap all of it with main tag,except the attribution. The attribution should be lived inside the footer.
    <body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution" role="contentinfo">
      attribution links goes here...
  </footer>
</body>
    • Also, about the div with role="contentinfo", swap it with footer instead.
    • Alternative text for images should be informative for the user.
    • Some resources to learn about the alternative text.
    • For the profile image, you can use his name as the alternative text. alt="Victor Crest".
    • For the background patterns, I would recommend making them as background-image with CSS instead of the actual element of the HTML.
    • Every page should contain only one h1 as an identifier.
    • Always wrap text content with a meaningful element (p).
    • Only use div and span for styling purposes.
    • I would recommend making the inferior element as a ul element instead and wrapping each list item with li. Also, swap the h1 with span. It's okay to use span since it's already been wrapped with a meaningful tag, in this case, the li element.
    <ul class="inferior">
  <li>
    <span>80K</span>
    <span>Followers</span>
  </li>
  ...more list item
</ul>
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
    • Styling
      • There's no need to make body element to be position: absolute;.
      • I would recommend refactoring the CSS since currently, it has a lot of absolute positioning.
      • On my desktop view (1280px * 840px), the card is too wide.
      • On mobile view (360px * 640px), the card is not positioned in the middle of the page.
      • The thing that I want to say is to make sure that your solution is responsive and looks good on any resolution.
    • Best Practice (Recommended)
    • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).

    That's it! Hopefully, this is helpful!

    Marked as helpful
    2
    Jehan Carlos Hurtado Guerrero•710
    @Jank1510Posted almost 3 years ago

    @vanzasetia Thank you very much for your recommendations, and also for the amount of valuable information you have told me.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    @Jank1510 You're welcome! 🙌

    1

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