Profile Card Component 🎯 [ SEMANTIC MARKUP - VANILLA CSS3 - BEM ]

Community feedback

• Account deleted

  Hey Mate, good job on this one!

  First, I am curious as to why you have a style tag at the bottom of the file? Normally you can defer noncritical CSS, but seeing as the CSS in this component is essentially everything featured on the page, it is incorrect in this instance to do that. This is also not the correct way to defer CSS.

  You should also use alt tags on images where possible. This assists people who use screen readers to access your content.

  Regarding the CSS, you have quite a few redundant and unnecessary rules. For instance, the width on your ".profile-card" component does nothing. The use of CSS Grid is also completely unnecessary here. Grid is useful for 2D layouts. Seeing as this is a 1D layout, you should use flexbox for this. You also do not need to specify an explicit height on this element, especially using a confusing measurement like "23.2em". What you should do is simply use margins and padding to make the element have the height you need. This is a lot easier and less error prone to do. You also do not need to set overflow: hidden on this element.

  When sizing elements you should simply allow the contents to determine the height, that way you do not need to fight CSS to make your layout work. Padding and margins are your friend here, use them correctly.

  Apart from that great work!

  Marked as helpful

  0

  ---

  

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted over 1 year ago

  @ashmaddenweb

  Thanks for noticing those errors

  In future i want to refractor the css rules

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  The last commit to the repository was yesterday, so I assume you can still accept feedback.

  • The <picture> tag is primarily used for displaying responsive images, and if you only have one image, the benefits of using <picture> may not be significant.

  • It is generally not recommended to use numbers, such as "80K" or "803K," for heading elements. Headings should be clear and descriptive, conveying the main topic or idea of the content that follows. This is the heading structure of your code:

    • Profile Card Component (h1)
      • Victor Crest (h2)
        • 80K (h3)
        • 803K (h3)
        • 1.4K (h3)

    Does this make sense? In my humble opinion, they are not headings elements. You can read more about this issue here: Accessible heading structure

  • While it's great that you've provided an empty alt attribute for the image, it's not necessary to include aria-hidden="true" if you're also using alt="". This is because the screen reader will ignore the image with an empty alt value.

  • While hover effects can add some visual interest to a component, it's important to use them judiciously. Hover effects on non-interactive elements can confuse users who expect the element to be clickable or interactive.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  1

  ---

  

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted over 1 year ago

  @MelvinAguilar

  Apologies for late reply my brother, and thanks for providing valuable feedback

  • Regarding the picture element, i used instead of div because i want to scale up the image when user hover's the component. with individual img element i can't do that so that i used picture element (if any better way to do this then please let me know)

  ---

  • Regarding the headings structure, yeah i've been messed that up. I analyzed your solution that awesome and you used .sr-only headings very wisely.

  ---

  • I just add up the hover effect to get a nice interactive effect that's all, in my point of view there's no confusion at all.

  Thanks brother 🤠

  0
• 

  Eucharia Adaobi•0

  @EuchariaadaPosted over 1 year ago

  I just started working on some of these projects. I will return here to look at your work later. Weldone.

  0
• 

  UzzalPahan•95

  @UzzalPahanPosted over 1 year ago

  wow very nice

  0
• 

  MRUFKA755•70

  @MRUFKA755Posted over 1 year ago

  How are you doing same height and width as preview?

  0