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

article-preview-component-master

@MojtabaMosavi

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would really appreciate if you take the time to answer any of the following qestions.

  1. How the HTML could be improved ?
  2. This is my first time using BEM, do you see it being overused ? 3 How can you change the background color of share-icon to white on hover state ?

Community feedback

@pikapikamart

Posted

Great work you got there.

Regarding your queries.

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

  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.

  3. 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^^

1

@MojtabaMosavi

Posted

@pikamart I deeply appreciate your great and thoughtful comments on my solution, thanks a lot :).

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