Stats Preview Card Component [The coolest newbie project]

What are you most proud of, and what would you do differently next time?

Void element

Just knew that in this project. It is nice to know that the picture element can have ::before or ::after pseudo-elements instead of trying to use them with the image tag. This way I can make that filter violet transparent background. This is because the img tag is a void element and it cannot have any child nodes.

I believe this also explains the need to decide if using the picture element with sources instead of the img element with sizes attribute.

Ways to present the content on the desktop version

I found two ways to present the content above 768px screen:

• When the image scales up, the text content also scales up in size (font and space). [The hardest and the one I chose]
• The text content doesn't scale, and only the image scales.

Being semantic

Using ul tag over that stats list is semantic.

tag em on h1

Get insights that help your business grow.

The image aspect ratio for desktop version

We got to be careful when the screen scales down and the image begin to underfit its space (aspect ratio). In this case you must you will deal with height inside the img's box (picture). And if you do that, you should use object-fit together:

.component__photo {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

What challenges did you encounter, and how did you overcome them?

One big challenge was managing the image aspect ratio when the screen size changed. I ended up using object-fit to make it work, which solved most of the problems. Just had to experiment a bit to get it right!

What specific areas of your project would you like help with?

Anything. Thank you so much for your time and effort in evaluating this.