Responsive Blog Preview Card

Hello,

I'm a beginner too, but I hope my comments help you.

HTML:

• This challenge is a card component. The empty <h1> in your code doesn't seem necessary to me. Opting for the h2 in your component is a good thing.

• The main container you called <div class="container"> could be an <article>.

• Take a look at the resources offered by Front End Mentor. One of them talks about how to fill in the "alt" attribute.

• The little component with the profile photo and name could be an <figure> with an <figcaption>

CSS:

• There's a really good CSS reset written by Josh Cormeau. Feel free to take a look.

• The width property is deprecated. Better to opt for min-width and max-width. To manage the width of my components in these FEM challenges, I do two things: - Either I work with the max-width property (I say that my element can't have a width greater than "x "rem) and I use the clamp() function to define a maximum size in mobile and desktop mode. - Either I put a padding on the container that contains the component (usually a <main> and I set a max-width for the desktop version. To centre my component vertically and horizontally on the page in desktop mode, I use flex.

• I see that you haven't put the hover effect on your h2. If you want to, you need to change your HTML and make your h2 a link on which you can put a hover effect. Imagine that this component is a summary of a blog article and that to access it, you have to click somewhere. In this case, you need to be able to click on the h2.

• It's best to avoid px and use em or rem.

• To make the text responsive, use clamp() and a clamp() generator like this one

• Your "learning" tag is too wide. To manage its size, use the fit-content value and add the appropriate paddings.

• For colours, use CSS classes. You set them at :root and then, if you ever want to change them, just change them there and they'll change everywhere. Go and have a look.

That's all I can see. Well done and keep up the good work!