بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
بمناسبت عید بزرگ فطر ، 25% تخفیف ویژه با کد : EidFetr
سئو نود » آموزش فرانت » دوره آموزش تیلویند ( TailwindCss )

دوره آموزش تیلویند ( TailwindCss )

4 دانشجو

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

670,000 تومان 469,000 تومان

تیلویند یا همان TailwindCss یکی از فریمورک‌های جدید در زمینه طراحی با css است که باتوجه به برخی ویژگی‌های ارائه شده در داخل هسته خود ، توانست تا طرفداران زیادی را به خود جذب کند و از این جهت یکی از فریمورک‌های آینده دار در زمینه فرانت‌اند است . یادگیری TailwindCss  برای دوستانی که در زمینه زبان سی اس اس پیشنیازهای لازم را دارند بسیار ساده خواهد بود . برخلاف فریمورک‌هایی همچون بوت استرپ ( Bootstrap ) و یا یوآی کیت ( Uikit ) و … کار کردن با TailwindCss در قدم اول شاید کمی دشوار به نظر برسد اما اگر طبق اصول و استانداردهای لازم برای راه اندازی آن اقدام کنید ، کارکردن و پیکربندی اولیه این فریمورک بسیار ساده خواهد بود . ( این دوره شامل 5 جلسه رایگان است )

TailwindCss چه تفاوتی با فریمورک هایی همچون Bootstrap دارد ؟

مطئمنا با ظهور فریمورک‌هایی همچون بوت استرپ ، پروسه کدنویسی بسیار ساده شده و مهم‌تر از همه ، استایل نویسی در سراسر دنیا درصورت استفاده از فریمورک بصورت استاندارد یکپارچه انجام شد ، اما در این بین مواردی نیز بودند که احساس شد می‌توانند در آینده بهتر شوند .

سئوالات متداول
پیشنیاز شروع دوره Tailwind چیست ؟

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

این دوره تا چه اندازه کامل است ؟

این دوره ، کامل ترین آموزش فارسی برای فریمورک Tailwind است و لذا می‌توانید با خیالی آسوده سرفصل های ارائه شده داخل دوره را مطالعه کنید .

آیا این دوره پروژه محور است ؟

بله ! در این دوره نزدیک به 10 پروژه کلی و چندین مینی پروژه کاربردی طراحی شده است تا بتوانید به شکل عملی نحوه کار با این فریمورک را برای فعالیت در بازارکار بیاموزید .

در فریمورک‌هایی که تاکنون شاید با آنها کار کرده‌اید ، روش کار اینگونه بود که ابتدا کتابخانه فریمورک را دانلود کرده و سپس از داخل آن یک فایل style.css را به پروژه خودتان اضافه می‌کردید و داخل این فایل ، کلاس‌ها و دستوراتی بود که از قبل به شکلی استاندارد نوشته شده بود و شما کافی بود تا از اسامی این کلاس‌های css داخل فایل پروژه و طبق Doc فریمورک مربوطه استفاده کنید که نهایتا بتوانید قالب خود را بصورتی استاندارد طراحی کنید .

کاستی که گویا این فریمورک‌ها داشتند ( البته کاستی نه ! بلکه تفاوت نگرش ) این بود که شما اگر یک پروژه کوچک داشتید و یا حتی پروژه شما بزرگ بود و به قسمت کمی از فایل Css آماده شده توسط فریمورک نیاز داشتید ، بازهم مجبور بودید تا کل فایل Css را داخل پروژه فراخوانی کنید و درنتیجه حجم زیادی از یک فایل استایل را وارد پروژه کنید .

طراحب قالب فروش طلا با تیلویند

البته امکان شخصی سازی این فایل‌ها وجود دارد اما باید توجه داشت که ویرایش کردن چند ده هزار خط کد بسیار کار دشواری است و ضمن اینکه هر پروژه فرانت‌اند با دیگری متفاوت است و لذا نمی‌توان از فایل‌های اصلاح شده برای تمامی پروژه‌ها استفاده کرد .

TailwindCss درکل با اصل شخصی سازی بیشتر پا به میدان گذاشت که این بخش را بهبود دهد . به عبارتی ابزاری باشد که بتوانیم توسط آن ، هم طراحی را سریع و استاندارد انجام دهیم و هم تنها کلاس‌ها و دستوراتی از فریمورک را استفاده کنیم که نیاز داریم و سایر دستورات غیرضروری را وارد پروژه نکنیم .

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

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

TailwindCss چگونه کار می کند ؟

فریمورک TailwindCss کمی متفاوت است ! شما برای اینکه توسط این فریمورک بتوانید کار کنید ، ابتدا باید توسط npm و نصب کننده پکیج ، این فریمورک را داخل پروژه خودتان منتقل کرده و سپس پیکربندی آن را انجام داده و طبق دستوراتی که جهت اجرا در ترمینال هستند ، پروژه را مدام در حالت اجرا نگهدای کنید . شما در TailwindCss دو فایل اصلی برای استایل نویسی خواهید داشت که در حالت پیشفرض نام یکی از آنها input.css و نام دیگری output.css است و در حقیقت نیز این فایل‌ها یکی برای ورودی و دیگری برای خروجی استایل است . داخل فایل input.css دستوراتی به شکل زیر وجود دارد :

@tailwind base;
@tailwind components;
@tailwind utilities;

زمانی که شما داخل فایل‌های html اسامی کلاس‌های Tailwind را استفاده کرده و پس از ذخیره سازی ، دستوری را در ترمینال اجرا می‌کنید که بصورت زیر است :

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

دستورات لازم برای کلاس‌هایی که توسط شما استفاده شده است ، در فایل output.css به شکل خودکار ایجاد خواهند شد و درنتیجه شما تنها به میزان کلاس‌هایی که حین پروژه استفاده می‌کنید ، داخل فایل output.css کدهای فریمورک را خواهید داشت و نتیجه آن یک فایل استایل سبک است .

شما در تمامی مراحل پروژه این فایل را خواهید داشت و براساس پیشرفت و افزایش تعداد اسامی کلاس‌های داخل فایل‌های html ، فایل نهایی شما نیز شروع به رشد خواهد نمود . درحقیقت اینگونه تصور کنید که شما داخل فایل input.css کدهای اصلی Tailwind را فراخوانی کرده‌اید و اکنون طبق هسته کاری خود Tailwind ، با هربار استفاده از اسامی کلاس‌ها و سپس اجرای دستور ذخیره‌سازی داخل ترمینال ، داخل فایل output.css تنها دستوراتی از فایل input.css منتقل خواهند شد که اسم کلاس آنها در فایل های html پروژه استفاده شده است ، به همین سادگی !

<div class="top-[117px]">
  <!-- ... -->
</div>

<div class="top-[117px] lg:top-[344px]">
  <!-- ... -->
</div>

<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
  <!-- ... -->
</div>

نمونه بالا یکی از مثال‌هایی است که می‌توان توسط تیلویند در داخل فایل های html استفاده کرده و سپس خروجی صحیح آن را داخل فایل Css دریافت کنیم . البته که تمامی این موارد در داکیومنت تیلویند توضیح داده شده است و روش صحیح استفاده از آن مهم است .

همانطور که مشاهده کردید این فریمورک حتی امکان استفاده از دستوراتی همچون after و before را نیز در داخل فایل های html به شما خواهد داد لذا از این جهت شما حداقل نیاز ممکن را به یک فایل style.css شخصی خواهید داشت .

اما در رابطه با دوره آموزش تیلویند خودمان صحبت کنیم !

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

برخی از قالب های دوره

این دوره شامل چندین فصل مختلف است که البته فصل اول مربوط به آموزش صفرتاصد تمامی کلاس‌ها و دستورات ارائه شده در داخل هسته این فریمورک است . البته که تمامی این کلاس و دستورات درحین آموزش به شکل کامل و دقیق با روش استفاده و دلایل استفاده از آنها تشریح شده است .

در ادامه دوره ، سعی کردیم تا در قالب مینی پروژه‌های مختلف ، از تمامی دستورات و کلاس‌های لازم به درستی و البته در قالب نمونه‌های واقعی ( نه نمونه‌های بدردنخور و ساده ) استفاده کنیم . نهایتا پس از بررسی و طی کردن تمامی این پله‌ها ، به سراغ پروژه های عملی خواهیم رفت . در این دوره آموزشی تعداد زیادی پروژه عملی وجود دارد که البته داخل هرکدام سعی داریم تا سرفصل‌های خاصی را پوشش دهیم .

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

فصل 1
آموزش مبانی فریمورک TailwindCss از سیر تا پیاز
شامل 11 قسمت
1
آموزش راه اندازی و پیکربندی کامل TailwindCss به ساده ترین شکل
00:19:58
2
نصب Node.js و کامپوننت های لازم ، شروع به کار TailwindCss در پروژه
00:21:51
3
بررسی سازوکار هسته Tailwind ، دستورات خط فرمان ، پیکربندی فایل Config.js
00:23:51
4
آموزش قسمت Core Concepts در تیلویند از سیر تا پیاز
00:26:56
5
آموزش المان های قسمت Customization در تیلویند از سیر تا پیاز
00:24:49
6
آموزش المان های قسمت Layout بخش اول
00:25:06
7
آموزش المان های قسمت Layout بخش دوم
00:23:38
8
آموزش قسمت Flex و Grid در تیلویند
00:26:14
9
آموزش بخش های Spacing و Sizing و Typography در تیلویند
00:25:00
10
آموزش بخش های Background و Border و Effects در تیلویند
00:23:44
11
آموزش بخش های Transform و Interactivity و Svg
00:23:49
فصل 2
مینی پروژه های کاربردی با Tailwind
شامل 12 قسمت
1
طراحی Alert Box و Blog Card با تیلویند
00:26:38
2
طراحی Author Box و Comment Item با Grid
00:22:52
3
طراحی انواع Button ها با تیلویند
00:24:00
4
پروژه طراحی Dropdown قسمت اول
00:26:29
5
پروژه طراحی Dropdown قسمت دوم
00:24:08
6
طراحی منو اصلی سایت
00:23:20
7
طراحی منو موبایل برای سایت
00:21:43
8
طراحی Tab و Nav توسط Alpine.js
00:24:23
9
طراحی Modal با تیلویند و Alpine.js
00:22:24
10
بررسی موارد باقیمانده در قسمت Core Concepts
00:28:48
11
ادامه بررسی موارد باقیمانده در قسمت Core Concepts
00:24:05
12
ادامه بررسی موارد باقیمانده در قسمت Core Concepts
00:24:46
فصل 3
پروژه های عملی با Tailwind
شامل 21 قسمت
1
پروژه پنل کاربری - طراحی قسمت سایدبار
00:29:20
2
پروژه پنل کاربری - طراحی قسمت سایدبار و آیتم های منو
00:22:23
3
پروژه پنل کاربری - طراحی قسمت هدر و نوار بالا
00:26:07
4
پروژه پنل کاربری - کدنویسی منو موبایلی با jQuery
00:26:03
5
پروژه پنل کاربری - ادامه کدنویسی منو موبایلی با jQuery
00:26:05
6
پروژه پنل کاربری - طراحی Data Box های صفحه اصلی پنل
00:25:03
7
پروژه پنل کاربری - ادامه طراحی عناصر صفحه اصلی پنل
00:21:18
8
پروژه پنل کاربری - ریسپانسیو کردن پروژه پنل به شکل دقیق
00:29:17
9
پروژه پنل کاربری - طراحی فرم لاگین
00:21:28
10
پروژه خدمات زیبایی - طراحی منو اصلی
00:27:23
11
پروژه خدمات زیبایی - طراحی Hero Section
00:23:59
12
پروژه خدمات زیبایی - طراحی Hero Section بخش دوم
00:28:38
13
پروژه خدمات زیبایی - طراحی قسمت آخرین محصولات با Owl Carousel
00:24:06
14
پروژه خدمات زیبایی - ادامه کار با پلاگین Owl Carousel
00:23:29
15
پروژه خدمات زیبایی - طراحی فوتر قالب و ریسپانسیو سازی نهایی
00:24:48
16
پروژه فروش طلا - بخش اول
00:22:45
17
پروژه فروش طلا - ساخت حالت Dark Mode در قالب
00:22:45
18
پروژه فروشگاه اینترنتی هودی - طراحی منو و Hero Section
00:27:47
19
پروژه فروشگاه اینترنتی هودی - طراحی قسمت محصولات و ریسپانسیو سازی قالب
00:23:01
20
پروژه فروشگاه قهوه - نکات طراحی کارت محصولات + انیمیشن های قالب
00:24:33
21
پروژه فروشگاه قهوه - نکات ساخت کارت های مدرن فروشگاهی
00:21:18
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

خرید آنلاین
آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود