فلش‌کارت‌های آموزشی آموزش جامع چیدمان صفحات وب با CSS (CSS Layout)

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

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

عنوان دوره: دوره آموزش جامع چیدمان صفحات وب با CSS (CSS Layout)

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

موضوع میانی: طراحی و پیاده‌سازی واسط کاربری وب (Front-end)

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

• 1. مبانی چیدمان صفحات وب
• 2. مقدمه‌ای بر CSS Layout
• 3. ساختار سند HTML برای چیدمان
• 4. انتخابگرهای CSS و اولویت‌بندی
• 5. واحدها در CSS (px, em, rem, %)
• 6. مدل جعبه‌ای (Box Model)
• 7. حاشیه‌ها (Margins) و فاصله‌ها (Padding)
• 8. کادرهای مرزی (Borders)
• 9. خاصیت `display` و مقادیر آن
• 10. `display: block` و `inline`
• 11. `display: inline-block`
• 12. `display: none` و `visibility: hidden`
• 13. موقعیت‌دهی عناصر (Positioning)
• 14. `position: static`
• 15. `position: relative`
• 16. `position: absolute`
• 17. `position: fixed`
• 18. `position: sticky`
• 19. خاصیت `top`, `bottom`, `left`, `right`
• 20. خاصیت `z-index`
• 21. شناوری عناصر (Floats)
• 22. `float: left` و `float: right`
• 23. پاک کردن شناوری (Clearing Floats)
• 24. `clear: both`
• 25. `overflow` و کنترل آن
• 26. `overflow: visible`, `hidden`, `scroll`, `auto`
• 27. فلسفه Flexbox
• 28. مقدمه‌ای بر Flexbox
• 29. کانتینر Flex (Flex Container)
• 30. `display: flex`
• 31. `flex-direction`
• 32. `justify-content`
• 33. `align-items`
• 34. `flex-wrap`
• 35. آیتم‌های Flex (Flex Items)
• 36. `flex-grow`
• 37. `flex-shrink`
• 38. `flex-basis`
• 39. `flex` (shorthand)
• 40. `align-self`
• 41. مرتب‌سازی آیتم‌های Flex
• 42. کاربرد Flexbox در چیدمان
• 43. طراحی هدر با Flexbox
• 44. طراحی فوتر با Flexbox
• 45. چیدمان ستون‌ها با Flexbox
• 46. طراحی فرم‌ها با Flexbox
• 47. ملاحظات دسترسی‌پذیری در Flexbox
• 48. فلسفه Grid Layout
• 49. مقدمه‌ای بر Grid Layout
• 50. کانتینر Grid (Grid Container)
• 51. `display: grid`
• 52. `grid-template-columns`
• 53. `grid-template-rows`
• 54. `grid-template-areas`
• 55. `grid-gap`, `row-gap`, `column-gap`
• 56. آیتم‌های Grid (Grid Items)
• 57. `grid-column-start`, `grid-column-end`
• 58. `grid-row-start`, `grid-row-end`
• 59. `grid-column` (shorthand)
• 60. `grid-row` (shorthand)
• 61. `grid-area`
• 62. تراز کردن آیتم‌ها در Grid
• 63. `justify-items`
• 64. `align-items`
• 65. `justify-self`
• 66. `align-self`
• 67. کاربرد Grid Layout در چیدمان
• 68. طراحی ساختار کلی صفحه با Grid
• 69. چیدمان سایدبار و محتوا با Grid
• 70. چیدمان شبکه‌ای (Gallery) با Grid
• 71. طراحی پنل‌های کاربری با Grid
• 72. ملاحظات دسترسی‌پذیری در Grid
• 73. چیدمان واکنش‌گرا (Responsive Layout)
• 74. مفهوم طراحی واکنش‌گرا
• 75. مدیا کوئری‌ها (Media Queries)
• 76. `@media` rule
• 77. کلمات کلیدی `screen`, `print`
• 78. دستورات `min-width`, `max-width`
• 79. دستورات `orientation`
• 80. استفاده از واحدهای نسبی برای واکنش‌گرایی
• 81. تغییر چیدمان با مدیا کوئری‌ها
• 82. طراحی برای دستگاه‌های مختلف
• 83. تست چیدمان واکنش‌گرا
• 84. بهینه‌سازی تصاویر برای وب
• 85. مقدمه‌ای بر انیمیشن در CSS
• 86. مفهوم انیمیشن
• 87. `@keyframes` rule
• 88. `animation-name`
• 89. `animation-duration`
• 90. `animation-timing-function`
• 91. `animation-delay`
• 92. `animation-iteration-count`
• 93. `animation-direction`
• 94. `animation-fill-mode`
• 95. `animation` (shorthand)
• 96. انتقال‌ها (Transitions)
• 97. `transition-property`
• 98. `transition-duration`
• 99. `transition-timing-function`
• 100. `transition-delay`