اپلیکیشن اندرویدی فلش‌کارت آموزشی ایجاد طرح‌بندی‌های واکنش‌گرا و بهینه‌سازی عملکرد با CSS

📚 کتاب آموزشی جامع

📚 اطلاعات کتاب

عنوان کتاب: کتاب ایجاد طرح‌بندی‌های واکنش‌گرا و بهینه‌سازی عملکرد با CSS

موضوع کلی: تسلط بر CSS برای طراحی وب حرفه‌ای

موضوع میانی: تکنیک‌های پیشرفته و راه‌حل‌های استاندارد در CSS

📋 سرفصل‌های کتاب (100 موضوع)

• 1. مبانی CSS و هدف‌گذاری
• 2. ساختار HTML معنی‌دار
• 3. فهماندن اهمیت CSS
• 4. انتخابگرهای CSS پیشرفته
• 5. انتخابگرهای صفات
• 6. انتخابگرهای شبه‌کلاس
• 7. انتخابگرهای شبه‌عنصر
• 8. ارث‌بری و اولویت CSS
• 9. مدیریت cascades
• 10. مقادیر CSS و واحدهای اندازه‌گیری
• 11. واحدهای نسبی و مطلق
• 12. واحد em و rem
• 13. واحد vw و vh
• 14. واحد %
• 15. واحد px
• 16. مدیریت واحدها در طرح‌بندی
• 17. Box Model در CSS
• 18. محتوا، padding، border، margin
• 19. فهمیدن تفاوت‌های Box Model
• 20. Box-sizing: content-box
• 21. Box-sizing: border-box
• 22. اهمیت Box-sizing در واکنش‌گرایی
• 23. طرح‌بندی‌های سنتی با float
• 24. استفاده از float برای چیدمان ستون‌ها
• 25. مشکلات float و راه حل‌ها (clearfix)
• 26. استفاده از inline-block
• 27. مزایا و معایب inline-block
• 28. استفاده از absolute positioning
• 29. مدیریت z-index
• 30. استفاده از relative positioning
• 31. تاثیر positioning بر flow صفحه
• 32. Flexbox: مقدمه‌ای بر چیدمان انعطاف‌پذیر
• 33. مفاهیم اصلی Flexbox (container, items)
• 34. خاصیت display: flex
• 35. خاصیت flex-direction
• 36. خاصیت justify-content
• 37. خاصیت align-items
• 38. خاصیت flex-wrap
• 39. خاصیت align-content
• 40. خاصیت order
• 41. خاصیت flex-grow, flex-shrink, flex-basis
• 42. Flexbox برای طرح‌بندی‌های پیچیده
• 43. Grid CSS: مقدمه‌ای بر چیدمان شبکه‌ای
• 44. مفاهیم اصلی Grid CSS (container, items)
• 45. خاصیت display: grid
• 46. خاصیت grid-template-columns
• 47. خاصیت grid-template-rows
• 48. خاصیت grid-gap (یا gap)
• 49. خاصیت grid-column, grid-row
• 50. خاصیت grid-area
• 51. خاصیت justify-items, align-items
• 52. خاصیت justify-self, align-self
• 53. Grid CSS برای طرح‌بندی‌های دو بعدی
• 54. مقایسه Flexbox و Grid
• 55. انتخاب ابزار مناسب
• 56. طرح‌بندی واکنش‌گرا (Responsive Design)
• 57. مفهوم viewport
• 58. استفاده از meta viewport tag
• 59. Media Queries: فیلترهای CSS
• 60. دستور @media
• 61. دستور @media and
• 62. دستور @media only screen
• 63. دستور @media print
• 64. کوئری‌های مبتنی بر عرض (width)
• 65. کوئری‌های مبتنی بر ارتفاع (height)
• 66. کوئری‌های مبتنی بر جهت (orientation)
• 67. نقاط شکست (Breakpoints) در طراحی واکنش‌گرا
• 68. استراتژی Mobile-First
• 69. استراتژی Desktop-First
• 70. انتخاب نقاط شکست مناسب
• 71. طراحی سلسله مراتبی (Hierarchical Design)
• 72. ساختارهای واکنش‌گرا با Flexbox
• 73. ساختارهای واکنش‌گرا با Grid
• 74. چیدمان‌های ریسپانسیو برای تصاویر
• 75. ریسپانسیو کردن تصاویر با max-width
• 76. استفاده از picture element
• 77. استفاده از srcset و sizes attributes
• 78. طراحی واکنش‌گرا برای فرم‌ها
• 79. طراحی واکنش‌گرا برای جداول
• 80. طراحی واکنش‌گرا برای منوها
• 81. ناوبری واکنش‌گرا
• 82. تکنیک‌های ناوبری مخفی (Off-canvas)
• 83. بهینه‌سازی عملکرد CSS
• 84. کاهش حجم فایل‌های CSS
• 85. فشرده‌سازی CSS (Minification)
• 86. حذف CSS استفاده نشده (PurgeCSS)
• 87. استفاده از CSS Custom Properties (Variables)
• 88. مدیریت متغیرها برای پایداری
• 89. استفاده از SASS/LESS (پیش‌پردازنده‌های CSS)
• 90. مفاهیم پایه SASS/LESS
• 91. متغیرها، توابع، Mixins
• 92. Nested rules
• 93. بهبود خوانایی و نگهداری کد
• 94. مدیریت فونت‌ها در طراحی واکنش‌گرا
• 95. انتخاب فونت‌های وب
• 96. بهینه‌سازی بارگذاری فونت‌ها
• 97. استفاده از icon fonts
• 98. مدیریت انیمیشن‌ها و Transition ها
• 99. انیمیشن‌های CSS (animation)
• 100. Transition های CSS