Community Feedback

• 2

  Hey, great work you got there. The layout is good in desktop and mobile view.

  Suggestions would be

  • Font color. Changing them will be a great idea to make it more contrasted and pop out more in terms of UI.
  • I see that you declare a border-radius in your main tag. Well for now, you cannot see the result right because of the child overlapping it. If you want to see the border-radius, you add a overflow: hidden. This way, it will cut out the border of the child and the border radius will be seen in the container

  Regarding your queries

  1. Yes, as I looked into it, it is fine. No extra usage of elements and used a proper element, good for that.
  2. For them BEM, well, I think you could improve this. Okay here's how BEM works. First, you declare a block element, like it is a parent container. That block element will be independent among other components, now the child of that block, which is denoted in __ double underscore, is dependent on that block. But keeping in mind that whenever you are using that element, you first might want to look for the layout. Check for similarities among components, so that you element will be extensible and reusable. For the modifier, denoted by -- double hyphen or single, is the customizer of your element. Say for example we want to make that element rounded with background-color of blue, then we want a modifier to hold that. (This is my previous comment from another person here)

  Overall, you did good in here. But if you have any question, just drop it here okay^

  

  pikamart2,730Posted 1 week ago

  Reply

  • 0

    @pikamart Tanks for you great comment, regarding the usage of BEM I would really appreciate if you point out an exmple from the soulution and how it can improved (big fan of learning by example).

    

    MojtabaMosavi135Posted 6 days ago

    Reply
  • 0

    @MojtabaMosavi Sure, I can provide some.

    1. First, well, just a convention, if you were to make a block element, it would be better to name it one word I guess. Like card or component and not card-component. Well just a shorthand, well for me.

    2. If I were to do this. Your selector card-component will just be a regular flexbox for me. It will not be a block element. Instead there will be a class of flex that I will in it.

    3. Okay here is how I will structure. Those three cards. Each of them will have a class of card that will be my block element. It will contain the, btw, I use scss :>

    .card {
      @extend flex;
      flex-direction: column;
      gap: maybe 1rem or to be specified;
      padding: adjust for preference;
    }

    Now that is my block element, I declared that gap in there and padding because in the layout, there are no other sections that will be using my card but if it is a bigger page. Then I make some extension for to be used.

    4. The h2 will just contain some class like heading--main. It will be adjusted like this

    .heading {
     <-- can omit this since heading tags is usually bold-->
     font-weight: bold;
    }
    
    .heading--main {
      @extend .heading;
      color: to be specified;
      font-size: 2rem;
      line-height: 1.2;
    }

    By doing this, I can apply this selector to multiple components or headings with needing to have dependent block element. I could also make heading--sub something like that, for heading that are lower in terms of font-size.

    5. Those card selectors that I made? I could extend them or not. But if not, to color those card. I will just make something like

    card--orange {
      background-color: orange;
    }
    
    card--dgreen {
     background-color: dark green; <-- If there is a dark green -->
    }

    This way my typing won't be that long.

    6. For the learn more button. What I will do is that, I will create a separate extend only selector for it. Here is how it will go.

    .btn {
      border-radius: 1rem;
      font-weight: bold;
      padding: 0.5rem 1rem;
      transition: background-color 0.3s ease,
                         color 0.3s ease;
    }
    
    btn--white {
      @extend .btn;
      background-color: white;
      color: black;
    }

    This way, I could create also multiple buttons without them dependent on another block. Right I could just <a href="#" class="btn--white">Hello</a> something like that.

    I usually mix BEM and scss hahahaa I don't know if that is good but it helps me a lot

    Well that is my example and that is only one solution, there could be another better way, but that is my way

    

    pikamart2,730Posted 6 days ago

    Reply

  Add a comment

Give some feedback to MojtabaMosavi about their solution