Skip to content
Submitted over 3 years ago

Article preview with SASS, JS and FA icons

Rael•270
@Raelian
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

For some reason the svg icons for facebook, twitter and pinterest didn't work for me (the share icon did work for some reason) so I downloaded Font Awesome and used those instead. This was my first real attempt at using FA and it proved to be a bit of a hassle to set it up but worth it in the end, still unsure why the svg files provided by Frontend Mentor didn't work. If anyone had the same issue and solved it could you kindly tell me what your issue was? Might give me an idea of what I did wrong.

This was also my first attempt at using the BEM methodology and I'm looking for any feedback on where I can improve.

I also attempted to make it a bit more accessible by using different border colors when you focus on the share button.

Any feedback or advice is always welcome! ^^

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Rael! 👋

    Congrats on finishing another challenge! Your solution responds well and looks good. Here are few suggestions from me:

    • I like that you thought about accessibility. You can also add some :focus state to your share-bar__links.
    • From what I see you are using BEM correctly. We'll see in bigger challenges.
    • Read about Sass 7-1 pattern to keep your file management orginazed. You don't have to to use it for small projects like this but since you're using Sass it is good to know.

    Good luck with that, have fun coding! 💪

    1
    Rael•270
    @RaelianPosted over 3 years ago

    @tediko Thank you very much for the suggestions! I didn't use :focus on the share-bar_links due to the outlines already being there and I kinda liked the look of it plus I didn't know what design to use for it so I figured I'd leave it as it is. I'll need to come up with something better in the future. ^^

    I'll look into the pattern link as well, I've seen people use it but I never got around it due to my projects being small in scale. Still something I would like to learn for bigger projects. ^^

    Overall thanks once more for the feedback and suggestions! Appreciated! ^^

    0

Please log in to post a comment

Log in with GitHub

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