Article Preview Component Solution

Community feedback

• 

  P

  Rahexx•900

  @RahexxPosted 26 days ago

  You did an amazing job with this challenge! Here is some feedback from me:

  HTML:

  Your HTML looks great—you use semantic tags properly, which is excellent. However, I'd recommend being more consistent with your class naming convention. Currently, you're mixing three different conventions: sometimes using underscores, sometimes dashes, and other times camelCase. It’s best to choose one and stick to it.

  For example, I personally use BEM (block__element--modifier), so instead of blog-post__share-menu, I’d suggest renaming it to share__menu.

  Another issue is the use of IDs. While not inherently wrong, they can sometimes cause problems, especially when overriding styles. It’s generally recommended to use classes instead, unless an ID is absolutely necessary.

  CSS:

  Your styles are clean, and you follow best practices when using variables—great job!

  JS:

  Your JavaScript looks good, and I love that you thought about closing the modal with the Escape key. That’s a great usability improvement!

  ---

  Overall, excellent work! You should be proud of both this project and your progress.

  Marked as helpful

  1
• 

  daniel•205

  @danielashjariPosted about 1 month ago

  nice animations, great accessibility just I'd like to add screen reader only text

  <h1 class="sr-only"> Article about furnitures</h1>
  

  .sr-only {
      clip: rect(1px, 1px, 1px, 1px);
      clip-path: inset(50%);
      height: 1px;
      width: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
  } 
  

  Marked as helpful

  1

  ---

  

  vladyslav-shulhach•170

  @vladyslav-shulhachPosted about 1 month ago

  @danielashjari Thanks for the feedback! I’ll definitely add the sr-only text for better accessibility.

  0