Frontend Mentor - Article preview component solution

Community feedback

• 

  Sergio Eduardo Castro Ceballos•300

  @SergioCasCebPosted 19 days ago

  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

  0
• 

  Sylwia•240

  @LesSylPosted 18 days ago

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

  0