فصل ۶: پروژه نهایی

فصل ۶: پروژه نهایی

ساخت یک بخش Landing Page حرفه‌ای

۱. نقشه‌ راه پروژه

ما می‌خواهیم بخشی بسازیم که شامل یک عنوان جذاب، یک متن توضیحات و دو دکمه فراخوان (CTA) باشد. این بخش باید در موبایل تمام‌صفحه و در دسکتاپ به صورت متمرکز در وسط قرار بگیرد.

استراتژی ما:

  • استفاده از flex برای وسط‌چین کردن کل محتوا.
  • استفاده از text-center برای متون.
  • اعمال dark:bg-slate-900 برای حمایت از حالت شب.

۲. کد کامل پروژه (قابل کپی)

این کد را می‌توانید در یک فایل HTML خام تست کنید. تمام درس‌های ۱ تا ۵ در این کد به کار رفته است:

<!– Hero Section Project –>
<section class=”bg-white dark:bg-slate-900 py-20 px-4“>
  <div class=”max-w-4xl mx-auto text-center“>

    <!– Title with responsive size –>
    <h1 class=”text-4xl md:text-6xl font-black text-slate-900 dark:text-white mb-6“>
      Master Tailwind CSS Today
    </h1>

    <!– Description –>
    <p class=”text-lg text-slate-600 dark:text-slate-400 mb-10“>
      Build fast, responsive, and modern websites without leaving your HTML.
    </p>

    <!– Interactive Buttons –>
    <div class=”flex flex-col sm:flex-row justify-center gap-4“>
      <button class=”bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-full font-bold transition-all transform hover:scale-105“>
        Get Started
      </button>
      <button class=”border-2 border-slate-200 dark:border-slate-700 dark:text-white px-8 py-3 rounded-full font-bold hover:bg-slate-50 dark:hover:bg-slate-800 transition“>
        Learn More
      </button>
    </div>

  </div>
</section>

۳. مسیر بعدی شما (Next Steps)

یادگیری تیلوند اینجا تمام نمی‌شود. برای حرفه‌ای شدن، این موارد را در گوگل جستجو و تمرین کنید:

  • Customizing tailwind.config.js: برای اضافه کردن رنگ‌ها و فونت‌های شخصی خودتان.
  • Tailwind UI: برای استفاده از کامپوننت‌های آماده و بسیار حرفه‌ای.
  • Directives (@apply): برای تمیز نگه داشتن کدهای HTML در پروژه‌های بزرگ.

🎓 پایان دوره مقدماتی

شما اکنون با مفاهیم پایه، نصب، رنگ‌بندی، فاصله‌ها، ریسپانسیو سازی و تعاملات در تیلوند آشنا هستید.

وقت آن است که اولین پروژه‌ی خود را بسازید!