Skip to content
Submitted 9 months ago

Frontend Mentor - Article preview component solution

bem, gulp, sass/scss
Sylwia•260
@LesSyl
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud that I was able to create the project in a short time. I would change the way I code in JS.

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

Największym wyzwaniem dla mnie było przycięcie obrazu. Rozwiązanie wyszukałam w internecie.

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

I would like some help/feedback whether I have cropped the image correctly (I think it can be done differently, but I don't know of any other solution). I am also wondering if the way I made the JS is good. Thank you for your time.

Code

Please log in to post a comment

Log in

Community feedback

  • Sergio Eduardo Castro Ceballos•350
    @SergioCasCeb

    Hey there, good effort on the challenge, I think you managed to get functioning solution for the challenge. I do have a couple of tips which I hope could help you in you future projects:

    In regards to your CSS:

    1. I noticed you are giving a set width to your article component, in general I would avoid this whenever possible as it does not allow for proper responsiveness. For example your content does not scale properly depending on the screen size, so in the 320px viewport it is already touching the edges.
    2. The links element could be done as just one element rather than having 2 for the different screen sizes
    3. Instead of a div with class article I would recommend utilizing semantic html and utilizing the <article> tag instead.
    4. Following the semantic html topic, the header tag tends to be a much bigger overarching element utilized for introductory content on a website such as the logo, hero section, etc. So I wouldn't recommend utilizing it within a component. Link to read more about the header tag
    5. Trying to keep your spacing consistent is also a good practice, for example your author section has no right padding following the same spacing that you utilized for the previous content.
    6. This might be a more personal preference, but I don't see the need for your share button to be an absolute element. In this scenario it just complicates the alignment of this element with the rest of the content.
    7. Instead of giving a set height to your author container, you could I could probably be better to give it proper padding/margin instead. This in combination to not having your share button as an absolute element, would make sure that everything is align properly.

    About your JavaScript:

    1. I would recommend to utilize IDs when possible as that provides better performance.
    2. I notice that for your interactive elements if the user clicks, you check if they have the active class, then depending on that you add or remove the class as well as the some display styles. I would recommend you use the classList.toggle() function instead, meaning that when the element is clicked it adds the class, and when clicked again it removes it and vice versa.
    3. Also instead of giving display styles with JS you can implement any extra styling to the elements receiving the new class, in your case the active class. This also goes for the media query breakpoint check. You can have the respective styles and breakpoints in your CSS and therefore all the styling will only occur in your CSS.
    Marked as helpful
  • Sylwia•260
    @LesSyl

    Thank you very much for your time and for your valuable guidance. I will certainly take your advice on future projects.

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