Blog preview card

Hi @samuel-faith,

Nice project! Here are a few suggestions:

Another fun way to center a <div> is by setting the parent to position: relative, the content to position: absolute, and then using top: 50%, left: 50%, with transform: translate(-50%, -50%). The third method, which is more complex, involves using Grid, but Flexbox is definitely the most recommended approach for this project.

You’ve done well using the <main> tag. One improvement for your card component would be to reduce unnecessary nesting of <div>s. For example, this project could be simplified with just one <main> for the card using Flexbox in a column layout, and one <div> for the card footer. This would make your code cleaner, more readable, and more accessible.

I noticed that the use of <h1>, <h2>, and <h3> could be refined. The <h1> tag is meant for the page title, <h2> for headers, <h3> for sub-headers, and <h4> for sub-sub-headers. Try to avoid using HTML elements for styling purposes. Instead, use them for their intended structure and meaning to enhance SEO and accessibility. For this project, you would likely only need one <h2>, and could use elements like <time> and <span> for additional content like badges.

Keep up the great work!

Best, Teodor

Hi. please consider to remove div.container and add flex to the body.

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

Hope you found this comment helpful :)