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

Single price grid component | SASS | Dani Feelshot

@Feelshot

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have done this exercise again, implementing sass as a tool and in less time than it took me the first time I did it. Any comment adds a lot to my learning, thank you very much to all and success. :D

Community feedback

@Emmanuel-Gumede

Posted

Hi Dani Well done on your solution. There is still a lot you can do to improve your code. You can still achieve the same design with less HTML elements. For example: remove all 'div', 'section' and 'article' elements, and style the 'main' element using CSS Grid. This will drastically reduce both your HTML and CSS code. With regards to your SCSS; even though nesting is a nice feature of SASS - too much nesting is not a good idea. Try and limit your nesting to a maximum of 3 levels. You can achieve this by, for example: give each grid a separate SCSS block or module.

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