Skip to content
Submitted over 2 years ago

4-card feature section

Doston Nabotov•950
@dostonnabotov
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, everyone. I just completed this challenge. I really enjoyed doing this with the grid layout. I would be grateful if you could give some feedback on my solution or show me where I made mistakes.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi, Doston! 👋

    Nice work on this challenge! 🙌 Your solution is responsive and looks great! 👍

    There are still some areas that can be improved.

    • header tag inside the main tag has no meaning which means it works like div. So, it might be good to use div instead of header even though I think the current markup won't hurt the accessibility of the site.
    • All the icons are decorative images which means that they don't add or have any information. Also, if they don't exist the users won't miss any information. So, I recommend leaving the alt empty to hide it from the screen readers.
    • I would strongly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.
    • I highly suggest using em instead of rem for the unit for the media query. Zell Liew has done some research on it and based on that, the em unit has consistent results across multiple browsers.

    Overall, it looks great. I notice something interesting in the HTML where you group the classes. I guess you follow the CSS Wizardry article, "Grouping related classes in your markup". Anyway, I hope this helps! Keep up the good work! 👍

    1
    Doston Nabotov•950
    @dostonnabotovPosted over 2 years ago

    @vanzasetia Thank you for your feedback. You mean, there is no need foralt text for images, right?

    I will definitely check out the usage of em in media query

    Yeah, you found it. I like grouping stuff.

    1
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @dostonnabotov You're welcome! 👍

    Yes, leave the alt="" empty for those icons. 😉

    0
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted over 2 years ago
    • No accessibility issues
    • Your solution also looks great on mobile
    • your text is also readable

    What I would say is just your box shadow which is a bit different from the design but that's not a problem, besides Good job there👍 Happy coding👍💻

    1

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