Skip to content
Submitted over 5 years ago

four card feature section - using grid

nabil-ee•60
@nabil-ee
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I would really appreciate some advice and tips on how to write better and more clean code, thanks in advance!

Code

Please log in to post a comment

Log in

Community feedback

  • Matt Studdert•13,611
    @mattstuddert

    Nice work on this challenge! Your solution looks great. Here are a couple of small pointers after taking a look at your code:

    • It's great to see you using CSS Grid to position the cards. It's such a powerful layout tool
    • I would say the tagline content would be better off as a paragraph instead of a h2, as I would describe it as a heading of any sort. This would then mean the h3 headings could be changed to h2.
    • I would try and make your class names a bit more descriptive. Instead of .div1, div2, etc I would have .supervisor, .karma, etc for this layout.
    • Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.

    I hope these pointers help. Keep up the great work!

  • nabil-ee•60
    @nabil-ee

    Thanks, I will look into first-mobile designing and try it on the next project

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