Submitted 8 months ago

Article Preview Component

Kamran Kiani•1,280

@kaamiik

Preview site View code

This is a solution for...Article preview component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

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.

Community feedback

solitary_coder•1,000
@kabir-afkPosted 8 months ago
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
0
solitary_coder•1,000
@kabir-afkPosted 8 months ago
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.
0
Kamran Kiani•1,280
@kaamiikPosted 8 months ago
Hi. Thanks for your great feedback. Can you explain more how can I use only css? If you can please give me some resources to search and find. I've used display: flex on desktop view in .card @kabir-afk
0
solitary_coder•1,000
@kabir-afkPosted 8 months ago
@kaamiik how about I do the challenge and show you what I feel would have been the ideal approach ? I found many things to complain about which could not be covered inside a single comment . . . if that's ok with you . . .I'll ping you when I am done . . . for better understanding I'll execute the challenge in the same tech stack as you i.e., html , sass and js, ok ??
0
Kamran Kiani•1,280
@kaamiikPosted 8 months ago
Thank you for your kindness. I would be very happy to see your code and learn from it whenever you like and have done it. I have made some minor changes in my code for the accessibility. Others have also told me about the structure of my code that it could be written with a better HTML structure, but since this code is written and working, changing it is annoying, so I think reading the codes of others and yours when written will definitely help me to perform better in future challenges. @kabir-afk
1

Please log in to post a comment

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