Article Preview Component - Flexbox and JavaScript

Community feedback

• 

  Andrey•2,570

  @dar-juPosted 4 months ago

  Hi Teano Goss!

  There are no questions about the js code, everything is done perfectly. Except for one thing - what is the first line document.addEventListener('DOMContentLoaded', () => { used for? Further in the code there are listeners that work fine without this wrapper.

  A few points about the HTML and CSS code:

  • the most important thing is that the transition point to the mobile version starts too early. For example, users of laptops with a screen width of 1200 pixels will get mobile content. Try to start with 1024px and below.
  • note that the <img> tag is a semantic tag, it tells search engines what kind of image it is. All images are connected correctly, except for "icon-share.svg" this is a background image and it needs to be connected via CSS background-image. The same applies to social network icons, search engines will understand what they are by the link.
  • if the transition links are not defined, then # is usually used
  • please look at the share button, it has a strange hover effect on the desktop, and there's a big rectangle under the arrow on the phone. Something's wrong with the id="shareButton" button

  Otherwise, great job! Keep up the good work!

  Marked as helpful

  1

  ---

  

  P

  Teano Goss•180

  @tcaturani-gossPosted 4 months ago

  @dar-ju Thank you so much for the helpful feedback, Andrey. It made my website ten times better. I appreciate you!

  1