Blog preview card

Well done on getting this far! You’re clearly putting in the effort, and it shows. Just a few things I noticed that could enhance your solution…

• You have a few things in your body that are not doing anything and you can remove them, It creates unnecessary code and potential issues,

body {
    /* font-size: 16px; */ Remove
    /* font-weight: 400; */Remove
    background-color: #F5D04E;
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: column; */Remove
    /* gap: 20px; */Remove
    font-family: var(--font-family);
}

• This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing that helps search engine determine what the page is about, Something like this <meta name="description" content="" />

• Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

• Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀