BlogPreviewCard

Close to perfect! You just missed some simple things!

• The yellow text color is actually on hover. The color in normal state is black. And it has a cursor: pointer;
• You forgot to add the card's shadow. I used box-shadow for that setting the blur to 0
• Some smaaaaall spacing and font-size details that don't really matter
• Using classes for all elements wasn't a very good idea I guess because it made me go back to the HTML file to understand what the hell the ".background" in the css file was.😅 I prefer making it as obvious as possible for anyone reading my code.
• Using hex colors instead of hsl() (I don't know if that's that important)

Something I liked is using semantic HTML which we all learnt after our first submissions in Frontend Mentor. Good job implementing that here!

The "HTML & CSS foundations" should be black and should turn yellow when you hover on it

Hey, Great job with this solution you should be proud, A few things I noticed,

• Missing a <meta> description tag for SEO purposes,
• Setting a height and width attribute to your <img> will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image,
• Background and foreground colours do not have a sufficient contrast ratio(h1.MainText), Low-contrast text is difficult or impossible for many users to read. Check out this Discover and fix low-contrast text with Chrome DevTools,
• Having better alt="" descriptions for accessibility is a must check this out Write helpful Alt Text to describe images,
• You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset
• Using a naming convention like BEM, Using proper naming will prepare you for the changes in design of the website.
• ‍Using max-width: 100% or min-width: 100% is way more responsive then just width:100%, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.
• You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.
• Another great resource for px to rem converter.
• Without overloading you with too much information, Here is a snippet of unnecessary code, Height and width that are redundant here

.mainBody {
    background-color: white;
    max-width: 384px;
    /* width: 100%; */
    /* height: auto; */
    border: 1px solid black;
    border-radius: 20px;
    padding: 24px;
}

I hope you found some of this information helpful, You should give the articles a good read and I look forward to seeing some more from you, Happy coding! 💻