Mobile-first with CSS Grid

@adarshcodes Thank you so much!

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!

@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

@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!

@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!