blog-preview-card Vanilla CSS

What are you most proud of, and what would you do differently next time?

• Have created a responsive and visually appealing blog card.
• Use good modern CSS practices (flexbox, variables, clamp, media queries).
• Keep your code organized and easy to maintain.
• Make the design adapt correctly to different screen sizes.
• Taking care of visual details such as spacing, borders and typography.

What challenges did you encounter, and how did you overcome them?

• Responsiveness: adjust the design to look good on mobile and desktop, using media queries and minimum/maximum values.
• Uniform spacing: Make the elements have the same spacing between each other, but the first and last ones are glued to the padding.
• Adaptive image: Make the image grow with the card without deforming or leaving the container.
• Flexible typography: Maintain the minimum font size but allow it to grow on large screens using clamp().
• Clean HTML structure: Organize elements so that they are easy to style and maintain.
• Avoid warping: Prevent the card and its elements from deforming at very small screen sizes.

What specific areas of your project would you like help with?

I want to improve the adaptability of the font and improve details.