فلش‌کارت‌های آموزشی CSS for DevOps

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

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

عنوان دوره: دوره CSS for DevOps

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

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

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

• 1. مقدمه‌ای بر CSS برای متخصصان DevOps
• 2. نقش CSS در ابزارهای داخلی و داشبوردها
• 3. آشنایی با ساختار یک Rule در CSS
• 4. روش‌های افزودن CSS به یک صفحه: Inline, Internal, External
• 5. نحوه اتصال فایل CSS خارجی به HTML
• 6. کامنت‌گذاری در CSS
• 7. استفاده از Developer Tools مرورگر برای بازرسی CSS
• 8. مفهوم Cascade (آبشار) در CSS
• 9. مفهوم Inheritance (وراثت)
• 10. آشنایی با سلکتورهای پایه: Element, Class, ID
• 11. سلکتور Universal (*) و کاربردهای آن
• 12. گروه‌بندی سلکتورها
• 13. سلکتورهای ترکیبی: Descendant, Child, Sibling
• 14. سلکتورهای Attribute
• 15. مفهوم Specificity و نحوه محاسبه آن
• 16. استفاده (و سوءاستفاده) از !important
• 17. آشنایی با Pseudo-classes: وضعیت‌های تعاملی (:hover, :focus, :active)
• 18. Pseudo-classes مربوط به فرم‌ها (:checked, :disabled, :required)
• 19. Pseudo-classes ساختاری (:first-child, :last-child, :nth-child)
• 20. آشنایی با Pseudo-elements (::before, ::after)
• 21. کاربرد عملی ::before و ::after برای آیکون‌ها و لیبل‌ها
• 22. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 23. خاصیت box-sizing و اهمیت border-box
• 24. واحدهای اندازه‌گیری مطلق (px, pt)
• 25. واحدهای اندازه‌گیری نسبی (%, em, rem)
• 26. واحدهای اندازه‌گیری Viewport (vw, vh)
• 27. کار با رنگ‌ها: Keywords, HEX, RGB, RGBA
• 28. کار با رنگ‌ها: HSL و HSLA
• 29. خاصیت display: block, inline, inline-block
• 30. خاصیت display: none و تفاوت آن با visibility: hidden
• 31. مبانی Position: static و relative
• 32. مبانی Position: absolute و fixed
• 33. کاربرد عملی Position: sticky
• 34. مفهوم Stacking Context و z-index
• 35. آشنایی با Float و Clearing (برای درک کدهای قدیمی)
• 36. مقدمه‌ای بر Flexbox برای ساخت लेアウトهای یک بعدی
• 37. Flexbox: خصوصیات Container بخش اول (flex-direction, flex-wrap, justify-content)
• 38. Flexbox: خصوصیات Container بخش دوم (align-items, align-content)
• 39. Flexbox: خصوصیات Item (flex-grow, flex-shrink, flex-basis)
• 40. Flexbox: خاصیت order و align-self
• 41. الگوهای رایج با Flexbox: ناوبری، کارت‌ها و ستون‌ها
• 42. مقدمه‌ای بر CSS Grid برای ساخت লেఅவுట్های دو بعدی
• 43. Grid: تعریف ستون‌ها و ردیف‌ها (grid-template-columns/rows)
• 44. Grid: استفاده از واحد fr
• 45. Grid: فاصله بین آیتم‌ها (gap, column-gap, row-gap)
• 46. Grid: جایگذاری آیتم‌ها بر اساس خطوط Grid
• 47. Grid: نام‌گذاری خطوط و نواحی Grid (grid-template-areas)
• 48. الگوهای رایج با Grid: ساختار کلی داشبورد
• 49. مقایسه Flexbox و Grid: چه زمانی از کدام استفاده کنیم؟
• 50. تنظیمات فونت: font-family, font-size, font-weight, font-style
• 51. استایل‌دهی به متن: text-align, text-decoration, text-transform, line-height
• 52. استایل‌دهی به لیست‌ها (ul, ol)
• 53. استایل‌دهی به جداول (table, th, td, tr) برای نمایش داده‌ها
• 54. تکنیک Zebra-Striping در جداول برای خوانایی بهتر
• 55. استایل‌دهی به فرم‌ها: input, textarea, button, select
• 56. سفارشی‌سازی Checkbox و Radio Button
• 57. کار با پس‌زمینه: background-color, background-image
• 58. کنترل پس‌زمینه: background-repeat, background-position, background-size
• 59. استفاده از چندین پس‌زمینه
• 60. کار با Border و Border-radius
• 61. استفاده از Box Shadow و Text Shadow
• 62. مفهوم Responsive Web Design
• 63. استفاده از متا تگ Viewport
• 64. مقدمه‌ای بر Media Queries
• 65. نوشتن Media Query برای Breakpointهای مختلف
• 66. رویکرد Mobile-First در طراحی واکنش‌گرا
• 67. تصاویر واکنش‌گرا با max-width: 100%
• 68. استفاده از واحدهای نسبی برای طراحی واکنش‌گرا
• 69. متغیرهای CSS (Custom Properties) و کاربرد آن در تم‌سازی
• 70. استفاده از تابع calc() برای محاسبات دینامیک
• 71. توابع رنگی: lighten(), darken(), transparentize() (در Sass) و معادل‌های CSS
• 72. مقدمه‌ای بر Transitions برای ایجاد افکت‌های نرم
• 73. کنترل Transitions: property, duration, timing-function, delay
• 74. مقدمه‌ای بر Animations با @keyframes
• 75. کنترل انیمیشن‌ها: animation-name, duration, iteration-count
• 76. Transforms دو بعدی: translate(), rotate(), scale()
• 77. Transforms سه بعدی: perspective و rotate3d()
• 78. استفاده از گرادیان‌های خطی و شعاعی
• 79. فیلترهای CSS: blur(), grayscale(), contrast()
• 80. مفهوم Clipping و Masking
• 81. استفاده از Object-fit برای کنترل تصاویر
• 82. پرس و جوی ویژگی‌ها با @supports
• 83. استایل‌دهی به SVG با CSS
• 84. استایل‌دهی به بلوک‌های کد (pre, code) برای نمایش لاگ‌ها
• 85. ساخت Tooltip با CSS خالص
• 86. طراحی یک Status Indicator (چراغ وضعیت: سبز، زرد، قرمز)
• 87. استایل‌دهی به یک صفحه وضعیت (Status Page)
• 88. ساخت یک Progress Bar برای نمایش پیشرفت فرآیندها
• 89. بصری‌سازی یک پایپ‌لاین CI/CD ساده
• 90. سفارشی‌سازی ظاهر پنل‌های Grafana با CSS
• 91. افزایش خوانایی خروجی لاگ‌ها با رنگ‌بندی
• 92. طراحی چیدمان یک داشبورد ادمین ساده
• 93. استایل‌دهی به نوتیفیکیشن‌ها و Alert ها
• 94. بهبود استایل جداول داده برای نمایش متریک‌ها
• 95. سفارشی‌سازی تم در ابزارهای مستندساز مانند MkDocs
• 96. پیاده‌سازی Dark Mode برای یک ابزار داخلی
• 97. سازماندهی فایل‌های CSS
• 98. متدولوژی نام‌گذاری BEM (Block, Element, Modifier)
• 99. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 100. مفهوم Reset CSS در مقابل Normalize.css