article preview using css grid and javascript to toggle img box

Community feedback

• 

  P

  Rupali•780

  @rupali317Posted 4 months ago

  Hello Eric

  I am following the learning path for Javascript. While following this learning path, the front-end mentor team has requested me to provide feedback on your solution. I am delighted to share the following suggestions for your approach on article preview component:

  A) HTML Semantics

  • You should use h1 instead of h3. Especially for assistive technology, they rely on these headings to understand the page structure. h1 will tell the assistive technology that there is a main heading and it will help it understand how the page is structured.

  • Instead of <div class="left"></div> how about you use the <img> tag? It makes the HTML more semantical. Semantical structure is better for assistive technology.

  • For the share icon, you can consider having a <button> tag wrapping it because the share is supposed to be an interactive element that toggles the tooltip.

  B) CSS improvements

  • The .share__box has a fixed width and that is why the tooltip is not showing properly in the mobile view. You might want to adjust the dimensions accordingly to the mobile view.

  C) General comments

  • Use rem instead of px as the former is ideal for scalability.

  • You are having the script towards the end of the body. Another approach in terms of better performance, is to have the script within the head tag and add defer attribute: ``. This means that the script and the HTML will be loaded in parallel and only when the entire DOM is loaded, the script will then be executed. In your approach, the script downloads and executes only after the loading of the DOM, so it is slower.

  Hope the above helps. Let me know if the suggestions work

  Marked as helpful

  1

  ---

  

  Eric Aguayo•945

  @EAguayodevPosted 4 months ago

  @rupali317

  Thank you for the feedback on this challenge. I added the script tag and the defer to multiple ones I've done now and in the past with Javascript. It definitely speeds up the script load times. Much appreciated.

  1

  

  P

  Rupali•780

  @rupali317Posted 4 months ago

  @EAguayodev Glad to hear it

  Marked as helpful

  0