آموزش Tailwind CSS از ابتدا - یادگیری با ساخت پروژه ها

آنچه یاد خواهید گرفت

• یادگیری ایجاد و ویرایش بسیار سریع طرح‌ بندی‌ ها
• آشنایی با کلاس های یوتیلیتی Tailwind با استفاده از sandbox کد
• ساخت 5 پروژه کوچک و 6 پروژه وب سایت
• یادگیری نحوه راه اندازی محیط توسعه با استفاده از Tailwind CLI
• پیکربندی استایل های خود برای ایجاد طرح بندی های سفارشی

پیش نیازهای دوره

• شما باید اصول اولیه CSS را بدانید.

توضیحات دوره

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

Sandbox

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

پروژه های کوچک

در مرحله بعد، مواردی را در محیط sandbox یاد می گیریم و از آن برای ایجاد چند پروژه کوچک استفاده می کنیم. این ها مواردی هستند که ایجاد آن ها 10 تا 20 دقیقه طول می کشد و ما همه آن ها را در یک ویدئو در هر پروژه انجام خواهیم داد.

این مینی‌پروژه‌ها شامل موارد زیر هستند:

• کارت اشتراک ایمیل
• جدول قیمت‌گذاری
• مدل محصول
• گالری تصاویر
• مدل ورود

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

پروژه های وب سایت

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

وب‌سایت کلیپ‌بورد - صفحه فرود ساده محصول نرم‌افزاری. تمرکز بیشتر روی فلکس‌باکس و ترازبندی. چند تصویر پس‌زمینه و غیره.

Loopstudios - وب‌سایت شرکت واقعیت مجازی با تصاویر جذاب، منوی واکنش‌گرای موبایل با مقداری جاوا اسکریپت، جلوه‌های گرادیان روی هم.

Shortly - وب‌سایتی برای یک ابزار کوتاه‌کننده لینک. ما یک منوی واکنش‌گرای زیبا خواهیم داشت و کمی جاوا اسکریپت برای اعتبارسنجی فرم و کار با DOM اضافه خواهیم کرد.

Testimonial Grid - پروژه‌ای که در آن بر استفاده از کلاس‌های شبکه Tailwind تمرکز می‌کنیم.

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

Bookmark - صفحه فرود افزونه مدیریت بوکمارک. این وب‌سایت دارای چند تصویر پس‌زمینه پویا، یک منوی همبرگری و چند تب خواهد بود که از جاوا اسکریپت استفاده می‌کنند.

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

• کسی که می خواهد در ایجاد طرح بندی وب سایت و رابط کاربری بهتر عمل کند.