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

3-column-preview-card-component-main

Mojtaba Mosavi• 3,760

@MojtabaMosavi

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Quite a fun challenge and prefectly sutied for practicing BEM. I would really appreciate it take to anwer any of the following questions.

  1. Is the markup semantic ?
  2. How is the usage of BEM (it's my second time using it) ?

Community feedback

Raymart Pamplona• 16,090

@pikapikamart

Posted

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^

2

Mojtaba Mosavi• 3,760

@MojtabaMosavi

Posted

@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).

0
Raymart Pamplona• 16,090

@pikapikamart

Posted

@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.

  1. 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.

  1. 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.

  1. 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

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