Skip to content
Submitted 5 months ago

Four Card Feature Section built with SCSS, Flexbox and Grid

sass/scss
P
Shakira Reid - Thomas•150
@KaeTheDev
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I’m proud that I was able to figure out how to get the layout working using flexbox. When I first saw this project, I kept skipping it because it felt like I needed to know just a little more about responsive design to complete it. Overcoming that challenge and getting it done felt really rewarding.

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

One challenge I encountered was getting the design to display correctly without scrolling on both desktop and tablet views. I had to dive into CSS Grid and learn how to incorporate it into the media queries to achieve the layout I wanted. This really helped me improve my understanding of responsive design. It's not perfect but I am learning.

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

Honestly, I’m still learning responsive design, so I feel like I could use help with almost every aspect. With each project, I find myself stepping outside of my comfort zone, but I’m learning as I go. I really appreciate any and all feedback to help me improve!

Code

Please log in to post a comment

Log in

Community feedback

  • Daniel Ayeni•1,240
    @Dannimations

    Firstly, GREAT job on the flexbox layout 👏👏👏👏 I know this project wasn't easy to figure out, especially with the transitioning between the mobile and desktop view.

    What i'd suggest (and what I do personally) is use wps photo viewer to see the full-screen version of the project and the image, and then alternate between them using the two by using alt+tab. That's how I do it, and I think that'll really help.

    Then for the screen sizes, just knowledge of media queries is kida enough to make progress on your own, especially if you like to experiment with different screen sizes.

    @media (min-width: 800px){} that's for the bigger screen sizes

    @media (max-width: 450px){} that's for smaller screen sizes.

    Hope this helps:)

    Marked as helpful

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