Submitted about 2 months ago

Article preview component

Fatma Tawfeek•110

@Fatma-Tawfeek

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?

proud of using DOM manipulation and JS

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

Changing the colour of the share icon when clicking on it because it is an SVG icon
I put SVG element in html instead of using element and change the value of "fill" attribute with setAttribute

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

I didn't know how to handle the design in tablet screens because i don't have the design of tablet

Community feedback

Hazel Dotson•300
@Hazel-BlackPosted about 2 months ago
Hi Fatma! As far as the tablet sizes go I usually just use my best judgement since we aren't given clear instruction on what to do for those sizes. Something that makes responsive designs more seamless is working Mobile First. So in your case instead of having a media query that has a max width of 600 px you should first code the mobile version and then create a media query with a min-width of 601px. ( I usually just set my min-width to 1000-1400 depending on the project.) Im not an expert but I'm always an open book so if you have any other questions feel free to message me on the discord (hazelbdev) . Also I'm struggling to learn JavaScript lol and I think we could learn a lot from each other so if your open to doing a project together let me know. Overall I think you did a great job with this project. Keep up the amazing work!!
Marked as helpful
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