فلش‌کارت‌های آموزشی Styling Web Components with CSS

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

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

عنوان دوره: دوره Styling Web Components with CSS

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

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

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

• 1. آشنایی با مفاهیم پایه‌ی CSS
• 2. مبانی انتخابگرهای CSS
• 3. انتخابگرهای کلاس و شناسه
• 4. انتخابگرهای ویژگی
• 5. انتخابگرهای سلسله‌مراتبی
• 6. انتخابگرهای شبه‌کلاس
• 7. انتخابگرهای شبه‌عنصر
• 8. نحوه‌ی اعمال استایل‌ها به عناصر HTML
• 9. مدیریت رنگ‌ها و پس‌زمینه‌ها
• 10. تنظیم فونت و متن
• 11. مدیریت ابعاد و حاشیه‌ها
• 12. فضای داخلی عناصر (Padding)
• 13. حاشیه‌های خارجی عناصر (Margin)
• 14. کادربندی عناصر (Borders)
• 15. مدیریت نمایش عناصر (Display Properties)
• 16. موقعیت‌دهی عناصر (Positioning)
• 17. لایه‌بندی با Flexbox
• 18. لایه‌بندی با Grid
• 19. تنظیمات ترتیب عناصر (Z-index)
• 20. انتقال‌ها (Transitions) در CSS
• 21. تبدیل‌ها (Transforms) در CSS
• 22. انیمیشن‌ها (Animations) در CSS
• 23. قابلیت پاسخ‌گویی (Responsive Design)
• 24. استفاده از Media Queries
• 25. تنظیمات دستگاه‌های نمایشی
• 26. طراحی برای موبایل اول (Mobile-First)
• 27. طراحی برای دسکتاپ اول (Desktop-First)
• 28. مدیریت طرح‌بندی‌های پیچیده
• 29. استفاده از واحدهای نسبی (em, rem, %)
• 30. استفاده از واحدهای مطلق (px, pt)
• 31. واحد vw و vh
• 32. مدیریت رزولوشن‌های مختلف
• 33. بهینه‌سازی تصاویر برای وب
• 34. استفاده از SVG در CSS
• 35. تنظیمات پیش‌فرض مرورگرها
• 36. بازنشانی استایل‌ها (CSS Reset)
• 37. چارچوب‌های CSS (مانند Bootstrap - با رویکرد ایرانی)
• 38. استفاده از CSS Variables (Custom Properties)
• 39. مفاهیم پیشرفته‌ی انتخابگرها
• 40. ترکیب انتخابگرها
• 41. استفاده از `!important` (با احتیاط)
• 42. اولویت‌بندی قوانین CSS (Specificity)
• 43. مدیریت ارث‌بری (Inheritance)
• 44. انواع مقادیر CSS
• 45. واحد `calc()` در CSS
• 46. استفاده از توابع CSS
• 47. تنظیمات سایه (Box Shadow)
• 48. تنظیمات متن (Text Shadow)
• 49. مدیریت overflow عناصر
• 50. تنظیمات cursor
• 51. استفاده از Pseudo-elements پیشرفته
• 52. تنظیمات `::before` و `::after`
• 53. استفاده از `content` property
• 54. تنظیمات `clip-path`
• 55. استفاده از `filter` property
• 56. تنظیمات `opacity`
• 57. مدیریت `background-attachment`
• 58. تنظیمات `background-origin` و `background-clip`
• 59. مدیریت `background-size`
• 60. استفاده از `text-overflow`
• 61. تنظیمات `word-wrap` و `word-break`
• 62. مدیریت `list-style`
• 63. تنظیمات `table-layout`
• 64. تنظیمات `caption-side`
• 65. مدیریت `empty-cells`
• 66. استفاده از `column-count` و `column-gap`
• 67. تنظیمات `column-rule`
• 68. استفاده از `column-span`
• 69. مدیریت `flex-wrap`
• 70. تنظیمات `align-content`
• 71. استفاده از `justify-content`
• 72. مدیریت `align-items`
• 73. تنظیمات `align-self`
• 74. استفاده از `order` property
• 75. مدیریت `grid-template-columns`
• 76. تنظیمات `grid-template-rows`
• 77. استفاده از `grid-template-areas`
• 78. مدیریت `grid-gap`
• 79. تنظیمات `grid-column` و `grid-row`
• 80. استفاده از `grid-area`
• 81. تنظیمات `justify-items`
• 82. مدیریت `justify-self`
• 83. استفاده از `align-tracks`
• 84. تنظیمات `gap` property
• 85. مدیریت `row-gap` و `column-gap`
• 86. استفاده از `place-items`
• 87. تنظیمات `place-content`
• 88. مدیریت `place-self`
• 89. استفاده از `animation-name`
• 90. تنظیمات `animation-duration`
• 91. استفاده از `animation-timing-function`
• 92. مدیریت `animation-delay`
• 93. تنظیمات `animation-iteration-count`
• 94. استفاده از `animation-direction`
• 95. مدیریت `animation-fill-mode`
• 96. تنظیمات `animation-play-state`
• 97. استفاده از `animation-name` در `@keyframes`
• 98. مدیریت `transition-property`
• 99. تنظیمات `transition-duration`
• 100. استفاده از `transition-timing-function`