Blog preview card

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

I am most proud of successfully implementing a clean and responsive blog preview card that closely follows the given design. The typography, spacing, and hover effects create an engaging user experience, and the use of flexbox and CSS properties helps maintain a structured layout.

If I were to improve this project, I would:

• Enhance accessibility by ensuring proper use of semantic elements (<article> instead of <div> for content, and replacing <author> with <div> or <span> as <author> is not a valid HTML element).
• Refactor CSS to reduce redundancy, such as combining common styles into reusable classes.
• Optimize the hover effect by adding a smooth transition for color changes.

What challenges did you encounter, and how did you overcome them? 1️⃣ Hover Effects for Better UX

• Challenge: The article title changes color on hover, but it felt abrupt.
• Solution: Adding transition: color 0.3s ease-in-out; would create a smoother effect.

2️⃣ Font Sizing and Spacing Adjustments

• Challenge: The given design does not provide exact measurements for spacing and typography.
• Solution: Used line-height: 150% for text readability and scaled the font sizes appropriately based on screen width.

3️⃣ Border Radius and Image Styling

• Challenge: The author avatar styling used border: 100%;, which does not work for rounding an image.
• Solution: Replacing it with border-radius: 50%; properly makes it a circular avatar.

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

I would appreciate feedback on the following areas:

1. CSS Structure & Optimization:

   • Are there ways to improve my CSS organization to make it more maintainable?
   • Would CSS variables be beneficial for managing colors and spacing?

2. Responsive Design Enhancements:

   • My media query adjusts font sizes and layout, but is there a more efficient way to handle responsiveness?
   • Should I consider using CSS clamp() or rem units instead of fixed px values?

3. Best Practices for Semantic HTML:

   • Are there any semantic improvements I should make to improve SEO and accessibility?
   • Would adding ARIA attributes help in making the blog preview card more inclusive?

Any feedback or suggestions are greatly appreciated! 🚀