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-preview-card-component-main responsive using HTML/CSS Flexbox

ThainĂ¡ Lopes• 110

@thainadlopes

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


What could be the possible improvements?

Community feedback

P
Katrien S• 1,070

@graficdoctor

Posted

This looks good! It functions, the code is easy to read. There's not much to be added.

  • I would suggest however to look into developing mobile-first. No big deal on this excercise but it might be once you move on to bigger ones.
  • Make the transition from desktop to mobile view a bit more smooth. Use the flexibility of flexbox. Now it just jumps from one static size to another, by using max-width instead of width.
  • Add cursor: pointer; to the button.
  • Maybe use classes to the buttons: .btn, .btn-1, .btn-color, ... This way you can bundle code and avoid repetition.

Keep going. This looks promising. Happy coding.

Marked as helpful

3

Orlando Guevara• 220

@coding-tomato

Posted

@graficdoctor I'd also add to take the chance to learn about the BEM methodology to structure CSS classes! Not fully necessary given how small the project is, but I think BEM is a great addition to any CSS code.

0
ThainĂ¡ Lopes• 110

@thainadlopes

Posted

@graficdoctor Thank you so much for the tips! : )

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