This is my solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects with professional designs.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Users should be able to:

• View the blog preview card on different screen sizes
• See hover and focus states on the article title

• 🌐 Live Site URL: https://raghadm25.github.io/Blog-preview-card/
• Frontend Mentor Profile: [https://www.frontendmentor.io/profile/raghadm25]

• Semantic HTML5
• CSS custom properties
• Google Fonts (Figtree)

This challenge helped me practice building:

• A responsive layout using Flexbox
• Clean semantic HTML structure
• Custom styled components like badges and avatars

Explore using CSS Grid alongside Flexbox

Practice accessibility (like keyboard navigation/focus states)

Improve animation and transitions for micro-interactions

Frontend Mentor Help Center – Great advice on submission and structure.

MDN Web Docs – My go-to for HTML/CSS documentation.

• GitHub – @raghadm25
• Frontend Mentor – @raghadm25

Thanks to Frontend Mentor for providing a great design challenge. This project was a fun way to improve my frontend fundamentals and attention to detail!