Skip to content
Submitted over 3 years ago

Mobile first single price grid component (HTML, CSS)

Joshua•25
@minimalsm
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Completed my first frontend mentor challenge, yay 🎉

Questions

  • How could I improve the naming of my selectors? I've spent too long in StyledComponents land... I think they're okay but definitely could be better.
  • I feel like the stylesheet could be better organised, any tips here?
  • I originally used a H2 for the 'Join our community' heading. Realised the HTML checker would shout at me if I didn't have it as an H1 but it feels kind of strange having it as an H1 considering this would likely be a component within a page, rather than a page itself?
Code

Please log in to post a comment

Log in

Community feedback

  • Maciej Duda•100
    @mcdud

    Hi, @minimalsm!

    Great job!

    • look into BEM methodology for naming, it will help you better structure your HTML and CSS
    • you can use H2 for the component, and add screen reader only H1. Here is the comment from @darryncodes which helped me with the same problem.

    Good luck!

    Marked as helpful
  • Joshua•25
    @minimalsm

    Thanks @mcdud,

    • I looked into BEM before but never gave it much of a shot—it seemed too verbose for my tastes. I'll have a look into it for next time :-)
    • Thanks for the tip! I'll refactor this to use that solution.

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