Blog Preview Card

Excellent work! 👏

Here are some suggestions:

• Use semantic tags. The ´card´ can be an article or section.
• In published ... for the date you can use the time tag.
• The avatar class makes sense as a div.
• When you use article or section it is mandatory that it has a h? tag inside. You must remember that headings are consecutive.
• Your CSS variables should be more declarative; for example, w1 is just 2 letters that don't tell me anything; however fw-500, makes some sense: font-weight: 500.
• The width of the card you are declaring with vh, you should try vw. I recommend you to check clamp, it can help you with the size of the card as well as the ‘font-sizes’.

I invite you to check my solution, you may find some ideas.

Happy coding! 😎

Hey, nice project. Well done.

I suggest that you be more general with your CSS, so it becomes more scalable. Imagine this component as part of a larger site, where other CSS styles are affecting it. You should set the stage on the body or a higher-level parent to fully leverage the cascading nature of CSS.

Also, Images don't behave well as flex elements. When dealing with this situation, you should wrap them in a div. This will make it easier to center them and set the width of the image.

One feature that you didn't include in your project was the hover state. Note that this component is intended to lead the user to another blog page, so the <h1> should have an <a> tag. This will change the cursor to a pointer and allow you to redirect the user to the other page. Styling the hover state is as simple as:

h1 a:hover {
    color: var(--yellow);
}

I hope you find value in theses tip.