آموزش 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
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.
https://donyad.com/d/3134
David Morales
توسعه دهنده وب. مربی فنی.
نمایش نظرات