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

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!

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!

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

wow very nice

How are you doing same height and width as preview?