Skip to content
Submitted 4 months ago

Mobile first approach using Grid Layout

accessibility, bem, sass/scss
Mawel Abellana•140
@maomaoXD
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I used the mobile first approach. I'll do it again this practice in next project.

What challenges did you encounter, and how did you overcome them?

I have problem with grid layout using sass.

What specific areas of your project would you like help with?

Sass and BEM.

Code

Please log in to post a comment

Log in

Community feedback

  • Sania Saleem•110
    @codeBloom361

    Great job completing this challenge. Your code is well written, and your design is the same as the challenge. Here is some info about BEM:

    • BEM stands for Block Element Modifier.
    • We give elements a class according to BEM like this: <main class="main"><h1 class="main__heading--1"></h1></main>
    • In this example, .main is a block, .main__heading is an element, and .main__heading--1 is a modifier.
    • Main is block, heading is element, and 1 is modifier. And we write it like the example above. Hope this helps!
    Marked as helpful

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