Profile Card Component with CSS Grid & Flexbox

Hello Mentee's!

There were some questions I had to ask myself while working on this solution. The answers gave me the opportunity to learn the following:

I was wondering what the best place is for an image?

• When the image has a meaning in relation with your content, you should place the image in HTML (provided with alternative text information). If the image is purely decoration, you should place it in CSS with the background-image property.

Why should you always include dimensions for every image?

• A specified width and height of an image let's the browser calculate and reserve required space for the image when the web page loads. As a result it speeds up the display of your web page in the browser.

Why is it good practice to set an image as a block-element ?

• It is practical & efficient to set an image as a block-element, because this will allow you to have maximum control over the styling in context with the surrounding elements. To give an example "margin: 0 auto;" does not work on inline images.

Feel free to add tips.