آموزش Tailwind CSS 3. 0: Fundamentals
Tailwind CSS 3. 0: Fundamentals
Tailwind CSS یک چارچوب مدرن و به طور فزاینده ای محبوب است که نحوه کار ما با CSS را تغییر می دهد.
شرط آن کاملا رادیکال است: استفاده از HTML برای تعریف سبک های صفحه. جالب است، اینطور نیست؟ اما... چرا از استایل های درون خطی استفاده نمی کنید؟ خوب، Tailwind CSS کاملاً برتر از آن است، و در این دوره، آن را به شما نشان خواهم داد و کار مطالعه و تحقیق را برای شما ذخیره می کنم.
به عنوان مثال، و به عنوان یک پروژه دوره، یک صفحه فرود شبیه به Netflix با استفاده از کلاس های ابزار Tailwind CSS ایجاد خواهید کرد. شما به تدریج آن را با ویژگی هایی مانند موارد زیر بهبود و تکمیل خواهید کرد:
طراحی واکنشگرا
حالات CSS
حالت تاریک
استفاده مجدد از سبک ها (خودتان را تکرار نکنید)
شما یاد خواهید گرفت که چگونه به روشی راحت از 4 پلاگین رسمی Tailwind CSS استفاده کنید:
TailwindCSS-Typography: برای استایل دادن به متون (به عنوان مثال، متن هایی که از پایگاه داده می آیند)
TailwindCSS-Forms : برای فرم دادن به فرم ها
TailwindCSS-Aspect-Ratio : برای کنترل نسبت ابعاد تصاویر
TailwindCSS-Line-Clamp: برای محدود کردن متن و دستیابی به هماهنگی بصری
بسیاری از وب‌سایت‌ها در حال حاضر از چارچوب‌های کاربردی CSS استفاده می‌کنند، از جمله برخی از موارد محبوب مانند GitHub، Heroku، Kickstarter، یا Twitch.
من فکر می کنم ارزش یادگیری این فریم ورک را دارد زیرا روش کار بسیار متفاوت و مفیدی را تعریف می کند، که سایر فریم ورک ها قبلاً آن را کپی کرده اند. با این دوره، این کار را برای شما آسان و بسیار کاربردی می کنم که یک پایگاه خوب داشته باشید و هر صفحه ای را که می خواهید بسازید.
اگر هنوز تصمیم نگرفته‌اید، می‌توانید به صورت رایگان درسی را تماشا کنید که در آن صفحه‌ای را از ابتدا می‌سازیم. بنابراین می توانید کل فرآیند را ببینید.
البته، این دوره شامل زیرنویس‌های با کیفیت (CC) است.
دوره زنده است، و من آن را با تکامل Tailwind CSS به روز خواهم کرد. شما همچنین به مخزنی که من کد منبع صفحات را منتشر می کنم دسترسی دارید.
بعد از هر ماژول درس، یک مسابقه امتحانی می گیرید تا بررسی کنید که هیچ چیز مهمی را از دست نداده اید.
و البته، اگر سؤالی دارید، می‌توانید آنها را در بخش Q A ارسال کنید، جایی که من به آنها پاسخ خواهم داد.
در داخل می بینمت!
پروژه کلاس یک صفحه فرود مانند Netflix خواهد بود.
با پیشرفت در دوره، ویژگی‌های مختلف Tailwind CSS را یاد می‌گیرید و وب‌سایت را بهبود می‌بخشید.
در پایان کلاس، می‌توانید فایل HTML نهایی را آپلود کنید. من شما را تشویق می کنم که تغییراتی را ایجاد کنید تا سبک شخصی خود را به آن بدهید. اسناد را بررسی کنید و کلاس های مورد نیاز خود را اعمال کنید.
درس ها Lessons
-
پیکربندی Tailwind CSS Configuring Tailwind CSS
-
با استفاده از افزونه Aspect Ratio Using the Aspect Ratio plugin
-
نگاهی به مفاهیم پیشرفته A look at advanced concepts
-
اعمال حالت های CSS Applying CSS states
-
استفاده مجدد از کلاس ها با @apply Reusing classes with @apply
-
پیکربندی کد ویژوال استودیو Configuring Visual Studio Code
-
اضافه شدن حالت تاریک Adding dark mode
-
ساختن یک صفحه از ابتدا Building a page from scratch
-
با استفاده از افزونه تایپوگرافی Using the Typography plugin
-
CLI مستقل Standalone CLI
-
با استفاده از افزونه Forms Using the Forms plugin
-
ارائه کلاس Presentation of the class
-
با استفاده از پلاگین Line Clamp Using the Line Clamp plugin
-
در حال نصب node.js Installing node.js
-
Tailwind CSS چیست و چه کاربردی دارد؟ What is Tailwind CSS and what is it used for?
-
مراحل بعدی Next steps
-
ریسپانسیو کردن صفحه Making the page responsive
https://donyad.com/d/3134
David Morales
توسعه دهنده وب. مربی فنی.
نمایش نظرات