فلش‌کارت‌های آموزشی Building Interactive Elements with CSS

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

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

عنوان دوره: دوره Building Interactive Elements with CSS

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در تعامل
• 2. مبانی CSS: انتخابگرها، ویژگی‌ها و مقادیر
• 3. انتخابگرهای نوع (Type Selectors)
• 4. انتخابگرهای کلاس (Class Selectors)
• 5. انتخابگرهای شناسه (ID Selectors)
• 6. ترکیب انتخابگرها (Combinators): فرزند، نوه، مجاور و عمومی
• 7. وراثت (Inheritance) و مفهوم آن در CSS
• 8. مفهوم Specificity و اولویت CSS
• 9. مدل جعبه‌ای (Box Model): Margin، Border، Padding و Content
• 10. اندازه‌گیری‌ها در CSS: پیکسل، درصد، em، rem، viewport units
• 11. رنگ‌ها در CSS: نام رنگ‌ها، هگزادسیمال، RGB، RGBA، HSL، HSLA
• 12. فونت‌ها در CSS: تغییر نوع فونت، اندازه، وزن و استایل
• 13. متن در CSS: ترازبندی، فاصله بین خطوط، سایه‌ها و تزئینات
• 14. پس‌زمینه در CSS: رنگ، تصویر، تکرار و موقعیت
• 15. موقعیت‌دهی (Positioning): Static، Relative، Absolute و Fixed
• 16. Z-index و مدیریت لایه‌ها
• 17. Display Property: Block، Inline، Inline-block، None
• 18. Float Property و Clearfix
• 19. Flexbox: مبانی و مفاهیم اولیه
• 20. Flex Container Properties: flex-direction، flex-wrap، justify-content، align-items، align-content
• 21. Flex Item Properties: flex-grow، flex-shrink، flex-basis، align-self، order
• 22. Grid Layout: مبانی و مفاهیم اولیه
• 23. Grid Container Properties: grid-template-rows، grid-template-columns، grid-template-areas، grid-gap
• 24. Grid Item Properties: grid-column-start، grid-column-end، grid-row-start، grid-row-end، grid-area
• 25. رسانه‌های تصویری (Media Queries): مبانی و استفاده
• 26. ایجاد طرح‌بندی‌های واکنش‌گرا (Responsive Layouts)
• 27. Mobile-First Design Approach
• 28. Viewport Meta Tag
• 29. تصاویر واکنش‌گرا (Responsive Images)
• 30. CSS Variables (Custom Properties): تعریف و استفاده
• 31. محاسبات در CSS: Calc() Function
• 32. Transitions: ایجاد انیمیشن‌های ساده
• 33. Transition Properties: transition-property، transition-duration، transition-timing-function، transition-delay
• 34. Transforms: تغییر شکل عناصر (rotate، scale، translate، skew)
• 35. D Transforms
• 36. D Transforms
• 37. Animations: ایجاد انیمیشن‌های پیچیده
• 38. Keyframes و تعریف انیمیشن
• 39. Animation Properties: animation-name، animation-duration، animation-timing-function، animation-delay، animation-iteration-count، animation-direction، animation-fill-mode، animation-play-state
• 40. کار با انیمیشن‌ها در JavaScript
• 41. SVG (Scalable Vector Graphics): مبانی و استفاده در CSS
• 42. ایجاد آیکون‌ها با CSS
• 43. استفاده از فونت آیکون‌ها
• 44. Pseudo-classes: hover، active، focus، visited، first-child، last-child، nth-child و غیره
• 45. Pseudo-elements: before، after، first-line، first-letter و غیره
• 46. استایل‌دهی به فرم‌ها: ورودی‌ها، دکمه‌ها، چک باکس‌ها و رادیو باتن‌ها
• 47. ایجاد دکمه‌های تعاملی با CSS
• 48. Tooltipها با CSS
• 49. Modalها با CSS
• 50. کار با CSS preprocessors: Sass و Less
• 51. Sass: متغیرها، mixinها، توابع و ارث‌بری
• 52. Less: متغیرها، mixinها، توابع و ارث‌بری
• 53. نصب و پیکربندی Sass/Less
• 54. CSS Modules: مبانی و استفاده
• 55. BEM (Block Element Modifier) Methodology
• 56. OOCSS (Object Oriented CSS)
• 57. Atomic CSS
• 58. CSS Frameworks: Bootstrap، Foundation، Materialize
• 59. استفاده از Bootstrap برای ایجاد طرح‌بندی‌های واکنش‌گرا
• 60. استفاده از Foundation برای ایجاد طرح‌بندی‌های واکنش‌گرا
• 61. استفاده از Materialize برای ایجاد طرح‌بندی‌های واکنش‌گرا
• 62. آشنایی با کتابخانه‌های UI: React، Angular، Vue.js
• 63. استفاده از CSS-in-JS: Styled Components، Emotion
• 64. آشنایی با Tailwind CSS
• 65. اعتبارسنجی CSS: استفاده از CSS validators
• 66. بهینه‌سازی CSS: Minification و Compression
• 67. CSS Sprites
• 68. Lazy Loading تصاویر
• 69. نحوه دیباگ کردن CSS
• 70. استفاده از Chrome DevTools برای دیباگ CSS
• 71. تست CSS در مرورگرهای مختلف
• 72. Cross-browser compatibility
• 73. Accessibility (دسترسی‌پذیری) در CSS: ملاحظات مهم
• 74. ARIA (Accessible Rich Internet Applications) Attributes
• 75. ایجاد طرح‌بندی‌های قابل دسترس
• 76. Performance Optimization: Reduce Reflows & Repaints
• 77. Render-Blocking CSS
• 78. Critical CSS
• 79. Code Splitting برای CSS
• 80. استفاده از CDN برای CSS
• 81. CSS Grid Auto-Placement
• 82. CSS masking و clipping
• 83. Blending Modes در CSS
• 84. Shape Outside در CSS
• 85. Counterها در CSS
• 86. پروژه عملی: ساخت یک گالری تصاویر تعاملی
• 87. پروژه عملی: ساخت یک منوی ناوبری واکنش‌گرا
• 88. پروژه عملی: ساخت یک فرم ثبت نام با اعتبارسنجی
• 89. پروژه عملی: ساخت یک داشبورد با استفاده از Grid و Flexbox
• 90. پروژه عملی: ساخت یک صفحه لندینگ با انیمیشن‌های CSS
• 91. استفاده از CSS برای بهبود تجربه کاربری
• 92. نکات و ترفندهای CSS
• 93. منابع یادگیری بیشتر CSS
• 94. ادامه یادگیری و به‌روزرسانی مهارت‌های CSS
• 95. مصاحبه شغلی CSS: سوالات متداول و نحوه پاسخگویی
• 96. مرور مطالب و جمع‌بندی دوره
• 97. انیمیشن‌ها و ترانزیشن‌های CSS برای عناصر تعاملی
• 98. استفاده از Pseudo-classes و Pseudo-elements برای ایجاد حالت‌های پویا
• 99. تکنیک‌های پاسخگو (Responsive Design) در CSS برای عناصر تعاملی
• 100. جاوا اسکریپت در کنار CSS برای تعاملات پیچیده‌تر