Four Card Feature Section

Solution retrospective
I am most proud of successfully converting the design into a responsive webpage that works well on both mobile (375px) and desktop (1440px) screens. I was able to implement the layout, typography using the Poppins font, and styling such as borders and box shadows to closely match the design.
Next time, I would focus on writing cleaner and more organized CSS. I would also try to use better class naming and possibly explore more advanced responsive techniques to make the layout easier to maintain.
What challenges did you encounter, and how did you overcome them?One of the challenges I faced was making the layout responsive and ensuring it looked correct on different screen sizes. I also had difficulty controlling styles like showing a line break only on desktop and hiding it on mobile.
I solved these issues by using CSS media queries and experimenting with different properties such as display, box-shadow, and border styles. Researching documentation and testing different solutions helped me understand how these features work.
What specific areas of your project would you like help with?I would appreciate feedback on the following areas:
Improving my CSS structure and class naming.
Best practices for writing responsive layouts.
Whether my CSS could be simplified or written in a more efficient way.
Suggestions for improving accessibility and code readability.
Any tips on how to structure CSS for larger projects would also be very helpful.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on MadhaviNagaSri’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