دسترسی سریع:

مسیر:

صفحه اصلی

🔔 با توجه به بهبود نسبی اینترنت، آماده‌سازی دوره‌ها آغاز شده است. به دلیل تداوم برخی اختلالات، بارگذاری دوره‌ها ممکن است با کمی تأخیر انجام شود. مدت اشتراک‌های تهیه‌شده محفوظ است.

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

دوره جامع آموزش Tailwind CSS از صفر تا صد با پروژه واقعی - آخرین آپدیت

دانلود Complete Tailwind CSS Course From Scratch with Real Project

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.

نمونه ویدیوها: (صرفا برای مشاهده نمونه ویدیو، ممکن هست نیاز به شکن داشته باشید.)

توضیحات دوره:

به دوره "آموزش کامل Tailwind CSS از صفر تا پروژه واقعی" خوش آمدید!

Tailwind CSS | یادگیری فریم‌ورک مدرن CSS با Tailwind CSS با استفاده از Flexbox، CSS Grid و ساخت وب‌سایت‌های واکنش‌گرا و مدرن

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

به عنوان مثال، در سایر سیستم‌های سنتی، یک کلاس 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 چیست؟

Tailwind CSS یک فریم‌ورک CSS utility-first برای ساخت رابط‌های کاربری وب مدرن است. به جای اجزای از پیش تعریف شده، Tailwind CSS مجموعه‌ای از کلاس‌های utility سطح پایین را ارائه می‌دهد که می‌توانید آن‌ها را برای ساخت هر طرحی، مستقیماً در HTML خود ترکیب کنید. این به شما انعطاف‌پذیری می‌دهد تا طرح‌های سفارشی ایجاد کنید بدون اینکه نیاز به نوشتن CSS زیادی داشته باشید.

در اینجا برخی از ویژگی‌های کلیدی Tailwind CSS آورده شده است:

رویکرد Utility-first: Tailwind CSS مجموعه‌ای از کلاس‌های utility سطح پایین را ارائه می‌دهد که می‌توانید آن‌ها را برای ساخت هر طرحی ترکیب کنید. این به شما انعطاف‌پذیری و کنترل زیادی بر ظاهر و احساس وب‌سایت خود می‌دهد.
طراحی واکنش‌گرا: Tailwind CSS ایجاد طرح‌های واکنش‌گرا را آسان می‌کند که در هر اندازه صفحه نمایش عالی به نظر می‌رسند.
قابل سفارشی‌سازی: Tailwind CSS بسیار قابل سفارشی‌سازی است، بنابراین می‌توانید طرح‌ها و اجزای سفارشی خود را ایجاد کنید.
یادگیری آسان: Tailwind CSS نسبتاً آسان برای یادگیری است، به خصوص اگر قبلاً با HTML و CSS آشنا باشید.

مزایای Tailwind CSS چیست؟

· می‌تواند تکرار کد را کاهش دهد: Tailwind CSS می‌تواند با ارائه مجموعه‌ای از کلاس‌های utility قابل استفاده مجدد، به شما در کاهش تکرار کد کمک کند.

· می‌تواند توسعه را سرعت بخشد: 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 را می‌دانید، یادگیری نحوه استفاده از کلاس‌های utility Tailwind CSS یک فرآیند نسبتاً سریع خواهد بود.
با این حال، مهم است که به یاد داشته باشید که Tailwind CSS متفاوت از سایر فریم‌ورک‌های CSS کار می‌کند. بنابراین، ممکن است هنگام استفاده از Tailwind CSS نیاز به یادگیری برخی مفاهیم جدید داشته باشید.
باز هم، اگر تجربه CSS قبلی دارید، می‌توانید زمان لازم برای یادگیری Tailwind CSS را به طور قابل توجهی کوتاه کنید.

به طور کلی، یادگیری Tailwind CSS دشوار نیست، اما نیاز به مقداری زمان و تلاش دارد.

آیا ارزش دارد Tailwind CSS را یاد بگیریم؟

Tailwind CSS یک ابزار عالی برای توسعه دهندگان فرانت اند است که می‌خواهند رابط‌های وب سریع، انعطاف پذیر و مقیاس پذیر بسازند. این می‌تواند به ویژه برای طراحی واکنش گرا و کاهش تکرار کد مفید باشد.

بهترین راه برای تعیین اینکه آیا Tailwind CSS برای شما مناسب است یا خیر، این است که آن را امتحان کنید و ببینید که آیا دوست دارید.

در پایان دوره

در پایان دوره، شما قادر خواهید بود با استفاده از Tailwind CSS وب سایت خود را بسازید.

چرا باید در این دوره شرکت کنید؟

پاسخ ما ساده است: کیفیت تدریس

OAK Academy، مستقر در لندن، یک شرکت آموزش آنلاین است که دوره‌های IT، نرم افزار، طراحی و توسعه را به زبان‌های ترکی، انگلیسی و پرتغالی ارائه می‌دهد. این آکادمی بیش از 4000 ساعت آموزش ویدیویی در پلتفرم Udemy ارائه می‌دهد.

هنگامی که ثبت نام می‌کنید، تخصص توسعه دهندگان با تجربه آکادمی OAK را احساس خواهید کرد

محتوای تازه

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

کیفیت تولید صدا و تصویر

تمام مطالب ما به عنوان ویدیوی/صوت با کیفیت بالا ایجاد/تولید می‌شوند تا بهترین تجربه یادگیری را برای شما فراهم کنند.

شما:

· به وضوح خواهید دید

· به وضوح خواهید شنید

· بدون حواس پرتی در طول دوره حرکت خواهید کرد

همچنین دریافت خواهید کرد:

دسترسی مادام العمر به دوره

پشتیبانی سریع و دوستانه در بخش پرسش و پاسخ

گواهی تکمیل دوره Udemy آماده برای دانلود

اکنون در دوره "آموزش کامل Tailwind CSS از صفر تا پروژه واقعی" شرکت کنید.

ما پشتیبانی کامل ارائه می‌دهیم و به هر سوالی پاسخ می‌دهیم.

شما را در طرف دیگر می‌بینیم!

سرفصل ها و درس ها

مقدمه Introduction to the

آموزش Tailwind CSS از صفر Tailwind CSS From Scratch
فریم ورک CSS چیست – Tailwind What is CSS Framework -Tailwind
فایل های پروژه Project Files

Tailwind CSS Tailwind CSS

Tailwind CSS Tailwind CSS
راه اندازی Tailwind CSS Setting Up Tailwind CSS
کار با رنگ در Tailwind CSS Working With Color in Tailwind CSS
ویژگی های متن در Tailwind Text Features in Tailwind
استفاده از ویژگی های مدل جعبه ای با Tailwind CSS Using Box Model Properties With Tailwind CSS
طراحی واکنش گرا با Tailwind CSS Responsive Design With Tailwind CSS
استفاده از Flexbox در CSS Using Flexbox in CSS
استفاده از CSS Grid در Tailwind Using CSS Grid in Tailwind
استایل دهی دکمه ها و لینک ها در Tailwind Styling Buttons and Links in Tailwind
استایل دهی عناصر فرم در Tailwind CSS Styling Form Elements in Tailwind CSS
ویژگی های موقعیت و z-index در CSS Position Features and z-index in CSS
اضافه کردن CSS سفارشی در Tailwind Try Adding Some Custom CSS in Tailwind
فونت سفارشی در Tailwind CSS Custom Font Family in Tailwind CSS
آزمون Quiz

پروژه Tailwind CSS Tailwind CSS Project

نحوه نصب Node.js و npm در CSS How to Install Node.js and npm in CSS
ارائه پروژه در Tailwind Project Presentation in Tailwind
راه اندازی پروژه در Tailwind CSS Project Setup in Tailwind CSS
ساخت ناحیه ناوبری در Tailwind CSS React Construction of Navigation Area in Tailwind CSS React
حالا تگ سربرگ را در CSS بسازیم Now Let’s Make the Header Tag in CSS
بیایید محتوای اصلی را با Tailwind ایجاد کنیم Let’s Create the Main Content with Tailwind
بیایید تگ اصلی را در CSS ادامه دهیم Let’s Continue With the Main Tag in CSS
ایجاد فیلد فرم با Tailwind Creation of the Form Field with Tailwind