Skip to content
Submitted over 1 year ago

Article Preview Component

bem, sass/scss
P
Kamran Kiani•2,780
@kaamiik
A solution to the Article preview 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?

Start to using more and more preprocessors. Please give me feedbacks about BEM and SASS styling.

What challenges did you encounter, and how did you overcome them?
  • I've used a lot absolute positioning on this challenge. It was tough for me.
  • There is some difference on mobile and desktop view when you click the share icon. This was really challenging.
What specific areas of your project would you like help with?
  • Is my css on main image is true. It is not as same as the design.
  • Is my html structure true? how can I improve it?
  • For mobile view when I click the share icon I've used visually hidden class to disappear a default div and appear another div. For desktop I've used absolute positioning to show the div at the top of the share icon. Do you think It is a right approach?
  • Any comments on my JS?
  • Is there any accessibility classes that I should use here? I mean aria attributes.
Code

Please log in to post a comment

Log in

Community feedback

  • solitary_coder•1,000
    @kabir-afk

    Uploaded , you can check my soln out through my profile...feeel free to ask any question that comes to your mind , or any advice as well , I'll clear them if I can

  • solitary_coder•1,000
    @kabir-afk

    hey , I came up across your query on discord . . . the challenge only required of you to use javascript to toggle share button, but you went on to over-engineer it by adding and removing classes that could have been easily executed with css..there is nothing wrong with using js . but why make it complicated when it can be achieved with css alone...read up on responsive layout. You should have used media queries differently, like using flex-diection:row in desktop layout and flex-diection:column in mobile layout.So to answer your question For mobile view when I click the share icon I've used visually hidden class to disappear a default div and appear another div. For desktop I've used absolute positioning to show the div at the top of the share icon. Do you think It is a right approach? NO it wasn't the right approach . Your BEM nomeclature was great as well as the way you wrote scss was also top notch , but still felt overdone at some places....the hover states have not been taken care of as well.

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