Skip to content
Submitted 2 days ago

A clean and responsive Blog Card Component

tailwind-css, react
LVL 2
@codingwithriha
A solution to the Blog preview card challenge

Solution retrospective


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

I’m most proud of successfully recreating the design while keeping the component clean, responsive, and visually accurate. This project helped me improve my understanding of component based development in React and styling with Tailwind CSS. I also focused on writing organized and reusable code rather than only making the UI look correct.

Another thing I’m proud of is deploying the project successfully using GitHub Pages and understanding how asset handling works in Vite during production deployment.

If I were to improve this project in the future, I would focus more on accessibility and scalability. I’d also like to add smoother hover animations, better semantic HTML structure, and perhaps convert the card into a reusable dynamic component that can render different blog data from props or APIs.

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

One of the main challenges I faced was deploying the project correctly on GitHub Pages. Initially, the images were not loading after deployment because of incorrect asset paths and Vite configuration issues. It worked perfectly in development mode, but production deployment exposed problems related to the base path and static asset handling.

To solve this, I researched how Vite handles assets in production, updated the vite.config.js base path, and learned the correct way to import images from the assets folder in React components. This experience gave me a much better understanding of deployment workflows and project structure in modern frontend development.

I also spent time improving responsiveness and spacing to make the design look polished across different screen sizes.

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

I would appreciate feedback on:

Improving component scalability and folder structure for larger React projects Best practices for accessibility in small UI components Writing cleaner and more optimized Tailwind CSS classes Better deployment strategies for React/Vite projects Suggestions for improving UI polish, animations, and responsiveness

I’m also interested in learning more about professional frontend architecture and how experienced developers structure reusable UI systems in real-world applications.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Riha Shahzadi’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord