آموزش برنامه نویسی - تاپ دمی
آموزش پروژه محور tailwindcss
وضعیت دوره تکمیل دوره
نوع دوره رایگان
مدت زمان دوره 09:55:14
تعداد جلسات 79
مدرس دوره علی موسوی
قیمت دوره رایگان
ابتدا وارد سایت شوید

آموزش پروژه محور tailwindcss

در این دوره آموزشی از سطح ابتدایی تا پیشرفته ی tailwindcss را قدم به قدم به همراه یک پروژه ی ابتدایی و یک پروژه ی نهایی آموزش خواهید دید تا بتوانید به راحتی شروع به ایجاد قالب وب سایت خود کنید.

علی موسوی
مدرس دوره

توضیحات

tailwindcss چیست ؟

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

این دوره در کانال یوتیوب topdemy قرار دارد. برای مشاهده کامل ویدیوها و محتوای آموزشی، به کانال ما سر بزنید!

برای دانلود فایل‌های پیوست ، به کانال تلگرام مراجعه کنید

topdemy-tailwindcss

فریمورک چیست ؟

فریم‌ورک‌ها ابزارهایی هستند که به ما امکان می‌دهند به سرعت یک رابط کاربری را ایجاد کنیم. علاوه بر راحتی در کدنویسی، با استفاده از ویژگی‌های آن‌ها، می‌توانیم کدهای بهینه‌تری را ایجاد کنیم.

چرا بهتر است از Tailwind به جای سایر فریمورک‌های CSS استفاده کنیم؟

Tailwind CSS یک چارچوب سطح پایین است که در مقایسه با فریمورک‌های CSS دیگر مانند Bootstrap و Materialize، اجزای آماده‌ای مانند دکمه‌ها و منوها را ارائه نمی‌دهد.

به جای آن، این فریمورک از کلاس‌های کاربردی تشکیل شده است که امکان ایجاد بخش‌های مختلف یک وب‌سایت با سفارشی‌سازی شخصی را فراهم می‌کند. Tailwind در PostCSS نوشته شده و در جاوا اسکریپت پیکربندی شده است، به این معنی که شما قدرت کامل یک زبان برنامه‌نویسی واقعی را در اختیار دارید.

برخی از مزایای Tailwind CSS

استفاده از Tailwind باعث کاهش نیاز به استفاده از کدهای CSS جداگانه می‌شود و به راحتی می‌توانید استایل‌های خود را درون کدهای HTML ایجاد کنید.

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

به کمک Tailwind به راحتی می توانید در بخش مربوطه تغییراتی را لحاظ کنید بدون اینکه به بخش های دیگر تداخل ایجاد شود برای مثال دکمه ی زیر را در نظر بگیرید :

<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">click me</button>

استایل بالا شامل شش کلاس است که باهم بررسی می کنیم :

h-10 : این کلاس دکمه را روی ارتفاع 10 واحد که در اینجا واحد ما (rem) است تنظیم می کند.

px-6 : این کلاس padding در محور x را تنظیم میکند.

font-semibold : این کلاس وزن فونت دکمه را بر روی semibold تنظیم می کند.

rounded-md : این کلاس گوشه های دکمه ی را گرد میکند.

bg-black : این کلاس رنگ پس زمینه دکمه را مشکی می کند.

text-white : این کلاس رنگ متن دکمه را سفید می کند.

در این مثال به راحتی و بدون تغییر در سایر button های موجود می توان در سند خود همین دکمه را به هر شکلی که لازم است تغییر دهید.

بسیار راحت تر از گذشته و فریم ورک های دیگر می توان صفحات وب را ریسپانسیو کرد.

نیازی به انتخاب اسم کلاس های مختلف در فایل css نداریم و همین امر باعث افزایش سرعت کد نویسی می شود.


برای شروع به کار با tailwind علاوه بر html لازم است درک کامل و عمیقی از css داشته باشید.
این دوره آموزشی سطح مبتدی تا پیشرفته ی tailwindcss ، به همراه یک پروژه تمرینی در طول دوره و یک پروژه ی اصلی در انتهای دوره را شامل می شود.
خیر ، شما در این دوره ابتدا کار با tailwind را در یک پروژه تمرینی یاد می گیرید و پس از یادگیری کامل و انجام تمرینات مختلف با انجام پروژه نهایی به صورت کامل و از صفر تا صد طراحی یک وب سایت را فرا میگیرید.