Huddle Single Introductory Section 🎯 [ SEMANTIC HTML - TAILWIND CSS ]

Community feedback

• 

  P

  markus•2,250

  @markuslewinPosted over 1 year ago

  Tailwind can't detect which classes are being used, because it can't find your HTML file. If you update the content field in tailwind.config.js to include the path of index.html, it should work!

  Is there a reason for the margin-left on the container of the mockup image? I think it looks much better without that declaration.

  Marked as helpful

  1

  ---

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @markuslewin Oops, yeah i forget to add index.html in tailwind.config.js file.

  Thanks for pointing that out to me, your feedback was really helpful !

  1
• 

  Doston Nabotov•950

  @dostonnabotovPosted over 1 year ago

  Hey, there! 👋

  Congrats on completing the challenge. I really liked your attention to details in your HTML and CSS. Also, I do have suggestions as well:

  HTML:

  • It's better use aria-hidden: true on decorative images and icons, making it unreachable for screen readers. You can read more here on MDN Docs
  • Also, setting an arbitrary size for images <img width="709" height="506" > might not be a good idea since they can cause weird overflows on small devices

  CSS:

  • I see that you used fancy link in your attribution section. But, the way you implemented might impact the GPU performance. In other words, it's very costly to use width property when animating things. Also, you might have noticed not smooth, but quite rough animation on hover. I would rather switch to transform or scale properties.

  This code:

  .attribution a::before {
        width: 0%;
  }
  
  .attribution a:hover::before {
        width: 100%;
  }
  

  can be turned into this:

  .attribution a::before {
        transform: scaleX(0);
        transform-origin: < left | right >;
  }
  
  .attribution a:hover::before {
        transform: scaleX(100%);
  }
  

  It might not boost your website performance, but taking care and preventing this issue can help you in the long run.

  Good luck on your coding journey!

  Marked as helpful

  1

  ---

  

  P

  markus•2,250

  @markuslewinPosted over 1 year ago

  @dostonnabotov aria-hidden="true" isn't needed in this case, because alt="" already ensures the image will be ignored in the accessibility tree.

  Using width and height on images is a good practice, because the browser can use this information to reserve space on the page before the images have been loaded. The attributes specify the intrinsic size of the image, not the size the image will be displayed in!

  2

  

  Doston Nabotov•950

  @dostonnabotovPosted over 1 year ago

  @markuslewin thanks for clarification. I didn't know width and height could be helpful for images. Learned something new.

  1

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Thank for taking your time and providing valuable feedback @dostonnabotov,

  Actually i don't see any experiments and proofs regarding usage width for the effect will increase gpu, Anyway thanks for pointing out the thing !

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Thanks for providing valuable feeback regarding accessibility @markuslewin

  0
• 

  Francesco Merighi•930

  @francescomerighi1202Posted over 1 year ago

  Your solutions is 99.9% perfect, the best i've ever seen, well done!

  2

  ---

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Glad to hear that @francescomerighi1202..🙌

  0