آموزش 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

نمایش نظرات

Udemy (یودمی)

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

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

آموزش Tailwind CSS از ابتدا | با پروژه های متعدد
جزییات دوره
4.5 hours
44
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
2,212
4.8 از 5
دارد
دارد
دارد
Ali Hossain
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Ali Hossain Ali Hossain

توسعه دهنده وب و معلم آنلاین