Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-first Four Card Feature using Flexbox and Grid

@Rui-Martins23

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@najahaja

Posted

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

Posted

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
Discord logo

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