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

Price block with Sass, grid, flexbox

idkbit 350

@idkbit

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


Hi! In this challenge i practiced my sass skills. It's not pixel perfect, i can't figure margins, paddings, font-sizes and colors with my eyes. In my html i made many heading elements, is it ok or i should replace them with 'p' tags? Any feedback and suggestions is welcome!

Community feedback

Adam 430

@aemann2

Posted

With SCSS imports for a project this small, I usually keep the bulk of my SCSS in the main SCSS file, then just import one or two modules (like the media queries). That way it's easier to get a general sense of what I'm doing at a glance rather than having to go to several separate files each time. Also, nice use of a mixin.

If you haven't looked into it yet, you might want to check out BEM. It's a naming convention that I started using not long after SASS, and it makes it a lot easier to organize your code into blocks and nest styles for those blocks. Some people think the naming convention looks a little weird, but I think the tradeoff is worth it for how it helps me organize my stuff, and it works really well with SASS.

1

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