دوره CSS for Learning Management Systems (LMS) همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره CSS for Learning Management Systems (LMS)

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

موضوع میانی: CSS

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. چرا CSS برای سیستم‌های مدیریت یادگیری (LMS) حیاتی است؟
• 3. آشنایی با ساختار یک صفحه LMS: هدر، سایدبار، محتوا
• 4. نحوه افزودن CSS به HTML: Inline, Internal, External
• 5. آشنایی با سینتکس CSS: انتخابگر، خصوصیت، مقدار
• 6. انتخابگرهای پایه‌ای: Element, Class, ID
• 7. انتخابگرهای ترکیبی: Descendant, Child, Sibling
• 8. انتخابگرهای صفت (Attribute Selectors)
• 9. کامنت‌گذاری در CSS و اهمیت آن
• 10. مفهوم Cascade (آبشار) در CSS
• 11. اولویت و امتیازدهی انتخابگرها (Specificity)
• 12. وراثت (Inheritance) و مقدار `inherit`
• 13. مدل جعبه‌ای (Box Model): محتوا، Padding, Border, Margin
• 14. واحد `box-sizing: border-box` و کاربرد آن
• 15. کار با رنگ‌ها: نام، هگز، RGB, HSL
• 16. تنظیم پس‌زمینه: `background-color` و `background-image`
• 17. خصوصیات پیشرفته پس‌زمینه: `repeat`, `position`, `size`
• 18. استایل‌دهی به متون: `color`, `text-align`, `text-decoration`
• 19. کار با فونت‌ها: `font-family`, `font-size`, `font-weight`
• 20. فونت‌های وب (Web Fonts) و نحوه استفاده از `@font-face`
• 21. واحد‌های اندازه‌گیری مطلق: `px`, `pt`
• 22. واحد‌های اندازه‌گیری نسبی: `em`, `rem`, `%`
• 23. واحدهای Viewport: `vw`, `vh`, `vmin`, `vmax`
• 24. خصوصیت `display`: `block`, `inline`, `inline-block`
• 25. موقعیت‌یابی (Positioning): `static`, `relative`, `absolute`
• 26. موقعیت‌یابی `fixed` و `sticky` برای هدر و سایدبار
• 27. مفهوم `z-index` و مدیریت لایه‌ها
• 28. استفاده از `float` و `clear` (برای درک مفاهیم قدیمی)
• 29. مقدمه‌ای بر Flexbox: چرا برای LMS ایده‌آل است؟
• 30. محورهای اصلی و متقاطع در Flexbox
• 31. خصوصیت `flex-direction`
• 32. تراز کردن آیتم‌ها در محور اصلی: `justify-content`
• 33. تراز کردن آیتم‌ها در محور متقاطع: `align-items`
• 34. تراز کردن یک آیتم خاص: `align-self`
• 35. رشد و کوچک شدن آیتم‌ها: `flex-grow`, `flex-shrink`, `flex-basis`
• 36. چینش چند خطی در Flexbox با `flex-wrap`
• 37. تغییر ترتیب نمایش آیتم‌ها با `order`
• 38. مقدمه‌ای بر CSS Grid
• 39. تعریف سطر و ستون با `grid-template-rows/columns`
• 40. ایجاد فاصله بین آیتم‌ها با `gap`
• 41. جایگذاری آیتم‌ها در Grid با شماره خط
• 42. نام‌گذاری نواحی با `grid-template-areas`
• 43. توابع `repeat()`، `minmax()` و `fr` در Grid
• 44. مقایسه Flexbox و Grid: چه زمانی از کدام استفاده کنیم؟
• 45. استایل‌دهی به دکمه‌ها و فراخوان‌ها (Call to Action)
• 46. استایل‌دهی به لینک‌ها و منوهای ناوبری (Navigation)
• 47. ساخت Breadcrumbs برای راهبری در دوره
• 48. استایل‌دهی به فرم‌ها: `input`, `label`, `textarea`
• 49. استایل‌دهی به `select`, `checkbox`, `radio button`
• 50. اعتبارسنجی فرم با استفاده از شبه‌کلاس‌های CSS
• 51. ساخت کارت‌های دوره (Course Cards)
• 52. استایل‌دهی به لیست‌ها برای نمایش سرفصل‌های درس
• 53. استایل‌دهی به جداول برای نمایش نمرات و کاربران
• 54. ساخت مودال (Modal) و پاپ‌آپ برای اعلانات
• 55. طراحی نوارهای پیشرفت (Progress Bars)
• 56. استایل‌دهی به پروفایل کاربر و آواتارها
• 57. ساخت آکاردئون برای نمایش محتوای درسی
• 58. طراحی تب‌ها (Tabs) برای جداسازی محتوا
• 59. استفاده از آیکون‌ها (Font Icons & SVG)
• 60. طراحی سیستم نوتیفیکیشن و هشدار (Alerts)
• 61. شبه‌کلاس‌ها (Pseudo-classes): `:link`, `:visited`, `:hover`, `:active`
• 62. کاربرد `:focus` و `:focus-within` برای فرم‌ها
• 63. شبه‌کلاس‌های ساختاری: `:first-child`, `:last-child`, `:nth-child`
• 64. شبه‌المان‌ها (Pseudo-elements): `::before` و `::after`
• 65. کاربردهای خلاقانه `::before` و `::after` در UI
• 66. ترنزیشن‌ها (Transitions) برای ایجاد انیمیشن‌های نرم
• 67. خصوصیات `transition-property`, `duration`, `timing-function`
• 68. انیمیشن‌های پیچیده‌تر با `@keyframes`
• 69. کنترل انیمیشن‌ها: `animation-name`, `duration`, `iteration-count`
• 70. تبدیلات دو بعدی (2D Transforms): `translate`, `rotate`, `scale`
• 71. تبدیلات سه بعدی (3D Transforms) و `perspective`
• 72. فیلترهای CSS: `blur`, `grayscale`, `brightness`
• 73. ترکیب لایه‌ها با `mix-blend-mode`
• 74. متغیرهای CSS (Custom Properties) برای تم‌سازی (Theming)
• 75. سازماندهی متغیرها برای تم روشن و تاریک (Light/Dark Mode)
• 76. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 77. تنظیم Viewport با تگ متا
• 78. استفاده از Media Queries برای Breakpointها
• 79. رویکرد Mobile-First در طراحی واکنش‌گرا
• 80. ساخت گرید واکنش‌گرا برای داشبورد LMS
• 81. تصاویر واکنش‌گرا با `max-width` و تگ `<picture>`
• 82. استایل‌دهی به ویدئوها و embedهای واکنش‌گرا
• 83. پنهان کردن عناصر در اندازه‌های مختلف صفحه
• 84. معماری CSS و متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 85. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 86. مقدمه‌ای بر پیش‌پردازنده‌ها: Sass/SCSS
• 87. متغیرها و Nesting در Sass
• 88. Mixin‌ها و توابع در Sass
• 89. بهینه‌سازی عملکرد CSS
• 90. کاهش حجم فایل (Minification) و ترکیب فایل‌ها
• 91. مفهوم Critical CSS برای بارگذاری سریع‌تر
• 92. اهمیت دسترسی‌پذیری (Accessibility) در LMS
• 93. تضمین کنتراست رنگ مناسب
• 94. مدیریت Focus کیبورد با `:focus-visible`
• 95. استایل‌دهی بر اساس صفات ARIA
• 96. سازگاری بین مرورگرها و استفاده از Autoprefixer
• 97. تست و دیباگ کردن CSS در مرورگرهای مختلف
• 98. استفاده از ابزارهای توسعه‌دهنده مرورگر (DevTools)
• 99. توابع محاسباتی: `calc()`
• 100. توابع مدرن: `clamp()`, `min()`, `max()` برای تایپوگرافی روان