Blog Preview Card with Hover State

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

💡 What I'm Most Proud Of

• Creating a clean and accessible design using semantic HTML, proper heading hierarchy, and meaningful alt text.
• Building a responsive layout that adapts well from mobile to desktop using a mobile-first approach and CSS Grid.
• Maintaining consistent and reusable styling by leveraging CSS custom properties (variables) and a clear structure.

🔁 What I'd Do Differently Next Time

• Incorporate a design system or utility classes earlier to speed up development and ensure consistent spacing and typography.
• Add dark mode support or theming options to make the component more dynamic and realistic.
• Refactor the project into a reusable component using a framework (e.g., React or Vue) to integrate easily into larger projects.
• Implement basic automated tests (e.g., visual regression tests) to catch unintended layout shifts during future changes.

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

⚡ Challenges I Faced & How I Overcame Them

• Responsive Layout Issues
  Getting the layout to look good on both small and large screens was tricky at first.
  I overcame this by adopting a mobile-first approach, starting with a simple single-column layout and gradually enhancing it with media queries for larger screens.

• Consistent Styling Across Elements
  It was difficult to keep colors, spacing, and typography consistent while experimenting with the design.
  I solved this by defining CSS custom properties (variables) early on and reusing them throughout the stylesheet.

• Accessibility Considerations
  Ensuring good accessibility (alt text, heading structure, focus states) was something I initially overlooked.
  I tackled this by reviewing WCAG guidelines, testing the design with a keyboard, and adding meaningful alt text and focus styles.

• Hover/Focus State Styling
  Making interactive states clear without breaking the visual design was challenging.
  I experimented with subtle color and shadow changes on hover/focus and tested them to find a good balance between visibility and aesthetics.