Skip to content
Submitted almost 3 years ago

Mobile first single price grid component (HTML, CSS)

Joshua•25
@minimalsm
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

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?

Community feedback

  • Maciej Duda•100
    @mcdudPosted almost 3 years ago

    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
    2
  • Joshua•25
    @minimalsmPosted almost 3 years ago

    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.
    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