Article Preview Component - Solution

Please log in to post a comment
Log in with GitHubCommunity feedback
- @vladyslav-shulhach
Great job on your project! The design is excellent – every element fits perfectly into the proposed layout, and your attention to detail is impressive. I was particularly impressed by your well-organised SCSS. It has a clear structure that makes maintenance easier, and it means that we don't have to scroll through endless code to look for or fix things. Your approach is both elegant and efficient, and I'm inspired to adopt similar practices in my own projects, especially the bigger ones.
Well done on utilising the BEM methodology. It makes the code so much easier to work with, and it's great to see such a well-structured approach in action.
I have a few suggestions on how you could further enhance your code and workflow in future projects:
-
Accessibility:
When you're developing a website, it's really important to not overlook accessibility. If you provide meaningful descriptions, it'll improve the experience for users who rely on assistive technologies and it'll also be better for SEO. Instead of leaving thealt
attributes empty or usingaria-hidden="true"
, it's better to include descriptive text. For example, rather than hiding the Facebook icon from screen readers, you could addalt="Facebook icon"
so that assistive technologies can recognise it. -
User Interaction:
The social share panel opens when clicking the button, which is great. But it would be even better if it also closed when clicking outside of it or pressing the Esc key. If you could make it so that JavaScript could do this, it would make it feel more user-friendly.
Overall, you have done an amazing job. Keep up the excellent work, and happy coding!
-
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