کتاب CSS for Customer Retention با فرمت AZW3 برای کتابخوان کیندل و فرمت EPUB

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره CSS for Customer Retention

موضوع کلی: برنامه نویسی

موضوع میانی: CSS

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر CSS و نقش آن در تجربه کاربری
• 2. چرا CSS برای حفظ مشتری حیاتی است؟
• 3. مرور کلی بر ابزارهای توسعه و Inspector مرورگر
• 4. ساختار یک قانون CSS: انتخابگر، ویژگی، مقدار
• 5. نحوه اتصال CSS به HTML: Inline, Internal, External
• 6. انتخابگرهای پایه: Type, Class, ID
• 7. اولویت‌بندی و آبشاری بودن CSS (Cascading)
• 8. مفهوم Box Model: Margin, Border, Padding, Content
• 9. تنظیم رنگ‌ها در CSS: نام‌ها، Hex, RGB, HSL
• 10. تنظیم پس‌زمینه‌ها: Color, Image, Repeat, Position, Size
• 11. مبانی تایپوگرافی: Font-size, Font-family, Font-weight
• 12. نمایش عناصر: Block, Inline, Inline-block
• 13. کنترل جریان سند با ویژگی Float
• 14. پاک کردن Floatها با Clearfix
• 15. موقعیت‌یابی عناصر: Static, Relative, Absolute, Fixed, Sticky
• 16. معرفی Flexbox: مدل چیدمان انعطاف‌پذیر
• 17. خواص کانتینر Flex: Display, Flex-direction, Justify-content
• 18. خواص کانتینر Flex: Align-items, Align-content, Flex-wrap
• 19. خواص آیتم‌های Flex: Order, Flex-grow, Flex-shrink, Flex-basis
• 20. خواص آیتم‌های Flex: Align-self
• 21. ساختاردهی چیدمان با Flexbox (تمرین عملی)
• 22. معرفی CSS Grid: مدل چیدمان دو بعدی
• 23. خواص کانتینر Grid: Display, Grid-template-columns, Grid-template-rows
• 24. خواص کانتینر Grid: Grid-gap, Grid-auto-flow, Grid-auto-columns/rows
• 25. تعیین موقعیت آیتم‌ها در Grid: Grid-column, Grid-row
• 26. نام‌گذاری خطوط و نواحی در Grid برای وضوح بیشتر
• 27. ساختاردهی چیدمان با Grid (تمرین عملی)
• 28. مقایسه Flexbox و Grid: چه زمانی از کدام استفاده کنیم؟
• 29. مبانی طراحی واکنش‌گرا (Responsive Design)
• 30. معرفی Media Queries: تنظیمات بر اساس اندازه صفحه
• 31. استفاده از Breakpointها برای صفحات مختلف
• 32. رویکرد Mobile-First در طراحی واکنش‌گرا
• 33. واحد‌های Viewport: VW, VH, VMIN, VMAX
• 34. تصاویر واکنش‌گرا: Max-width: 100%; Height: Auto;
• 35. ویدئوهای واکنش‌گرا و نسبت ابعاد (Aspect Ratio)
• 36. تایپوگرافی واکنش‌گرا: تنظیم اندازه فونت بر اساس Viewport
• 37. طراحی قابل دسترس (Accessibility) با CSS
• 38. انتخابگرهای پیشرفته: Descendant, Child, Adjacent Sibling, General Sibling
• 39. انتخابگرهای Attribute: [attr], [attr=value], [attr~=value]
• 40. انتخابگرهای Pseudo-class: Hover, Active, Focus, Visited
• 41. انتخابگرهای Pseudo-class: First-child, Last-child, Nth-child
• 42. انتخابگرهای Pseudo-element: Before, After
• 43. ایجاد محتوای بصری با ::before و ::after
• 44. شخصی‌سازی استایل لینک‌ها و دکمه‌ها برای افزایش تعامل
• 45. استایل‌دهی فرم‌ها برای تجربه کاربری بهتر
• 46. استایل‌دهی لیست‌ها و جداول
• 47. آشنایی با Custom Properties (CSS Variables)
• 48. استفاده از متغیرها برای تم‌بندی و نگهداری آسان‌تر
• 49. پیاده‌سازی Dark Mode با استفاده از CSS Variables
• 50. استایل‌دهی تصاویر SVG و Font Iconها
• 51. کار با گرادیان‌ها: Linear, Radial, Conic
• 52. ایجاد سایه‌های جذاب: Box-shadow, Text-shadow
• 53. ترانسفورم‌های دو بعدی: Translate, Rotate, Scale, Skew
• 54. ترانسفورم‌های سه بعدی: Perspective, RotateX, RotateY, TranslateZ
• 55. مدیریت وضعیت‌های UI با Transitions (انتقال‌های نرم)
• 56. خواص Transition: Property, Duration, Timing-function, Delay
• 57. معرفی Animationها و @keyframes
• 58. خواص Animation: Name, Duration, Iteration-count, Direction, Fill-mode
• 59. ساخت انیمیشن‌های ورود و خروج برای عناصر
• 60. افکت‌های بصری با Filterها: Blur, Brightness, Contrast, Grayscale, Sepia
• 61. افکت‌های Clipping و Masking برای تصاویر و اشکال
• 62. طراحی لایه‌های Overlay و Modal برای تعاملات خاص
• 63. استایل‌دهی اسکرول‌بارها (در صورت نیاز و امکان)
• 64. کاربرد Z-index برای مدیریت لایه‌های عمودی
• 65. استایل‌دهی برای پرینت: @media print
• 66. اصول سازماندهی CSS: ماژولار بودن و خوانایی کد
• 67. روش‌های نام‌گذاری کلاس‌ها (BEM, OOCSS, SMACSS)
• 68. معرفی پیش‌پردازنده‌های CSS (Sass/Less) و مزایای آن‌ها
• 69. استفاده از Mixinها و Functionها در پیش‌پردازنده‌ها
• 70. بهینه‌سازی CSS برای عملکرد بهتر سایت
• 71. کاهش حجم فایل CSS: Minification, Gzip
• 72. Critical CSS: بارگذاری سریع محتوای بالای صفحه
• 73. حذف CSS استفاده نشده (Purging Unused CSS)
• 74. جلوگیری از Reflow و Repaint با کدنویسی بهینه
• 75. مبانی Browser Compatibility و Vendor Prefixes
• 76. استفاده از Autoprefixer برای مدیریت Prefixها
• 77. CSS Reset و Normalize.css: چرا و چگونه؟
• 78. Linting و ابزارهای آن برای رعایت استانداردها
• 79. تست‌پذیری CSS و اهمیت آن در پروژه‌های بزرگ
• 80. مدیریت استایل‌ها در کامپوننت‌های وب
• 81. استایل‌دهی برای حالت‌های Focus و Hover جهت افزایش دسترس‌پذیری
• 82. استفاده از `prefers-color-scheme` برای پشتیبانی از Dark Mode مرورگر
• 83. استفاده از `prefers-reduced-motion` برای انیمیشن‌های دسترس‌پذیر
• 84. پیاده‌سازی افکت‌های Parallax با CSS (یا حداقل JS)
• 85. Sticky Positioning پیشرفته برای عناصر در حال اسکرول
• 86. استایل‌دهی عناصر فرم با Validation (مثلاً :valid, :invalid)
• 87. بهبود تجربه ناوبری با منوهای واکنش‌گرا (Hamburger Menu)
• 88. طراحی Tabها و Accordionها با CSS و HTML معناگرا
• 89. CSS Purity: نوشتن CSS بدون وابستگی به JS (در حد امکان)
• 90. استراتژی‌های استایل‌دهی برای Micro-interactions
• 91. استفاده از `object-fit` و `object-position` برای کنترل تصاویر
• 92. کاربرد `backdrop-filter` برای افکت‌های شیشه مات
• 93. معرفی Container Queries: واکنش‌گرایی بر اساس کانتینر
• 94. معرفی Cascade Layers: مدیریت بهتر اولویت‌ها
• 95. معرفی انتخابگر `has()`: انتخابگر والد و خواص جدید
• 96. ساخت یک Header واکنش‌گرا و قابل دسترس
• 97. ساخت یک Footer با لینک‌های کاربردی
• 98. پیاده‌سازی یک کارت محصول تعاملی برای جذب مشتری
• 99. مانیتورینگ و آنالیز تأثیر CSS بر رفتار کاربر
• 100. جمع‌بندی: آینده CSS و نقش آن در حفظ و جذب مشتری