Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
socket hang up

Submitted

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

#accessibility#tailwind-css

@0xabdulkhalid


Design comparison


SolutionDesign

Solution retrospective


👾 Hello, Frontend Mentor Community,

This is my solution for the Huddle Landing Page with Single Introductory Section.

  • It's been the first time using Tailwind CSS along with yarn as package manager 🛠️
  • Used Prettier code formatter to ensure unified code format ⚙️
  • Scored 99.125% on Google Pagespeed Insights! 🤩
  • Solution with 99.9 Percent Accuracy 🎯
  • Layout was built responsive via mobile first workflow approach 📲
  • Had a lots of fun and pain building this challenge ! 🥲

Now for the questions :

  • Regarding, css optimization for production. I tried tailwindcss's --minify for css code reduction. but it ended up with removing the manual style i wrote on input.css
  • But surprisingly the apply directives won't get affected but manual css does
  • At last i used an online css minifier for production, So i want to know why --minify purges manual css on input.css file
  • And, This is for the first time i using Tailwind CSS so apologizing for to many arbitrary values to attaining so called Perfection
  • Finally, Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

.

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

Community feedback

P
markus 1,670

@markuslewin

Posted

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

@0xabdulkhalid

Posted

@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

@dostonnabotov

Posted

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 1,670

@markuslewin

Posted

@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

@dostonnabotov

Posted

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

1

@0xabdulkhalid

Posted

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

@0xabdulkhalid

Posted

Thanks for providing valuable feeback regarding accessibility @markuslewin

0

@francescomerighi1202

Posted

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

2

@0xabdulkhalid

Posted

Glad to hear that @francescomerighi1202..🙌

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord