آموزش مقدمه ای بر Tailwind CSS
Introduction To Tailwind CSS
------------------------------------------- ---------------
پیوند به کد نهایی پروژه:
https://github.com/chrisdixon161/healthy-juice-bar
می‌توانید پروژه نهایی را در اینجا مشاهده کنید:
https://healthy-juice-bar.netlify.app/
------------------------------------------- ---------------
مقدمه ای برای Tailwind CSS
هنگام ساختن وب‌سایت، بیشتر ما در دو گروه قرار می‌گیریم.
یا کدنویس هستید یا طراح. من مطمئناً بهترین طراح نیستم، اما هنوز به سایت هایی که می سازم نیاز دارم تا خوب به نظر برسند. چارچوب‌ها و کتابخانه‌های زیادی برای کمک به این موضوع وجود دارد، اما بسیاری از آنها روش خاص خود را برای انجام کارها اعمال می‌کنند.
اینجاست که Tailwind CSS وارد عمل می شود. ما می‌توانیم HTML خود را همانطور که معمولاً انجام می‌دهیم بنویسیم، و سپس از نام‌های کلاس‌هایی که با دقت طراحی شده‌اند به نام کلاس‌های ابزار استفاده کنیم تا ظاهری تمیز و حرفه‌ای به پروژه‌های خود ارائه دهیم. همه در حالی که در HTML ما باقی می‌مانیم.
این به ویژه زمانی مفید است که یک پروژه رشد کند. به جای اینکه مدام به اسامی کلاس های جدید و شیوه نامه های رو به رشد فکر کنید،
Tailwind سیستم طراحی ثابتی را ارائه می دهد که کل تیم شما نیز می تواند از آن استفاده کند.
ارائه ابزارهای ساده برای کنترل تقریباً همه چیز مانند فاصله، رنگ‌ها، تایپوگرافی و طرح‌بندی، و پاسخ‌دهی.
این کلاس مقدمه ای کامل برای Tailwind برای مبتدیان است، اما شما باید قبل از شرکت در HTML CSS تجربه ای داشته باشید تا بهترین استفاده را از این کلاس ببرید.
ما همه موارد ضروری را پوشش می دهیم:
- راه اندازی Tailwind با استفاده از روش های مختلف
- افزایش سرعت توسعه با سرور زنده
- کلاس های ابزار Tailwind نحوه استفاده از آنها
- استایل اول موبایل
- پالت رنگ
- ابزارهای فاصله
- Flexbox برای چیدمان عمومی و پاسخگو
- نقاط شکست طراحی پاسخگو
- افزودن CSS سفارشی
- دستورات Tailwind
- استقرار
- و موارد دیگر!
Tailwind یک مهارت عالی برای یادگیری است و واقعاً می‌تواند به ظاهر پروژه‌های شما بدون مقدار زیادی کار کمک کند. من مشتاقانه منتظر هستم که همه چیز را به شما آموزش دهم و شما را در کلاس خواهم دید!
در طول این کلاس، ما یک پروژه داشبورد محصول را بر اساس فروش اسموتی ایجاد می‌کنیم.
این کلاس به ما این امکان را می‌دهد که در حین حرکت، همه چیزهایی را که یاد می‌گیریم، عملی کنیم.
این پروژه را می توان به راحتی سفارشی کرد، می توانید تم، طرح، رنگ ها یا هر چیز دیگری را که می خواهید شخصی تر کنید تغییر دهید!
فراموش نکنید پس از اتمام پروژه خود را به اشتراک بگذارید، من نمی توانم منتظر بمانم تا ببینم چه چیزی ایجاد می کنید!
درس ها Lessons
-
تغییر چیدمان با نقاط شکست Changing Layout With Breakpoints
-
گسترش Deployment
-
نمای کلی Wireframe Wireframe Overview
-
به کلاس خوش آمدید! Welcome To The Class!
-
موبایل اول و پالت رنگ Mobile First & The Color Palette
-
کار خود را در Skillshare به اشتراک بگذارید! Share Your Work On Skillshare!
-
راه اندازی سرور زنده Live Server Setup
-
یک ظاهر طراحی صفحه نمایش بزرگ Large Screen Styling
-
استفاده از CSS Flexbox Using The CSS Flexbox
-
ابزارهای فاصله گذاری Spacing Utilities
-
ابزارهای صفحه خوان Screen Reader Utilities
-
جداول و سرریز Tables And Overflow
-
راه اندازی Tailwind Tailwind Setup
-
بخش صفحه بندی Pagination Section
-
بدنه و تقسیم میز Table Body & Divides
-
استفاده از CSS و دستورالعمل های سفارشی Using Custom CSS & Directives
-
پیش نیازها و ابزارهای مورد نیاز Prerequisites & Required Tools
-
دستورالعمل های @layer & @apply The @layer & @apply Directives
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.
https://donyad.com/d/d0ac6f
Chris Dixon
توسعه دهنده وب و معلم آنلاین
سلام، نام من کریس است و من یک توسعه دهنده وب از بریتانیا هستم. من یک مربی با تجربه هستم که بوت کمپ های توسعه وب را هدایت می کنم و همچنین دوره های آنلاین را تدریس می کنم.
زمینه های اصلی مورد علاقه من Vue.js، وردپرس، Shopify، جاوا اسکریپت، تجارت الکترونیک و تجارت هستند. من نسبت به کاری که انجام می‌دهم و به آموزش دیگران علاقه دارم.
دلیل شما برای یادگیری ساخت وب‌سایت هر چه باشد، انتخاب شغلی بسیار خوبی داشته‌اید.
انگیزه شخصی من این بود که رئیس خودم شوم و آزادی و انعطاف بیشتری در زندگی ام داشته باشم. من همچنین از چالش فنی آن و روشی که دائماً در حال تکامل است لذت می برم. من اولین وب‌سایت خود را در سال 1999 ساختم و مشاهده کردم که وب به آنچه امروز است تبدیل شده است.
من سعی می‌کنم دوره‌هایم را لذت‌بخش کنم و سعی می‌کنم به یاد بیاورم که در زمان یادگیری چگونه بود. من همچنین معتقدم بهترین راه برای یادگیری انجام دادن است و سعی می کنم تا حد امکان مثال های عملی را در دوره های خود بگنجانم.
از علاقه شما متشکریم و مشتاقانه منتظرم که به من بپیوندید.
کریس
نمایش نظرات