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

Responsive page using CSS Flex layout , interactive using vanilla Js!

#vanilla-extract
shahdevz 50

@Shah-devs

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


Seem simple at first glance, but there plenty of challenging patterns for a junior web developer. Completing this challenge helped become more familiar with different subjects both in CSS and Js. That little arrow on the bottom of pop-up share container and also moving it to overlap the flex layout was quite a challenge for me. organizing media query properties along with avoiding duplication also was new to me. Although needed functions in JS were almost simple, still listening to media queries in Js and using matches() window.matchMedia() came in handy to observe resizing the window was quite a struggle. all in all happy to complete this challenge, big thanks to frontendMentor for these informative hand-on practice projects. I know that I might used some stupid hard-coded solutions for some parts, I 'll be more than happy to hear your alternative solutions in comments.

Community feedback

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