🔔 با توجه به بهبود نسبی اینترنت، آمادهسازی دورهها آغاز شده است. به دلیل تداوم برخی اختلالات، بارگذاری دورهها ممکن است با کمی تأخیر انجام شود. مدت اشتراکهای تهیهشده محفوظ است.
لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
Tailwind CSS 4 آموزش ضروری
- آخرین آپدیت
دانلود Tailwind CSS 4 Essential Training
نکته:
ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:
Tailwind CSS 4 به سرعت بخشیدن به توسعه وب جلوی شما کمک می کند و صفحات وب یک ظاهر طراحی شده را به یک تجربه سرگرم کننده و آسان تبدیل می کند. در این دوره دوستانه مبتدی با مربی Shruti Balasa برای تسلط بر ملزومات این چارچوب اول ابزار غواصی کنید. با تنظیم محیط خود و درک مفاهیم اصلی و سپس یادگیری نحوه سبک کردن متن ، استفاده از رنگ ها و ایجاد طرح بندی با استفاده از tailwind شروع کنید. در طول راه ، Shruti همچنین اصول اولیه طراحی طرح های پاسخگو و شخصی سازی چارچوب را پوشش می دهد. در پایان این دوره ، شما به مهارت های بنیادی مجهز خواهید شد تا صفحات وب خود را سریعتر از همیشه با گرافیک های خیره کننده و جلوه های بصری سبک کنید.
سرفصل ها و درس ها
مقدمه
Introduction
درک رویکرد اول ابزار
Understanding the utility-first approach
با CSS Tailwind ملاقات کنید
Meet Tailwind CSS
آنچه باید بدانید
What you should know
استفاده از Codespaces برای این دوره
Using Codespaces for this course
1. تایپوگرافی و رنگ ها
1. Typography and Colors
با استفاده از رنگ ها
Using colors
راه حل: سبک یک کارت توصیف
Solution: Style a testimonial card
چالش: سبک یک کارت توصیف
Challenge: Style a testimonial card
استفاده از رنگ های پس زمینه و شیب
Applying background colors and gradients
درک پیش از پرواز
Understanding preflight
استفاده از سبک های متن و فونت
Applying text and font styles
اضافه کردن مرزها و سایه ها
Adding borders and shadows
ترتیب اصول طرح بندی
2. Layout Fundamentals
راه حل: یک بخش صفحه رویداد را سبک کنید
Solution: Style an event page section
ایجاد طرح بندی Flexbox
Creating flexbox layouts
چالش: یک بخش صفحه رویداد را سبک کنید
Challenge: Style an event page section
ایجاد طرح های شبکه
Creating grid layouts
اندازه و تنظیم مجدد موارد شبکه
Sizing and reordering grid items
اضافه کردن حاشیه و بالشتک
Adding margins and padding
تنظیم عرض و ارتفاع
Setting width and height
اندازه وسایل انعطاف پذیر و لانه سازی
Sizing flex items and nesting
با استفاده از برنامه های نمایش ، موقعیت و Z-Index
Using display, position, and z-index utilities
3. طراحی وب پاسخگو
3. Responsive Web Design
درک رویکرد اول موبایل
Understanding the mobile-first approach
ایجاد طرح های پاسخگو مشترک
Building common responsive layouts
با استفاده از اصلاح کننده های پاسخگو
Using responsive modifiers
راه حل: کارت اطلاعات با تصویر
Solution: Info card with image
چالش: کارت اطلاعات با تصویر
Challenge: Info card with image
4. تعامل و انواع
4. Interactivity and Variants
عناصر سبک در شناور و تمرکز
Style elements on hover and focus
چالش: یک دکمه تعاملی درست کنید
Challenge: Make an interactive button
تحول ، انتقال و انیمیشن ها
Transforms, transitions, and animations
اضافه کردن حالت تاریک
Adding dark mode
با استفاده از اصلاح کننده های شبه کلاس
Using pseudo-class modifiers
راه حل: یک دکمه تعاملی درست کنید
Solution: Make an interactive button
استایل عناصر شبه
Styling pseudo-elements
5. سبک های سفارشی در Tailwind
5. Custom Styles in Tailwind
استخراج سبک های مشترک
Extracting common styles
با استفاده از مقادیر دلخواه
Using arbitrary values
Shruti Balasa یک توسعه دهنده وب تمام پشته، مدرس فناوری، سازنده دوره و سخنران فناوری است.
شروتی بیش از 10 سال تجربه صنعتی در توسعه و ارائه بیش از 200 وب سایت برای شبکه های اجتماعی، تجارت الکترونیک و همه چیز در این بین کانال یوتیوب او، "Thirus"، آموزشها و نکات سادهای را برای مبتدیانی که در مراحل اولیه برنامهنویسی و حرفه توسعهدهنده خود هستند ارائه میدهد.
شروتی نویسنده کتاب الکترونیکی اخیر CSS است. Flex Grid: Complete Guide with Real-World Examples and Code Snippetsبرای دانلود در Gumroad موجود است. شروتی همچنین سخنران کنفرانس های بین المللی فناوری بوده است.
نمایش نظرات