Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

The CSS code creates a layout using the 'Poppins' font and flexbox.

usema08 60

@usema08

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

T
Grace 29,310

@grace-snow

Posted

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

@dev0xgenius

Posted

🤝🏽💯

0

Please log in to post a comment

Log in with GitHub
Discord logo

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