Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 2 years ago

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

accessibility, tailwind-css
Abdul Khaliq 🚀•72,380
@0xabdulkhaliq
A solution to the Huddle landing page with a single introductory section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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 !

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Abdul Khaliq 🚀's solution.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub