The CSS code creates a layout using the 'Poppins' font and flexbox.
Design comparison
Community feedback
- @grace-snowPosted 8 months ago
This has got a lot of the same issues as the previous challenge (QR code) so apply those learnings here as well.
The biggest thing missing here is meaningful HTML structure. It is extremely important - no, essential - to get the html structure right. That means using appropriate meaningful elements for the content.
This has a main for the content and a footer for attribution. This has one primary heading (h1) split over two lines. It has 4 cards each with a heading (h2), paragraph and image. I would consider these decorative images so use empty alt, but if you consider them to be meaningful content then they would need properly written alt descriptions.
The other structural requirement of this challenge is to make the cards direct children of the grid. This is a CSS grid challenge, not a flexbox challenge. The sizes of cards should be defined by the grid template, they must not have width or height.
Apply the html changes then apply the css changes learned in the other challenge and see where you're up to.
0
Please log in to post a comment
Log in with GitHubJoin 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