Flexbox with Results summary component project!

Community feedback

• 

  Zsolt Varjú•490

  @zsoltvarjuPosted over 1 year ago

  Hello Moi21dev,

  I really like your solution; it's a near-perfect replication of the design!

  • I think it's perfectly okay to use flex in this project, but grid would be good too. I advise you to look into the gap attribute. You can set it on the container that contains the flex items, and it adds spacing between the items evenly, so you don't have to use margins.

  • It's okay to use media queries; they're intended for use in responsiveness. You could use grid instead of flex on your .card class and set the grid-template-columns to 1fr 1fr and on smaller screens (from 480px) to grid-template-rows: 1fr 1fr. If you're not familiar with grid, I think you should check out this mini-game: Grid garden. It's a fun way to practice grid. For flex, there's also a game called Flex froggy. I think you should check and play both of them. Another great source (I would argue that it's even the best) is Josh W Comeau's Interactive guide to flexbox

  • You use a lot of margins where padding would be better, for example in your result div you use a lot of top margin and bottom margin to make some space between your items and the container, but it can be easily done with the padding and you need to use it only once on your container, check some tutorials on it when to use which!

  Please keep in mind that these are only suggestions and your project looks really good and thats what is important in the beginning, I think you did great and keep up the good work.

  Happy coding! :)

  Marked as helpful

  0

  ---

  

  moi21dev•50

  @moi21devPosted over 1 year ago

  Hi @zsoltvarju,

  thank you very much for your detailed answer and encouragement!

  I am pretty ashamed by my excessive usage of margins out of desperation (lol). I will definitely look into the useful rescources you have linked, and once I have a better understanding of Flexbox (especially gap), Grid, margins and paddings I will update the project.

  Thank you for taking the time to help me improve!

  Cheers!

  1