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

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

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

عنوان دوره: دوره جایگاه‌یابی پیشرفته عناصر با CSS: راهنمای عملی برای طراحان وب

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

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

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

• 1. مقدمه‌ای بر جایگاه‌یابی عناصر در CSS
• 2. مفهوم شناوری (Float) و مشکلات آن
• 3. تکنیک‌های موقعیت‌دهی (Positioning) در CSS: Static, Relative, Absolute
• 4. کاربرد Position: Fixed برای عناصر ثابت
• 5. درک Position: Sticky و کاربردهای آن
• 6. پیمایش (Scroll) و تأثیر آن بر موقعیت‌دهی
• 7. مقدمه‌ای بر Grid Layout برای چیدمان پیچیده
• 8. اصول اولیه Grid: Container و Items
• 9. تعریف Row و Column در Grid
• 10. استفاده از Grid Template Areas
• 11. Grid Gaps و فاصله‌گذاری بین عناصر
• 12. هم‌ترازی (Alignment) در Grid: Justify و Align
• 13. کاربرد Grid برای چیدمان هدر و فوتر
• 14. طراحی صفحات واکنش‌گرا با Grid
• 15. مقدمه‌ای بر Flexbox برای چیدمان یک‌بعدی
• 16. اصول Flex Container و Flex Items
• 17. خاصیت Flex Direction و جهت‌دهی
• 18. Flex Wrap برای شکستن خطوط
• 19. Justify Content و Align Items در Flexbox
• 20. نحوه استفاده از Flexbox برای منوها
• 21. طراحی فرم‌ها با Flexbox
• 22. چیدمان کارت‌ها با Flexbox
• 23. مقدمه‌ای بر CSS Variables (Custom Properties)
• 24. نحوه تعریف و استفاده از CSS Variables
• 25. تغییر پویا با CSS Variables
• 26. کاربرد CSS Variables در تم‌بندی
• 27. مقدمه‌ای بر CSS Transitions
• 28. تنظیمات اولیه Transitions: Property, Duration, Timing Function
• 29. انتقال در حالت‌های Hover و Active
• 30. کاربرد Transitions برای افکت‌های بصری
• 31. مقدمه‌ای بر CSS Animations
• 32. تعریف Keyframes برای انیمیشن
• 33. خاصیت Animation-name و Duration
• 34. Animation-timing-function و Iteration-count
• 35. Animation-direction و Fill-mode
• 36. ساخت انیمیشن‌های ساده با CSS
• 37. افکت‌های انیمیشنی برای دکمه‌ها و عناصر تعاملی
• 38. مقدمه‌ای بر Responsive Design
• 39. Viewport Meta Tag و مقیاس‌بندی
• 40. Media Queries برای تطبیق با دستگاه‌ها
• 41. استفاده از Max-width و Min-width
• 42. طراحی Mobile-First
• 43. طراحی Desktop-First
• 44. استفاده از واحدهای نسبی (%, em, rem, vw, vh)
• 45. تکنیک‌های چیدمان انعطاف‌پذیر
• 46. مقدمه‌ای بر Anchor Positioning
• 47. مفهوم Anchor و Linked Element
• 48. تعریف Anchor Point
• 49. استفاده از anchor-name
• 50. نحوه قرار دادن Linked Element نسبت به Anchor
• 51. خاصیت anchor-scroll
• 52. کاربرد Anchor Positioning در ناوبری
• 53. مقایسه Anchor Positioning با Position: Absolute
• 54. مزایا و محدودیت‌های Anchor Positioning
• 55. مثال‌های کاربردی Anchor Positioning
• 56. استفاده از Anchor Positioning برای Tooltips
• 57. ایجاد منوهای شناور با Anchor Positioning
• 58. پیاده‌سازی جداول با قابلیت اسکرول و Anchor
• 59. بهبود تجربه کاربری با Anchor Positioning
• 60. ملاحظات عملکردی Anchor Positioning
• 61. بهینه‌سازی Anchor Positioning برای سئو
• 62. سازگاری مرورگرها با Anchor Positioning
• 63. تکنیک‌های پیشرفته Selectors در CSS
• 64. Pseudo-classes پیشرفته (nth-child, etc.)
• 65. Pseudo-elements پیشرفته (::before, ::after)
• 66. CSS Specificity و اولویت‌بندی قوانین
• 67. Cascading و نحوه اعمال قوانین
• 68. واحدها و اندازه‌گیری در CSS (px, em, rem, vw, vh)
• 69. Flexbox vs Grid: انتخاب مناسب
• 70. استفاده ترکیبی از Grid و Flexbox
• 71. CSS Logical Properties
• 72. کاربرد Logical Properties برای زبان‌های راست به چپ
• 73. مقدمه‌ای بر Container Queries
• 74. تفاوت Container Queries با Media Queries
• 75. تعریف Container
• 76. استفاده از size و inline-size در Container Queries
• 77. کاربرد Container Queries برای کامپوننت‌های مستقل
• 78. طراحی سیستم‌های طراحی با Container Queries
• 79. تکنیک‌های پیشرفته انیمیشن CSS
• 80. انیمیشن‌های پیچیده با JavaScript و CSS
• 81. استفاده از Scroll-driven Animations
• 82. مقدمه‌ای بر Houdini APIs
• 83. CSS Properties & Values API
• 84. CSS Paint API
• 85. CSS Layout API
• 86. نحوه ادغام Houdini با CSS معمولی
• 87. آینده CSS و تکنیک‌های نوین
• 88. جمع‌بندی و بهترین شیوه‌ها در CSS پیشرفته