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

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 withyarn
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 oninput.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 oninput.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 !
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@markuslewin
Tailwind can't detect which classes are being used, because it can't find your HTML file. If you update the
content
field intailwind.config.js
to include the path ofindex.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 - @dostonnabotov
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 totransform 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 - It's better use
- @francescomerighi1202
Your solutions is 99.9% perfect, the best i've ever seen, well done!
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