دوره کامل Tailwind CSS از ابتدا همراه با پروژه واقعی
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- Tailwind CSS چیست و چگونه از آن استفاده کنیم؟
- ساخت یک صفحه وب با اصول Tailwind CSS
- Tailwind CSS چیست و چگونه از آن استفاده کنیم؟
- CSS چیست و چگونه استفاده میشود؟
- مهمترین ویژگیهای CSS از گذشته تا امروز و ویژگیهای مدرن CSS
- CSS و Css3 برای همه از ابتدا
- با یادگیری مبانی CSS دانش خود را قدم به قدم بهبود میبخشیم.
- با بررسی همه مدلهای طرح بندی در CSS، یاد میگیریم صفحات را به سادهترین روش قرار دهیم.
- ایجاد صفحه فرود زیبا و واکنشگرا برای هر کسی
- تهیه صفحات وب با ویژگیهای Grid CSS و Flexbox بسیار آسانتر خواهد بود.
- یادگیری چگونگی کدنویسی HTML بدون یادگیری CSS مانند یاد گرفتن خواندن بدون نوشتن است.
- به دستگاههایی که هر روز برای دسترسی به اینترنت استفاده میکنید فکر کنید. متوجه خواهید شد که اندازه صفحه استاندارد وجود ندارد.
- Cascading Style Sheets (CSS) چیست؟ CSS یا Cascading Style Sheets، زبانی برای استایلدهی به زبانهای نشانهگذاری است.
پیشنیازهای دوره
- این دوره برای داوطلبانی مناسب است که میخواهند توسعهدهنده وب شوند ولی نمیدانند از کجا شروع کنند. هیچ دانش قبلی نیاز نیست، فقط اراده داشته باشید.
- ترجیحاً macOS، اما اجباری نیست. میتوانید از سیستمعاملهای دیگر هم استفاده کنید.
- داشتن یک کامپیوتر کاری با حداقل 8GB رم و اتصال اینترنت
- تمایل به یادگیری توسعه وب اپلیکیشنها
- هیچ مورد دیگری لازم نیست! فقط شما، کامپیوترتان و انگیزه شروع امروز
توضیحات دوره
به دوره "دوره کامل Tailwind CSS از ابتدا همراه با پروژه واقعی" خوش آمدید.
Tailwind Css | یادگیری چارچوب مدرن CSS Tailwind CSS با استفاده از Flexbox ،CSS Grid و ساخت سایتهای واکنشگرا و مدرن
Tailwind CSS یک چارچوب CSS متنباز است. ویژگی اصلی این کتابخانه این است که برخلاف چارچوبهای دیگر مانند Bootstrap، کلاسهای از پیش تعریفشدهای برای المانهایی مثل دکمه یا جدول ارائه نمیدهد. بلکه مجموعهای از کلاسهای "utility" CSS را فراهم میکند که میتوان با ترکیب آنها، استایل هر المان را تنظیم کرد.
مثلاً در سیستمهای سنتیتر، کلاسی به نام message-warning وجود دارد که پسزمینه زرد و متن بولد اعمال میکند. برای رسیدن به این نتیجه در Tailwind، باید کلاسهای bg-yellow-300 و font-bold را اعمال کرد.
استفاده از Tailwind CSS رویکرد مستقیمیتر به استایلدهی را تشویق میکند. به جای جابهجایی بین فایلهای HTML و فایلهای جداگانه CSS، توسعهدهندگان میتوانند استایلها را مستقیماً در HTML اعمال کنند که طراحی را سریعتر و سادهتر میکند. Tailwind CSS وابسته به هیچ فریمورک جاوااسکریپت خاصی نیست.
در این دوره، یاد میگیرید که چگونه یک وبسایت را با Tailwind CSS از ابتدا توسعه دهید.
اگر به فکر یادگیری Tailwind CSS هستید، این دوره بهترین انتخاب برای شما است.
ما Tailwind CSS را از سطح مبتدی تا پیشرفته با سادهترین روش ممکن همراه با مثالها، اسلایدها و نمودارها توضیح دادهایم.
در حین آموزش موضوعات، پروژههای متعددی ساختهایم زیرا معتقدیم آموزشهای عملی بسیار کاربردیتر است.
حالا درباره سرفصلهای دوره صحبت کنیم.
در بخش اول دوره، پاسخ میدهیم که فریمورک چیست و مزایای Tailwind CSS را توضیح میدهیم.
در بخش بعدی، عملیات قابل انجام با Tailwind CSS را شروع به یادگیری میکنیم. برای این دوره، نیاز به دانش اولیه HTML و CSS دارید. یاد میگیریم چگونه عملیاتی که با CSS معمولی انجام میشود را با Tailwind CSS انجام دهیم. Tailwind CSS کلاسهای خاص خودش را دارد. این موضوعات را با استفاده از صفحه مستندات توضیح میدهیم زیرا یادگیری استفاده از مستندات در یادگیری هر موضوع جدید بسیار مهم است. نمیتوان همه جزئیات یک موضوع را توضیح داد، هدف آموزش یادگیری چگونگی یادگیری موضوع است. برای این کار باید به ویژگیهای اولیه اشاره کرد.
در این آموزش، رایجترین ویژگیهای CSS با Tailwind CSS به شما نشان داده میشود. ابتدا با کلاسهای متن و رنگ شروع میکنیم.
سپس ویژگیهایی که بر ساختار کل صفحه تأثیر میگذارند، مانند flex و grid را بررسی خواهیم کرد. برای تقویت آموختهها، در بخش سوم یک وبسایت زیبا با طراحی واکنشگرا میسازیم. هنگام ساخت این اپلیکیشن، چند موضوعی را هم بررسی میکنیم که در حین درس اشاره نکردهایم.
بنابراین پس از اتمام دوره، یاد گرفتهاید چگونه Tailwind CSS را در اپلیکیشنها ادغام کنید و قادر خواهید بود رابطهای کاربری اپلیکیشن را با این چارچوب بسازید.
نیاز به دانش قبلی ندارید!
نیازی به داشتن دانش قبلی درباره Tailwind CSS نیست. این دوره شما را از مبتدی تا سطح پیشرفته با مثالهای عملی میبرد.
در استفاده از Tailwind CSS به شما اعتماد به نفس داده میشود و اگر به مشکلی برخوردید، پشتیبان شما خواهیم بود.
یادگیری از طریق عمل!
این دوره را بسیار ساده طراحی کردهایم تا قدمبهقدم شما را همراهی کند تا اطمینان حاصل کنید چگونه از Tailwind CSS به خوبی استفاده کنید. در این دوره، Tailwind CSS را با ساخت پروژههای مختلف آموزش میدهیم.
در این آموزش یاد میگیرید؛
- مبانی Tailwind CSS و افزودن آن به اپلیکیشن
- مهمترین موضوعات Tailwind CSS
- چگونه طراحی واکنشگرا برای وبسایتها ایجاد کنیم؟
- چگونه به آسانی بزرگترین و پیشرفتهترین وبسایت را با Tailwind CSS بسازیم؟
Tailwind CSS چیست؟
Tailwind CSS یک چارچوب CSS با رویکرد utility-first برای ساخت رابطهای مدرن وب است. به جای کامپوننتهای از پیش تعریفشده، مجموعهای از کلاسهای کمسطح فراهم میکند که میتوانید برای هر طراحی آنها را در HTML ترکیب کنید. این انعطافپذیری زیادی در ایجاد طراحیهای سفارشی بدون نیاز به نوشتن حجم زیادی CSS میدهد.
برخی از ویژگیهای کلیدی Tailwind CSS :
- رویکرد Utility-first: فریمورک Tailwind CSS مجموعهای از کلاسهای کاربردی سطح پایین ارائه میدهد که میتوانید برای ساخت هر طرحی آنها را با هم ترکیب کنید. این ویژگی به شما انعطافپذیری و کنترل زیادی روی ظاهر و حس وبسایتتان میدهد.
- طراحی واکنشگرا: با Tailwind CSS، ایجاد طرحهای واکنشگرا که در هر اندازه صفحهنمایشی عالی به نظر میرسند، بسیار آسان است.
- قابلیت سفارشیسازی: Tailwind CSS بسیار قابل شخصیسازی است، بنابراین میتوانید طرحها و کامپوننتهای سفارشی خود را ایجاد کنید.
- یادگیری آسان: یادگیری Tailwind CSS نسبتاً آسان است، به خصوص اگر قبلاً با HTML و CSS آشنایی داشته باشید.
مزایای Tailwind CSS چیست؟
- کاهش کدهای تکراری: Tailwind CSS با ارائه مجموعهای از کلاسهای کاربردی قابلاستفاده مجدد، به شما کمک میکند تا از تکرار کدها جلوگیری کنید.
- افزایش سرعت توسعه: این ابزار با آسانتر کردن ایجاد طرحهای سفارشی، به شما کمک میکند تا سرعت توسعه را بالا ببرید.
- بهبود قابلیت نگهداری: Tailwind CSS با خواناتر کردن کدها و سادهتر کردن فرآیند ویرایش، قابلیت نگهداری پروژهی شما را بهبود میبخشد.
آیا یادگیری HTML و CSS سخت است؟
اینکه یادگیری Tailwind CSS سخت است یا نه، به تجربه قبلی شما در CSS و سبک یادگیریتان بستگی دارد.
اگر قبلاً هرگز از CSS استفاده نکردهاید:
- درک اصول اولیه Tailwind CSS در ابتدا ممکن است کمی دشوار باشد. Tailwind CSS از رویکرد utility-first استفاده میکند که در سایر فریمورکهای CSS یافت نمیشود. بنابراین، داشتن درک اولیه از چگونگی کار CSS مفید خواهد بود.
- با این حال، اگرچه منحنی یادگیری Tailwind CSS شیب تندتری دارد، میتوانید به سرعت پیشرفت کنید. مستندات رسمی این فریمورک و منابع آنلاین بسیار جامع هستند و دورهها و آموزشهای رایگان زیادی در دسترس است.
- علاوه بر این، Tailwind CSS یک جامعه کاربری فعال دارد و افراد زیادی هستند که میتوانند در صورت داشتن هرگونه سوال به شما کمک کنند.
اگر تجربه قبلی در CSS دارید:
- یادگیری Tailwind CSS برای شما آسانتر خواهد بود. اگر قبلاً با اصول اولیه CSS آشنا هستید، یادگیری چگونگی استفاده از کلاسهای کاربردی Tailwind CSS روند نسبتاً سریعی خواهد داشت.
- با این حال، مهم است به یاد داشته باشید که Tailwind CSS متفاوت از سایر فریمورکهای CSS کار میکند. بنابراین، ممکن است هنگام استفاده از Tailwind CSS نیاز به یادگیری مفاهیم جدیدی داشته باشید.
با این وجود، اگر تجربه قبلی در CSS دارید، میتوانید زمان لازم برای تسلط به Tailwind CSS را به میزان قابلتوجهی کاهش دهید.
به طور کلی، یادگیری Tailwind CSS دشوار نیست، اما به صرف کمی زمان و تلاش نیاز دارد.
آیا Tailwind CSS ارزش یادگیری دارد؟
Tailwind CSS ابزاری عالی برای توسعهدهندگان فرانتاند است که میخواهند رابطهای کاربری وب سریع، انعطافپذیر و مقیاسپذیر بسازند. این ابزار میتواند به ویژه برای طراحی واکنشگرا و کاهش کدهای تکراری بسیار مفید باشد.
بهترین راه برای اینکه بفهمید Tailwind CSS برای شما مناسب است یا خیر، این است که آن را امتحان کنید و ببینید چقدر از کار با آن لذت میبرید.
در پایان دوره
در پایان این دوره، شما قادر خواهید بود ساخت وبسایت اختصاصی خود را با استفاده از Tailwind CSS آغاز کنید.
این دوره برای چه کسانی مناسب است؟
- هر کسی که میخواهد Tailwind CSS را یاد بگیرد.
- برنامهنویسانی که علاقهمند به ساخت وبسایت با Tailwind CSS هستند.
- هر کسی که هیچ تجربه قبلی در کدنویسی توسعه وب ندارد اما میخواهد به یک متخصص تبدیل شود.
- افراد کاملاً مبتدی با ذهنی کنجکاو که میخواهند توسعهدهنده وب شوند.
- هر کسی که برای تغییر مسیر شغلی برنامهریزی میکند و میخواهد یک توسعهدهنده وب شود.
دوره کامل Tailwind CSS از ابتدا همراه با پروژه واقعی
-
Tailwind CSS از ابتدا 02:00
-
فریمورک CSS چیست؟ - Tailwind 04:00
-
Tailwind CSS 03:47
-
راهاندازی Tailwind CSS 15:44
-
کار با رنگ در Tailwind CSS 13:42
-
ویژگیهای متن در Tailwind 10:12
-
استفاده از ویژگیهای مدل جعبهای با Tailwind CSS 12:17
-
طراحی واکنشگرا با Tailwind CSS 11:14
-
استفاده از Flexbox در CSS 06:34
-
استفاده از CSS Grid در Tailwind 16:25
-
استایلدهی به دکمهها و لینکها در Tailwind 07:39
-
استایلدهی به المانهای فرم در Tailwind CSS 10:09
-
ویژگیهای موقعیتدهی و z-index در CSS 09:02
-
آزمایش افزودن CSS سفارشی در Tailwind 07:31
-
ایجاد فونت سفارشی در Tailwind CSS 05:52
-
آزمون None
-
چگونگی نصب Node.js و npm برای CSS 05:07
-
ارائه پروژه در Tailwind 03:49
-
راهاندازی پروژه در Tailwind CSS 15:02
-
ساخت بخش ناوبری در Tailwind CSS React 21:03
-
حالا تگ Header را در CSS بسازیم 05:54
-
بیا محتوی اصلی را با Tailwind بسازیم 09:34
-
بیا ادامه دهیم با تگ Main در CSS 19:10
-
ایجاد فیلد فرم با Tailwind 15:23
مشخصات آموزش
دوره کامل Tailwind CSS از ابتدا همراه با پروژه واقعی
- تاریخ به روز رسانی: 1405/04/02
- سطح دوره:همه سطوح
- تعداد درس:24
- مدت زمان :03:51:24
- حجم :2.01GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy