Mobile-first with CSS Grid

Community feedback

• 

  Adarsh Pratap•5,515

  @adarshcodesPosted over 4 years ago

  Hey @neekaisweird, your solution to this challenge looks amazing, you did great work on this

  1. Design aspect

  • Everything looks so fine, layout, typography, card's shadows. Nice.

  2. Responsive aspect

  • Responsiveness works flawlessly.

  3. Code aspect

  • Your code looks pretty clean and understandable easily.

  4. Issues aroused

  • Great! no issues

  2

  ---

  

  Neeka Poklitar•135

  @neekaisweirdPosted over 4 years ago

  @adarshcodes Thank you so much!

  0
• 

  InterplanetaryDragon•320

  @InterplanetaryDragonPosted over 4 years ago

  It was good reading your CSS code. When I did this challenge (first one I've done) I used CSS grid too, but for desktop, tablet and mobile. In hindsight, I think I'd have used Flexbox (which I've use on the last two sites) for mobile and tablet then the grid for desktop. It was my first time doing a site and using CSS grid so I wanted to practice. Your code was interesting to read as it was different to mine. I used grid-template-areas instead of selecting column and rows lines. It's nice to see other ways to implementing it. Thanks for sharing.

  1

  ---

  

  Neeka Poklitar•135

  @neekaisweirdPosted over 4 years ago

  Ohh yeah I've used Flexbox quite a lot so it seemed easier to put it on the simple mobile layout and try Grid on the bigger sizes. I'm glad you've used Grid a different way though. As I reading and learning about it, it seemed like there were a lot of options/possibilities to use it. I'll try the grid-template-areas next time!

  0

  

  InterplanetaryDragon•320

  @InterplanetaryDragonPosted over 4 years ago

  @neekaisweird I only started using flexbox a couple of days ago, so I'm still learning. Yesterday I found a really useful example which made it so much easier for me to implement the footer on the Huddle task (allocating a percentage to the width to take a whole, line or partial etc.) I've also experimented with calc() a lot in my last two challenges to limit media queries, which has been good. In the last one I only used a media query to reorder the flex boxes, so I'm improving!

  I found these resources extremely helpful for CSS grid: CSS Grid: https://www.youtube.com/watch?v=7kVeCqQCxlk https://codepen.io/mor10/pen/NjeqyX/ (for the video)

  Mini-course (free and very short): https://scrimba.com/g/gR8PTE

  1

  

  Neeka Poklitar•135

  @neekaisweirdPosted over 4 years ago

  @InterplanetaryDragon thank you for the resources! I'll definitely check these out. I haven't used calc() either so I've got to read up about that too.

  I love this article about Flexbox, it helps me visualize what's happening- https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  Thanks so much! Happy coding!

  1

  

  InterplanetaryDragon•320

  @InterplanetaryDragonPosted over 4 years ago

  @neekaisweird Thanks for the link, I'll be sure to check it out. I've a feeling there is much more power to unlock in flexbox.

  I found the responsive text information a bit of a minefield. There are some crazy calculations out there, some that seem to require other languages too. I came up with my own idea of a shorter calculation and found simple calculations like this have allowed me to obtain pretty decent results:

  font-size: calc(1.5rem + 0.8vw);

  I'll revisit the crazier calculations soon...

  Happy coding too!

  2