@pikapikamart
Posted
Great work you got there.
Regarding your queries.
-
Your html is fine as I looked into it. No extra elements points for that, and used only what is needed. But the bottom part which holds the name of the person in your container, you used
article
on it, well it is better if it is section when we look at a semantic markup perspective. -
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. -
Are you referring to the share name in the pop up or the rounded thing at the bottom? Well for the popup, you use the
:hover
and I can see that you already used it. Just add the background-color to the hover of that and also change the color to something dark so that it complements it.
Mobile view is good and the functions works just fine. Overall, you did really good. For BEM, keep on doing this challenges, but not rushed it, check layout first, identify similarities, make components to be extensible and just code^^
@MojtabaMosavi
Posted
@pikamart I deeply appreciate your great and thoughtful comments on my solution, thanks a lot :).