@mariokreitz
Posted
Hi LFMachuca (@LFMachuca),
Wonderfully done on the "Blog Preview Card" project! You’ve nailed the design, and it looks great overall. I do have a few suggestions to make your code even better:
Flex on Body Tag: While using display: flex on the body tag can be effective, it’s generally best to avoid it. The body tag is a global container and applying flex here can sometimes lead to unexpected behavior, especially when scaling or adding more content later on. It's usually better to use a wrapper div inside the body for flex layouts.
Class with margin: auto: The margin: auto property is unnecessary here because the element is already centered using flexbox. Remember, margin: auto works best when the element’s container has a defined max-width and isn’t already using flexbox.
Margin on Card Class: The margin property in the card class is also unnecessary, as it has no parent element that it can interact with. Flexbox is already handling the alignment.
Despite these small points, your class naming is excellent, and your use of HTML tags is on point. You might want to consider replacing the h2 with an h1, especially since it’s the only heading in the card—it’s a good practice to start with h1!
(͡° ͜ʖ ͡°)
Overall, fantastic work. Keep up the great coding!
Marked as helpful
