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 Using CSS Flexbox, Custom CSS & Animate.css.

Sky 945

@Skyz03

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


It was quite fun to do this challenge as flexbox made it easy to accomplish the responsiveness. Added Animate.css on images for bit of style. Any feedback to take it to the next level is highly appreciated. Thanks in advance for this great community 👍.

Community feedback

P
tediko 6,580

@tediko

Posted

Hello, Sky! 👋

Congrats on finishing another challenge! I will not keep up with writing feedback if you keep posting this solutions like crazy 😅. Your solution looks very good and also responds well. I really like the slide in animations on your icons 🤩 Here's my few tips:

  • Not sure if I suggested it to you but read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.
  • I like that your solution is responsive across different screen sizes but I'd suggest you to add max-width: 580px; to your .container-flex so it doesn't stretch too much. Additionaly you have to add margin: 0 auto; with this to align it center.

Good luck with that, have fun coding! 💪

1

Sky 945

@Skyz03

Posted

@tediko Thanks a lot ... Will surely read more on semantic HTML. Really got your second point as once width is added we need that margin: 0 auto to align and I will update that. Thanks again ... Your feedback really motivates to do more and level up. 👍

1

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