intro-section-with-dropdown-navigation-main123

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002

  Posted 7 months ago

  Hi! The developed solution looks great! Here are a few suggestions to improve it further:

  1. Use Appropriate Semantic Elements

  • You've used a div element to render the text Learn More.
  • While it works for displaying the text, if this element is intended to perform an action, a button or a element would be more semantically appropriate.
  • Using the appropriate element ensures semantic correctness and better accessibility.

  2. Prevent Layout Shift on Hover

  • A slight layout shift occurs on hover due to the addition of a 1px border.

  • The issue arises because the border is not present initially but gets added on hover, changing the element’s size.

  • Always define a 1px border with a transparent color in the initial state. On hover, simply change the border color.

  .primary-btn {
      border: 1px solid transparent;
  }
  .primary-btn:hover {
      border-color: var(--Almost-Black);
  }
  

  ---

  Great work overall! These small tweaks will refine the solution further. Keep up the amazing progress! 🚀

  00