Submitted 4 months ago

Article preview component using DOM

CHBNDJ• 390

@CHBNDJ

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Using the DOM to manipulate the interaction

What challenges did you encounter, and how did you overcome them?

I had difficulty making the share-container disappear when clicked in the mobile version but i was able to let know JS that there is a mobile version when you click on the button.

What specific areas of your project would you like help with?

none i think the more and more i build the more and more i will improve

Community feedback

yoyov51234• 240

@yoyov51234

Posted 4 months ago

Goode job! I really like the box-shadow you used, I will update mine to use the box shadow as well. I got a question, is there a way we can see the box shadow design from figma? or how did come up with it, it's very cool!

I also noticed you used BEM a little, BEM recommends to use double underscore to present the element , for example share-container--element can be share__element , here's a good article, hope it helps : https://sparkbox.com/foundry/bem_by_example.

Anther one, i don't know if it's my browser issue or not, when set as 1004*762 screen, i have to scroll horizontally to see the whole main div, I struggle with the scroll bar too. so I don't have suggestion on this, please kindly share any solution you get, thank you : )

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