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

Article preview component

@igor-ostojic

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


I am very proud of the smooth animations i managed to make with JavaScript / CSS for both mobile and desktop versions of the site.

If there is an easier way of animating pop-ups / modals , please let me know !

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Fantastic work, Igor! Your solution looks excellent! As @Dev-Martinien mentioned, I'd recommend reviewing the accessibility report and resolving those issues.

To answer your question about the animations, how you've done it by toggling classes and keeping the styles in your CSS is perfect. Wherever possible, it's best to keep your styles in the CSS. JS libraries like GSAP are brilliant for more complex animations and sequences, but that would be overkill for this.

When reviewing your code, I noticed a couple of areas where I'd recommend tweaking things:

  • You're using Sass, which is great. However, you're nesting a lot of selectors unnecessarily. Nesting selectors adds to the specificity of the generated selector chain in the compiled CSS file. For example, in your CSS, you've got this selector section .right_section .social_wrap .name_and_date .avatar which would be much be as .avatar. Creating overly specific selector chains can lead to specificity issues, especially in larger codebases. So it's best to keep selectors as simple as possible.
  • You're using max-width media queries at the moment. Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and benefit from loading in fewer styles for mobile users, which can be a nice performance gain.

I hope these tips help. Keep up the great work! 👍

Marked as helpful

2

@igor-ostojic

Posted

@mattstuddert Wow, it is insane to me that the Founder of Front end Mentor is commenting on my code ! Thank you so much for your tips, and thank you so much for this site, I am gaining real experience doing these challenges and I'm having so much fun doing it.

I am just barely 3 months into learning front end development, and i learn so much new stuff everyday, i absolutely love it !

  1. I agree 100% on not nesting so much selectors in SASS, it looks good at first, but later when working with media queries and adding / removing classes via JS it turns in to a nightmare...

  2. I have started doing the mobile first approach more frequently, it is hard to get used to, it doesn't feel natural, but i then realize it makes the job so much more easier later on.

0

Account Deleted

hey good work. just try to fix the view reports

Marked as helpful

1

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