لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش Tailwind CSS از ابتدا | با پروژه های متعدد
Tailwind CSS From Scratch | With Multiple Projects
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
فریم ورک Tailwind CSS را از ابتدا یاد بگیرید و پروژه های متعدد را با استفاده از Tailwind CSS با بهترین تمرین بسازید. مفاهیم اصلی Tailwind CSS را خواهید آموخت. وب سایت ها بر روی هر دستگاه تلفن همراه ممکن کار می کنند (طراحی ریسپانسیو) کد منبع قابل دانلود پیش نیازها: درک اولیه HTML و CSS آخرین نسخه نصب شده node و npm دانش پایه جاوا اسکریپت (اجباری نیست)
از ابتدا به Tailwind CSS خوش آمدید: با چندین پروژه. در این دوره گام به گام جدیدترین Tailwind را خواهید آموخت. پس از تکمیل اصول اولیه، من چند پروژه ایجاد خواهم کرد تا بدانید چگونه با مهارت ها پروژه ایجاد کنید، و اگر چیزی را در دوره از دست دادم، پروژه را نیز پوشش می دهد. همیشه بعد از یادگیری مهارت ها باید پروژه هایی برای یادگیری قوی ایجاد کنیم. این دوره تمام بخش های مختلف آخرین نسخه از محبوب ترین فریم ورک فرانت اند جهان، Tailwind را پوشش می دهد. در میلیونها وبسایت در سراسر جهان استفاده شده است و با دقت توسعه داده شده است تا طیف گستردهای از رابطهای کاربری معمولی را پوشش دهد.
قبل از tailwind CSS چه چیزی یاد بگیریم؟
اگر علاقه مند به یادگیری tailwind CSS هستید، باید درک عالی در
داشته باشید
HTML (زبان نشانه گذاری فرامتن)
CSS (برگهای سبک آبشاری)
جاوا اسکریپت (اجباری نیست)
NPM (اجباری نیست)
نیازی به یادگیری فن آوری های قدیمی تر مانند Tailwind v2 یا سایرین ندارید.
با tailwind CSS چه باید کرد؟
چارچوب اول Utility
به راحتی قابل تنظیم
فرآیند طراحی سریعتر
پاسخگویی
اندازه فایل کوچک
لازم نیست کلاسها را نامگذاری کنید
امروز ارزش خود را بهعنوان یک توسعهدهنده وب جلویی با یادگیری روشی پیشرفتهتر برای طراحی وبسایتهای خود با استفاده از Tailwind CSS افزایش دهید.
من همچنین همه منابع را آپلود کردم، اگر آنها را در هر جایی انباشته کنید، می توانید آنها را بررسی کنید. پس برای چی منتظری؟ ثبت نام کنید و محبوب ترین فریم ورک فرانت اند Tailwind در جهان را بیاموزید.
سرفصل ها و درس ها
معرفی
Introduction
Tailwind CSS چیست؟
What is Tailwind CSS?
راه اندازی محیط توسعه
Development Environment Setup
میانبرهای صفحه کلید VS Code
VS Code Keyboard Shortcuts
اولین برنامه Tailwind
First Tailwind APP
Tailwind CSS نصب و راه اندازی
Tailwind CSS Installation and set up
بررسی اجمالی پروژه
Project Overview
بررسی اجمالی پروژه یک
Project One Overview
بررسی اجمالی پروژه دو
Project Two Overview
مفاهیم اصلی
Core Concepts
درک رویکرد اول ابزار
Understanding the utility-first approach
پلاگین ها و تنظیمات پیکربندی
Plugins and configuration settings
کنترل شناور، فوکوس و سایر حالت ها
Handling Hover, Focus, and Other States
طراحی ریسپانسیو با Tailwind CSS
Responsive design with Tailwind CSS
حالت روشن و تاریک
Light & Dark Mode
سفارشی سازی Tailwind
Tailwind Customizations
ارزش های دلخواه
Arbitrary Values
Tailwind @apply
Tailwind @apply
Tailwind @layers
Tailwind @layers
بخش بنیادی
Fundamental Section
رنگ های دم بادی
Tailwind Colors
فاصله باد دم
Tailwind Spacing
تایپوگرافی باد دم
Tailwind Typography
اندازه باد دم
Tailwind Sizing
پس زمینه های باد دم
Tailwind Backgrounds
شیب باد دم
Tailwind Gradient
مرزهای دم باد
Tailwind Borders
جلوه های باد دم
Tailwind Effects
Tailwind Flexbox & Grid
Tailwind Flexbox & Grid
کانتینر باد دم
Tailwind Container
اجزای باد دم
Tailwind Components
Tailwind Build
Tailwind Build
منابع Tailwind
Tailwind Resources
ساخت پروژه کامل با Tailwind CSS
Building complete project with Tailwind CSS
ساخت پروژه کامل با Tailwind CSS
Building complete project with Tailwind CSS
ساخت پروژه سفارشی با Tailwind CSS
Building Custom project with Tailwind CSS
منطقه قهرمان برتر
Top Hero Area
ناحیه سرصفحه
Header Area
حالت روشن و حالت تاریک
Light Mood and Dark Mode
منوی اصلی
Main Menu
منطقه قهرمان
Hero Area
محل خدمات
Service Area
منطقه برند
Brand Area
منطقه پروژه
Project Area
منطقه تماس
Contact Area
منطقه پاورقی
Footer Area
ساخت پروژه
Build The Project
میزبانی پروژه
Hosting the project
امتحان
Quiz
امتحان
Quiz
نکات و ترفندها
Tips and Tricks
اشتباهات رایجی که هنگام استفاده از TailwindCSS باید از آنها اجتناب کرد
Common mistakes to avoid when using TailwindCSS
نتیجه
Conclusion
مراحل بعدی و منابع برای ادامه یادگیری
Next steps and resources for continued learning
یودمی یکی از بزرگترین پلتفرمهای آموزشی آنلاین است که به میلیونها کاربر در سراسر جهان امکان دسترسی به دورههای متنوع و کاربردی را فراهم میکند. این پلتفرم امکان آموزش در زمینههای مختلف از فناوری اطلاعات و برنامهنویسی گرفته تا زبانهای خارجی، مدیریت، و هنر را به کاربران ارائه میدهد. با استفاده از یودمی، کاربران میتوانند به صورت انعطافپذیر و بهینه، مهارتهای جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.
یکی از ویژگیهای برجسته یودمی، کیفیت بالای دورهها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد میدهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و میتوانند به بهترین شکل ممکن از آموزشها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرمهای آموزشی آنلاین، به افراد امکان میدهد تا به راحتی و با کیفیت، مهارتهای مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.
نمایش نظرات