Profile Card Component w/ Sass

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  Hello there, Clamonty! 👋

  Congratulations on finishing this challenge! 🎉

  Yeah, positioning the background images on this challenge is the most challenging part of this challenge. Another way, to deal with them is by using CSS background properties on the main element. In my opinion, it's much easier since there's a background-position property.

  I have some feedback on this solution:

  • Accessibility
    • Good job on using main landmark! 👍
    • Make the card-footer element as ul element and swap the div.footer-stat with li.
    • Change all the h1 inside the footer-stat element to span. Every page should only contain one h1 as an identifier. Also, the number (text) should not be a heading element too. The content below it is too small.
    • The profile image is an important content of the page so I would recommend adding alternative text to it. You can use his name as the alt value.
  • Styling
    • Don't limit the height of the main element, it will not allow the users to scroll the page if the page content needs more height. Use min-height instead.
    • I would recommend keeping your stylesheet as low specificity as possible. You can achieve that by not nesting in the Sass files. The golden rule of nesting is only nesting when you're going to use @media query, pseudo-elements, and styling pseudo-class (:hover, :focus, etc).

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

  Marked as helpful

  1

  ---

  

  clamonty•240

  @clamontyPosted almost 3 years ago

  @vanzasetia Thanks for the advice!

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @clamonty You're welcome! 👍

  0