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

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

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

عنوان دوره: دوره CSS for Cloud Engineering

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

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

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

• 1. مقدمه ای بر CSS و نقش آن در Cloud Engineering
• 2. نحوه عملکرد CSS: قواعد، انتخابگرها، و ویژگی ها
• 3. سینتکس CSS: قواعد نوشتاری، نظرات، و مقادیر
• 4. انتخابگرهای CSS: مقدمه و انواع (عناصر، کلاس ها، ID ها)
• 5. انتخابگرهای پیشرفته CSS: خصلت ها (Attributes) و شبه کلاس ها (Pseudo-classes)
• 6. انتخابگرهای ترکیبی CSS: فرزند، نواده، مجاور و عمومی
• 7. اولویت بندی CSS: اهمیت (Specificity) و ارث بری (Inheritance)
• 8. Box Model CSS: درک حاشیه ها (Margins)، بوردرها (Borders)، padding و محتوا (Content)
• 9. تنظیم ابعاد عناصر: width، height، min-width، max-width
• 10. واحد های اندازه گیری در CSS: px، em، rem، vh، vw، %
• 11. رنگ ها در CSS: نام رنگ ها، مقادیر Hex، RGB، RGBA، HSL، HSLA
• 12. پس زمینه ها در CSS: رنگ پس زمینه، تصویر پس زمینه، تکرار، موقعیت و اندازه
• 13. فونت ها در CSS: family، size، weight، style، variant، stretch
• 14. متن در CSS: color، align، decoration، transform، spacing، shadow
• 15. لینک ها در CSS: استایل دهی لینک ها، شبه کلاس های hover، visited، active
• 16. لیست ها در CSS: استایل دهی لیست ها، نشانگرها، موقعیت نشانگرها
• 17. جداول در CSS: استایل دهی جداول، بوردرها، spacing، alignment
• 18. Overflow در CSS: مدیریت محتوای اضافی (hidden، scroll، auto)
• 19. Visibility و Display در CSS: پنهان کردن و نمایش عناصر
• 20. Position در CSS: static، relative، absolute، fixed، sticky
• 21. Z-index در CSS: کنترل لایه بندی عناصر
• 22. Float در CSS: ایجاد طرح بندی های ستونی
• 23. Clear در CSS: رفع مشکلات Float
• 24. Flexbox: مقدمه و مفاهیم کلیدی
• 25. Flex Container Properties: flex-direction، flex-wrap، justify-content، align-items، align-content
• 26. Flex Item Properties: flex-grow، flex-shrink، flex-basis، align-self، order
• 27. Grid Layout: مقدمه و مفاهیم کلیدی
• 28. Grid Container Properties: grid-template-rows، grid-template-columns، grid-template-areas، grid-gap
• 29. Grid Item Properties: grid-row-start، grid-row-end، grid-column-start، grid-column-end، grid-area
• 30. رسانه ها (Media Queries): طراحی واکنشگرا برای دستگاه های مختلف
• 31. Viewport Meta Tag: تنظیم مقیاس بندی صفحه برای دستگاه های موبایل
• 32. طراحی واکنشگرا با Flexbox
• 33. طراحی واکنشگرا با Grid Layout
• 34. CSS Frameworks: مقدمه و بررسی Bootstrap
• 35. نصب و راه اندازی Bootstrap
• 36. اجزای Bootstrap: دکمه ها، فرم ها، navigation bar و غیره
• 37. سیستم Grid Bootstrap
• 38. CSS Frameworks: بررسی Tailwind CSS
• 39. نصب و راه اندازی Tailwind CSS
• 40. کلاس های Utility در Tailwind CSS
• 41. سفارشی سازی Tailwind CSS
• 42. Sass (SCSS): مقدمه و متغیرها
• 43. Sass (SCSS): Mixins
• 44. Sass (SCSS): توابع (Functions)
• 45. Sass (SCSS): وراثت (Extend)
• 46. Sass (SCSS): پارتشال ها (Partials) و ماژول ها (Modules)
• 47. Sass (SCSS): حلقه ها (Loops) و شرطی ها (Conditionals)
• 48. PostCSS: مقدمه و کاربردها
• 49. Autoprefixer: پشتیبانی از مرورگرهای مختلف
• 50. Minification: کاهش حجم فایل های CSS
• 51. CSS Modules: Scope بندی کلاس های CSS
• 52. CSS in JS: رویکرد جدید در استایل دهی
• 53. Styled Components: استفاده از CSS در React
• 54. Emotion: رویکرد CSS-in-JS دیگر
• 55. Aphrodite: رویکرد CSS-in-JS با Performance بالا
• 56. Accessibility (دسترسی پذیری) در CSS: اصول و راهکارها
• 57. Semantic HTML: اهمیت استفاده از تگ های معنایی HTML
• 58. ARIA Attributes: افزودن اطلاعات برای screen readers
• 59. Contrast Ratio: اطمینان از خوانایی متن
• 60. Keyboard Navigation: اطمینان از قابلیت استفاده با صفحه کلید
• 61. Performance Optimization: کاهش حجم فایل های CSS
• 62. Code Splitting: تقسیم فایل های CSS به بخش های کوچکتر
• 63. Lazy Loading: بارگذاری تصاویر و منابع دیگر در صورت نیاز
• 64. Caching: استفاده از Cache مرورگر برای بهبود سرعت
• 65. CSS Animations: ایجاد انیمیشن های ساده با CSS
• 66. CSS Transitions: ایجاد تغییرات تدریجی در ویژگی های CSS
• 67. Keyframes: تعریف sequence انیمیشن ها
• 68. 3D Transforms: ایجاد جلوه های سه بعدی با CSS
• 69. CSS Filters: اعمال فیلترهای تصویری بر روی عناصر
• 70. Blend Modes: ترکیب رنگ ها و تصاویر
• 71. Clip-path: ایجاد شکل های سفارشی با برش دادن عناصر
• 72. Variables (Custom Properties): تعریف متغیرها در CSS
• 73. Calc(): انجام محاسبات در CSS
• 74. Conic Gradients: ایجاد گرادیان های دایره ای
• 75. Shape Outside: ایجاد طرح بندی های پیچیده با شکل ها
• 76. CSS Grid Areas: نامگذاری مناطق Grid برای طرح بندی های پیچیده
• 77. Object-fit و Object-position: کنترل نمایش تصاویر در عناصر
• 78. Writing Modes: تغییر جهت نوشتار (direction)
• 79. منطق شرطی در CSS: بررسی ویژگی @supports
• 80. کار با فونت های متغیر (Variable Fonts)
• 81. SVG در CSS: استفاده از SVG به عنوان تصویر پس زمینه، mask و clip-path
• 82. Data URIs: قرار دادن تصاویر در کد CSS
• 83. CSS Reset و Normalize.css: یکسان سازی استایل ها در مرورگرهای مختلف
• 84. Browser Compatibility: بررسی و رفع مشکلات سازگاری در مرورگرهای مختلف
• 85. Debugging CSS: استفاده از Developer Tools مرورگر
• 86. Linters: استفاده از Stylelint برای بررسی قواعد CSS
• 87. Code Review: بررسی کد CSS توسط دیگران
• 88. Version Control: استفاده از Git برای مدیریت کد CSS
• 89. Deployment: استقرار فایل های CSS در Cloud
• 90. CDN (Content Delivery Network): استفاده از CDN برای توزیع فایل های CSS
• 91. Static Site Generators (SSG): استفاده از CSS در SSG ها (مانند Jekyll, Hugo)
• 92. Headless CMS: استفاده از CSS در Headless CMS ها
• 93. Docker: بسته بندی CSS با Docker برای Cloud Engineering
• 94. CI/CD: ادغام CSS در فرایند CI/CD
• 95. CSS Architecture: رویکردهای مختلف برای سازماندهی CSS (BEM, SMACSS, OOCSS)
• 96. Design Systems: ایجاد Design System با استفاده از CSS
• 97. Theming: ایجاد تم های مختلف با استفاده از CSS
• 98. Performance Monitoring: مانیتورینگ performance CSS در محیط Cloud
• 99. Scalable CSS: نوشتن CSS مقیاس پذیر و قابل نگهداری
• 100. آینده CSS: بررسی ویژگی های جدید و در حال توسعه