Skip to content
Submitted 4 months ago

Mobile-first Four Card Feature using Flexbox and Grid

Rui-Martins23•190
@Rui-Martins23
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Most proud of using a successful mobile-first approach, with the help of Flexbox and Grid, which allowed me to render the webpage correctly on all screen sizes.

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

The main challenge was to go from mobile-size to tablet-size and then desktop-size. Through the use of css grid this became more easy to achieve.

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

Maybe some tips on how to avoid repetition writing the css code. Ended up with the feeling that perhaps my style.css file was a bit too long.

Community feedback

  • AHAMED NAJAH•220
    @najahajaPosted 3 months ago

    I just reviewed your project and wanted to say that you did an excellent job with the responsive design! 🌟 I’m really impressed by how well your layout adjusts across different screen sizes. The use of CSS Grid and Flexbox is spot-on and makes the design look great on mobile, tablet, and desktop views. The media queries you’ve implemented are effective and seem to be working perfectly. It’s clear that you’ve put thought into making sure the design is fluid and adaptable. Additionally, the consistency in your styling and layout is commendable, making everything look cohesive and providing a smooth user experience across various devices. Your project showcases a strong understanding of responsive design principles. Keep up the fantastic work—it's evident you’ve put a lot of effort into this!

    Marked as helpful
    0
    Rui-Martins23•190
    @Rui-Martins23Posted 3 months ago

    Hi @najahaja Thank you very much for the feedback! That's very motivating. It's really good to know that some of the practices I've used are easily understandable and that it can help others.

    Once again, thanks for your comment. Enjoy coding!

    0

Please log in to post a comment

Log in with GitHub

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