Skip to content
Submitted over 2 years ago

Single price grid component

Marius•190
@MariusHor
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Am I using too many margins to create space between my elements? Is there another, maybe cleaner way of doing things? I think my css looks a bit messy with too many classes maybe. If I am using BEM, can I create multiple class selectors to make the code look cleaner?

Let me know your thoughts! 🙂

Community feedback

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

    Hello there! 👋

    Awesome work on this challenge! Your solution is responsive and the attribution looks nice! 👍

    Some recommendations from me.

    • There's no need for header element in this site. header element contains nav links and logo. h1 should live inside main whenever possible.
    • There's no need aria-label if there's already text content.
    • Changing the html or root font size can cause huge accessibility implications for those of the users with different font size or zoom requirements. Read what an accessibility expert (Grace Snow) has said about it.
    • Create a custom :focus-visible styling for any interactive elements (button, links, input, textarea). This will let people who use a keyboard to navigate the site know where they are currently on the page.

    That's it! Hope this helps.

    Marked as helpful
    0

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