فلش‌کارت‌های آموزشی تکنیک‌های چیدمان پیشرفته در CSS با تمرکز بر موقعیت‌دهی عناصر

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

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

عنوان دوره: دوره تکنیک‌های چیدمان پیشرفته در CSS با تمرکز بر موقعیت‌دهی عناصر

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

موضوع میانی: طراحی رابط کاربری وب (UI)

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

• 1. مبانی چیدمان در طراحی وب
• 2. آشنایی با مدل جعبه‌ای CSS
• 3. مفهوم Box Model و ویژگی‌های آن
• 4. ابعاددهی عناصر با Box Model
• 5. حاشیه (Margin) و فاصله داخلی (Padding)
• 6. ویژگی Border در CSS
• 7. شناخت انواع Border Style
• 8. استفاده از Border Color و Border Width
• 9. تنظیمات پیشرفته Border
• 10. مفهوم Display و انواع آن
• 11. عناصر Inline و Block
• 12. تبدیل عناصر Inline به Block و بالعکس
• 13. ویژگی Float و کاربردهای آن
• 14. پاکسازی (Clearfix) پس از استفاده از Float
• 15. مفهوم Position در CSS
• 16. مقادیر مختلف ویژگی Position
• 17. Static و Relative Positioning
• 18. Absolute Positioning و موقعیت‌دهی نسبت به نزدیکترین والد Positioned
• 19. Fixed Positioning و موقعیت‌دهی نسبت به Viewport
• 20. Sticky Positioning و ترکیب Relative و Fixed
• 21. ویژگی Top, Bottom, Left, Right
• 22. استفاده از Z-index برای مدیریت لایه‌ها
• 23. مفهوم Stacking Context
• 24. تاثیر Z-index بر روی عناصر
• 25. تنظیمات پیشرفته Z-index
• 26. مفهوم Flexbox برای چیدمان
• 27. اصول اولیه Flexbox
• 28. ویژگی display: flex
• 29. خاصیت flex-direction و جهت‌دهی عناصر
• 30. خاصیت justify-content برای توزیع فضا
• 31. خاصیت align-items برای تراز عمودی
• 32. خاصیت flex-wrap برای کنترل سطرها
• 33. خاصیت align-content برای تراز سطرها
• 34. خاصیت order برای تغییر ترتیب عناصر
• 35. خاصیت flex-grow, flex-shrink, flex-basis
• 36. تنظیمات پیشرفته Flexbox
• 37. مفهوم Grid Layout برای چیدمان دو بعدی
• 38. اصول اولیه Grid Layout
• 39. ویژگی display: grid
• 40. خاصیت grid-template-columns
• 41. خاصیت grid-template-rows
• 42. خاصیت grid-template-areas
• 43. خاصیت justify-items و align-items در Grid
• 44. خاصیت justify-content و align-content در Grid
• 45. خاصیت grid-column و grid-row
• 46. خاصیت grid-area
• 47. واحد Fr در Grid Layout
• 48. تنظیمات پیشرفته Grid Layout
• 49. ایجاد Layout های واکنش‌گرا با Media Queries
• 50. اصول طراحی واکنش‌گرا
• 51. استفاده از Viewport Meta Tag
• 52. نوشتن Media Queries بر اساس عرض صفحه
• 53. استفاده از Breakpoints رایج
• 54. طراحی Mobile-First
• 55. طراحی Desktop-First
• 56. ترکیب Media Queries با Flexbox و Grid
• 57. مدیریت چیدمان برای دستگاه‌های مختلف
• 58. تکنیک‌های بهینه‌سازی چیدمان برای سرعت
• 59. استفاده از CSS Variables برای مدیریت مقادیر
• 60. مفهوم Utility Classes
• 61. اصول BEM (Block, Element, Modifier) در نام‌گذاری کلاس‌ها
• 62. استفاده از Preprocessors مانند Sass/Less (اشاره کلی)
• 63. اصول دسترسی‌پذیری (Accessibility) در چیدمان
• 64. تاثیر چیدمان بر تجربه کاربری (UX)
• 65. تست چیدمان در مرورگرهای مختلف
• 66. رفع اشکالات رایج چیدمان (Debugging)
• 67. کار با ابزارهای توسعه‌دهنده مرورگر
• 68. بررسی و تحلیل چیدمان صفحات وب موجود
• 69. طراحی فرم‌ها با CSS
• 70. چیدمان جداول با CSS
• 71. استفاده از Pseudo-elements برای تزئینات
• 72. مفهوم Overflow و مدیریت محتوای اضافی
• 73. تنظیمات پیشرفته Overflow
• 74. تکنیک‌های ایجاد Layout های پیچیده
• 75. مدیریت چیدمان در کامپوننت‌های React/Vue (اشاره کلی)
• 76. اصول طراحی رابط کاربری (UI Design)
• 77. رنگ‌شناسی در طراحی وب
• 78. تایپوگرافی در طراحی وب
• 79. فضای سفید (Whitespace) در طراحی
• 80. اصول سلسله مراتب بصری
• 81. استفاده از آیکون‌ها در طراحی
• 82. مفهوم انیمیشن و Transition در CSS
• 83. کاربرد Transition در بهبود تجربه کاربری
• 84. مفهوم انیمیشن CSS (Keyframes)
• 85. ایجاد انیمیشن‌های ساده با CSS
• 86. تنظیمات پیشرفته انیمیشن
• 87. ملاحظات امنیتی در توسعه وب (اشاره کلی)
• 88. بهینه‌سازی تصاویر برای وب
• 89. اصول طراحی UI Kit
• 90. مستندسازی چیدمان و استایل‌ها
• 91. بازبینی و بازخورد در فرآیند طراحی
• 92. کاربرد CSS Frameworks (اشاره کلی)
• 93. تکنیک‌های پیشرفته موقعیت‌دهی
• 94. موقعیت‌دهی عناصر در حالت Scroll
• 95. ایجاد افکت‌های پارالاکس ساده
• 96. چیدمان با استفاده از CSS Columns
• 97. اصول طراحی برای موبایل (Mobile Design Principles)
• 98. اصول طراحی برای تبلت (Tablet Design Principles)
• 99. طراحی برای دسکتاپ (Desktop Design Principles)
• 100. مفهوم Atomic Design و CSS