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

3-Column Card Component Built Using Flexbox

P

@S067130H

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My biggest difficulty in this project was the mobile view. I have yet to get in the habit of a mobile-first methodology. One thing that slowed my progress was Sass. I was unaware of how the nesting of items would affect how I needed to write my media query as well. This has caused me to learn that I should generally avoid nesting unless I have a reason to.

Like my QR Code Component solution, I relied heavily on Flexbox to achieve my result. I feel I applied it too much (body, main, and container class) given the project size. While I'm happy with the result, I'm worried about developing bad habits.

Community feedback

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