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

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

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

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

توضیحات

tailwindcss چیست ؟

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

topdemy-tailwindcss

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

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

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

Tailwind CSS یک چارچوب سطح پایین است ، به این معنی که برخلاف سایر فریمورک‌های CSS مانند Bootstrap و Materialize و... Tailwind اجزای از پیش ساخته شده مانند دکمه‌ها ، منو ها و ... را ارائه نمی‌دهد ، در عوض از کلاس های کاربردی تشکیل شده است که به وسیله ی آن می توان بخش های مختلف یک وب سایت را به صورت شخصی ایجاد کرد همچنین Tailwind در PostCSS نوشته شده و در جاوااسکریپت پیکربندی شده است ، به این معنی که شما قدرت کامل یک زبان برنامه نویسی واقعی را در اختیار دارید.

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

با استفاده از Tailwind شما نیاز بسیار کمتری به خارج شدن از سند html و نوشتن کد های 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 را در یک پروژه تمرینی یاد می گیرید و پس از یادگیری کامل و انجام تمرینات مختلف با انجام پروژه نهایی به صورت کامل و از صفر تا صد طراحی یک وب سایت را فرا میگیرید.