Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Grid, Sass, Gulp

@Jarek-Trzybinski

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Jarek, nice work on this challenge! You've done a really good job. I've got a couple of small suggestions that I hope will help you out:

  • You're using the section element for each small area within the component, whereas sections are typically larger groupings of related content. For example, a testimonial section on a page or an introductory section. So I would actually have a section element wrapping the whole thing and use div elements to group the small collections of elements.
  • Be careful no to nest your selectors unnecessarily in SASS, as you can end up with overly specific selector chains. For example, one of your selectors in currently .price-component .monthly-subcription .price-container .price when it could just be .price.

I hope this helps. Keep up the great work! 👍

1

@MohamedElidrissi

Posted

@mattstuddert Thanks for this, I was abusing the nesting feature in SASS

0

@Jarek-Trzybinski

Posted

@mattstuddert

I've replaced sessions with divs and made sass nesting a bit simpler :)

1
P
Matt Studdert 13,611

@mattstuddert

Posted

@MohamedElidrissi no problem! Yeah, it's an easy mistake to make in the early days, as it's such a nice way of doing it!

0

@Jarek-Trzybinski

Posted

Thank You Matt for great feedback. I will fix it very soon.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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