Second attempt at this challenge, using HMTL/CSS/Grid/Flexbox

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Sam,

  Good to see you here again :D

  I have checked your CSS file, I think you can simplify this grid: firstly, create grid-template-areas for these 3 card, for example: grid-area: c1, grid-area: c2, grid-area: c3. In my opinion, we need only one breakpoint in this challenge => for tablets size. I would do only one @media min-width: 48rem (it is an example) for your grid container with these three cards: display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: 'c1 c1' 'c2 c3';

  Mobile first vs desktop first => great question! From these two approaches I prefer mobile first because it's easier for me to rebuild the code for larger screens. It is better to scale when you start small. Scaling any application from mobile to desktop is easier compared to its alternate. If you intend to scale down your desktop application to mobile, its functionalities would be compromised. Also, I have read that it is better to add new functionalities without affecting the existing ones.

  Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  1
• 

  Sam•40

  @Sam-a-lotPosted almost 4 years ago

  Thanks, Szymon! I'll start my next challenge with mobile and see how that goes. :)

  I was messing with the grid in order to adapt it to mobile, so yeah it probably came out more complicated than it should. :/ Will do better on the next one!

  0