ساخت صفحه آموزش‌های رایگان

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

هدف و مفهوم اصلی

پروژه نهایی باید آموخته‌های Layout، Responsive، State، RTL و Accessibility را در یک صفحه واقعی جمع کند. پایان کار فقط نمایش صحیح نیست؛ Build، Performance، Keyboard و نگهداری نیز باید کنترل شوند.

روش پیاده‌سازی

1. صفحه آموزش‌ها را با Header، Grid کارت‌ها و Stateهای کامل بسازید.
2. موبایل، تبلت، دسکتاپ، RTL و Keyboard را بازبینی کنید.
3. Build Production را اجرا و Asset، تصویر و CSS بلااستفاده را بررسی کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <header class="mb-8">
    <h1 class="text-3xl font-black text-slate-950">آموزش‌های رایگان</h1>
    <p class="mt-2 text-slate-600">مسیر یادگیری خودت را انتخاب کن.</p>
  </header>

  <section class="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
    <article class="overflow-hidden rounded-2xl border bg-white shadow-sm">
      <img src="/tailwind.webp" alt="Tailwind CSS" class="aspect-[4/3] w-full object-cover" />
      <div class="p-5">
        <h2 class="text-lg font-bold">آموزش جامع Tailwind CSS</h2>
      </div>
    </article>
  </section>
</main>

خروجی مورد انتظار

صفحه Responsive آموزش‌های رایگان.

نکات مهم و خطاهای رایج

• تکیه بر بررسی چشمی Desktop خطاهای موبایل و Keyboard را پنهان می‌کند.
• تصویر بدون ابعاد و Alt باعث Layout Shift و ضعف دسترس‌پذیری می‌شود.

تمرین پیشنهادی

چک‌لیست را روی پروژه نهایی اجرا و هر مورد را با نتیجه قابل اثبات ثبت کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS