Four Card Feature - HTML, CSS grid, Google Fonts
Design comparison
Solution retrospective
This one taught me how much I had been relying on flexbox. In the bootcamp I attended, we spent about an hour on CSS grids, then moved on to Bootstrap, and never discussed it again. I figured I would be fine just using margins to arrange elements, but after attempting this, I found I was wrong.
But after some help from Grace in the #help Slack channel, a tutorial by Kevin Powell on YouTube, and a lovely grid generator by Sara Edo, I was able to get the hang of it. I learned that flexbox is only really useful in one-dimensional layouts, while grids are for two-dimensional layouts.
I understand that using negative margins to move the outer two cards upward isn't the best. So, you can think of anything to improve my solution, I'd love to hear it. Thanks!
Community feedback
- @FluffyKasPosted about 3 years ago
Hey, first of all congrats on overcoming your struggles, that always feels great! ^^ Your solution looks really good on small and large screens, it's just the in-between you could improve on a bit by either implementing a tablet view or playing around with the breakpoints! Your images are also missing their alts, they need to be there even if you used
aria-hidden: true. Best, if you have them both, and the alts you can just leave empty in this case!Marked as helpful1@sorengreyPosted about 3 years ago@FluffyKas Thank you! I was wondering why it was still giving me validation errors even with aria-hidden! I will add the alt part back right now.
0
Please log in to post a comment
Log in with GitHub
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