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

Four card feature section using CSS Grid

Teng 170

@pyteng

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

P
Matt Studdert 13,611

@mattstuddert

Posted

Really nice work on this challenge Teng, your solution looks great and scales down nicely to mobile. One small tweak I'd make in the HTML is to actually flip the .cards and .card elements so that .cards is a section and the smaller .card groups are div elements. A section is typically used for a larger grouping of themed content.

Also, just a quick heads up that the "View Code" link is currently going to the /settings page on your repo, so it gives a 404. You can update the link to remove that, which will make it easier for people to see your code.

Keep up the great work! 🙂

0

P
Matt Studdert 13,611

@mattstuddert

Posted

@pyteng you're welcome! Here's a good resource from MDN about structural elements. You can then click on each one and learn more. It can definitely be a little confusing at first but it's fine once you go through it and understand the intricacies.

0
Teng 170

@pyteng

Posted

@mattstuddert thanks for the feedback matt! still having trouble choosing between section / div and article when grouping elements. :D

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