فلش‌کارت‌های آموزشی اصول مدل جعبه‌ای CSS برای ساختاردهی صفحات وب

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

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

عنوان دوره: دوره اصول مدل جعبه‌ای CSS برای ساختاردهی صفحات وب

موضوع کلی: علوم کامپیوتر و فناوری اطلاعات

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

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

• 1. مقدمه‌ای بر مدل جعبه‌ای CSS
• 2. عناصر HTML و نمایش آن‌ها
• 3. مفهوم جعبه در CSS
• 4. محتوا، پدینگ، بوردر و مارجین
• 5. اندازه‌گیری در مدل جعبه‌ای
• 6. واحدها در CSS (پیکسل، em، rem، %)
• 7. تنظیم اندازه محتوا
• 8. تنظیم پدینگ
• 9. تنظیم بوردر (ضخامت، سبک، رنگ)
• 10. انواع سبک‌های بوردر
• 11. تنظیم مارجین
• 12. رفتار مارجین در عناصر inline و block
• 13. مرتب‌سازی مارجین‌ها
• 14. جعبه‌های مدل box-sizing
• 15. مقایسه `content-box` و `border-box`
• 16. اهمیت `border-box` در طراحی ریسپانسیو
• 17. تنظیم `box-sizing` برای عناصر
• 18. مدیریت ابعاد جعبه با `min-width`, `max-width`, `min-height`, `max-height`
• 19. خاصیت `overflow` و مدیریت محتوای خارج از جعبه
• 20. مقادیر `overflow` (visible, hidden, scroll, auto)
• 21. `text-overflow` و نمایش نقاط سه‌گانه برای متن بریده شده
• 22. `word-wrap` و `word-break` برای شکستن کلمات
• 23. مدل جعبه‌ای برای تصاویر و رسانه‌ها
• 24. تنظیم `display` property
• 25. مقادیر `display` (block, inline, inline-block, none, flex, grid)
• 26. مدل جعبه‌ای با `display: flex`
• 27. مقدمه‌ای بر Flexbox
• 28. خاصیت `flex-direction`
• 29. خاصیت `justify-content`
• 30. خاصیت `align-items`
• 31. خاصیت `flex-wrap`
• 32. خاصیت `align-content`
• 33. مدل جعبه‌ای با `display: grid`
• 34. مقدمه‌ای بر Grid Layout
• 35. خاصیت `grid-template-columns`
• 36. خاصیت `grid-template-rows`
• 37. خاصیت `grid-gap` (یا `grid-column-gap` و `grid-row-gap`)
• 38. خاصیت `justify-items`
• 39. خاصیت `align-items` در Grid
• 40. خاصیت `justify-self`
• 41. خاصیت `align-self`
• 42. موقعیت‌دهی در Grid با `grid-column` و `grid-row`
• 43. ایجاد طرح‌بندی‌های پیچیده با Grid
• 44. مدل جعبه‌ای و عناصر شناور (float)
• 45. خاصیت `float`
• 46. خاصیت `clear`
• 47. تأثیر `float` بر مدل جعبه‌ای عناصر مجاور
• 48. پاکسازی شناوری (clearfix)
• 49. مدل جعبه‌ای و موقعیت‌دهی (positioning)
• 50. مقادیر `position` (static, relative, absolute, fixed, sticky)
• 51. تنظیم `top`, `bottom`, `left`, `right`
• 52. `z-index` و لایه‌بندی عناصر
• 53. استفاده از `position: relative` برای تنظیم آفست
• 54. استفاده از `position: absolute` برای موقعیت‌دهی نسبت به نزدیکترین والد موقعیت‌دار
• 55. استفاده از `position: fixed` برای عناصر ثابت در صفحه
• 56. استفاده از `position: sticky` برای عناصر نیمه ثابت
• 57. مدل جعبه‌ای و واحدهای نسبی
• 58. واحد `em` و ارتباط آن با فونت والد
• 59. واحد `rem` و ارتباط آن با فونت ریشه
• 60. واحد `%` و ارتباط آن با اندازه والد
• 61. مدل جعبه‌ای و طراحی ریسپانسیو
• 62. مفهوم Media Queries
• 63. استفاده از Media Queries برای تنظیم مدل جعبه‌ای
• 64. طراحیMOBILE-FIRST
• 65. طراحی DESKTOP-FIRST
• 66. تنظیمات مدل جعبه‌ای برای دستگاه‌های مختلف
• 67. بهینه‌سازی مدل جعبه‌ای برای عملکرد
• 68. اندازه‌گیری و بهینه‌سازی اندازه تصاویر
• 69. کاهش حجم فایل‌های CSS
• 70. استفاده از ابزارهای توسعه‌دهنده مرورگر
• 71. اشکال‌زدایی مدل جعبه‌ای با ابزارهای توسعه‌دهنده
• 72. بررسی تداخلات CSS
• 73. استانداردهای دسترسی‌پذیری و مدل جعبه‌ای
• 74. سازگاری با صفحه‌خوان‌ها
• 75. قابلیت استفاده با کیبورد
• 76. مدل جعبه‌ای و انیمیشن‌ها
• 77. انتقال ویژگی‌های جعبه‌ای با CSS Transitions
• 78. انیمیشن‌های پیچیده‌تر با CSS Animations
• 79. مدل جعبه‌ای و جلوه‌های بصری
• 80. سایه‌ها (box-shadow)
• 81. گوشه‌های گرد (border-radius)
• 82. پس‌زمینه‌های گرادیان (background-image)
• 83. مدل جعبه‌ای و کتابخانه‌های CSS
• 84. مقدمه‌ای بر Bootstrap
• 85. استفاده از سیستم گرید Bootstrap
• 86. مقدمه‌ای بر Tailwind CSS
• 87. کلاس‌های Utility در Tailwind CSS
• 88. تأثیر کتابخانه‌ها بر مدل جعبه‌ای
• 89. مدل جعبه‌ای در کاربردهای پیشرفته
• 90. ترکیب Flexbox و Grid
• 91. ساخت فرم‌های پیچیده با مدل جعبه‌ای
• 92. طراحی منوهای ناوبری پیشرفته
• 93. ساخت گالری تصاویر واکنش‌گرا
• 94. مدل جعبه‌ای و آینده CSS
• 95. CSS Variables
• 96. Custom Properties
• 97. CSS Houdini
• 98. مفاهیم پیشرفته مدل جعبه‌ای
• 99. تکنیک‌های نوین در مدل جعبه‌ای
• 100. بهترین شیوه‌ها در استفاده از مدل جعبه‌ای