دوره CSS for Decentralized Applications (dApps) همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره CSS for Decentralized Applications (dApps)

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در dApps
• 2. چرا استایل‌دهی در برنامه‌های غیرمتمرکز (dApps) اهمیت دارد؟
• 3. اتصال فایل CSS به یک پروژه: روش‌های داخلی، خارجی و درون‌خطی
• 4. سینتکس پایه CSS: انتخاب‌گرها، خصوصیات و مقادیر
• 5. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای CSS
• 6. انتخاب‌گرهای اصلی: Element, Class, ID
• 7. کامنت‌گذاری در CSS
• 8. مفهوم Cascade (آبشار) در CSS
• 9. مفهوم Specificity (ویژگی) و نحوه محاسبه آن
• 10. مفهوم Inheritance (ارث‌بری)
• 11. مقدار !important و زمان استفاده (و عدم استفاده) از آن
• 12. CSS Reset در مقابل Normalize.css
• 13. مدل باکس (Box Model): Content, Padding, Border, Margin
• 14. خصوصیت box-sizing: content-box در مقابل border-box
• 15. واحدهای اندازه‌گیری مطلق: px, pt
• 16. واحدهای اندازه‌گیری نسبی: em, rem
• 17. واحدهای اندازه‌گیری Viewport: vw, vh, vmin, vmax
• 18. رنگ‌ها در CSS: کلمات کلیدی، HEX, RGB, RGBA
• 19. رنگ‌ها در CSS: HSL و HSLA
• 20. خصوصیت background-color و background-image
• 21. کنترل پس‌زمینه: background-repeat, background-position, background-size
• 22. گرادیان‌های خطی و شعاعی در CSS
• 23. کار با فونت‌ها: font-family و فونت‌های امن وب
• 24. استفاده از فونت‌های سفارشی با @font-face
• 25. خصوصیات متن: font-size, font-weight, font-style
• 26. تراز کردن متن: text-align و vertical-align
• 27. تزئین متن: text-decoration و text-transform
• 28. فاصله‌گذاری در متن: line-height, letter-spacing, word-spacing
• 29. استایل‌دهی به لیست‌های مرتب و نامرتب
• 30. خصوصیت display: block, inline, inline-block
• 31. خصوصیت display: none و visibility: hidden
• 32. مقدمه‌ای بر Flexbox برای چیدمان‌های یک‌بعدی
• 33. خصوصیات Flex Container: flex-direction, flex-wrap
• 34. تراز کردن آیتم‌ها در محور اصلی: justify-content
• 35. تراز کردن آیتم‌ها در محور متقاطع: align-items
• 36. تراز کردن خطوط چندگانه: align-content
• 37. خصوصیات Flex Items: flex-grow, flex-shrink, flex-basis
• 38. خصوصیت order برای تغییر ترتیب آیتم‌ها
• 39. مقدمه‌ای بر CSS Grid برای چیدمان‌های دوبعدی
• 40. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 41. ایجاد فاصله بین آیتم‌ها با gap
• 42. جایگذاری آیتم‌ها در Grid
• 43. ترکیب Flexbox و Grid برای چیدمان‌های پیچیده
• 44. موقعیت‌یابی (Positioning): static, relative
• 45. موقعیت‌یابی (Positioning): absolute و اولین والد positioned
• 46. موقعیت‌یابی (Positioning): fixed
• 47. موقعیت‌یابی (Positioning): sticky
• 48. کنترل لایه‌ها با z-index
• 49. مفهوم Floating و clearfix hack
• 50. انتخاب‌گرهای پیشرفته: Attribute Selectors
• 51. انتخاب‌گرهای ترکیبی (Combinators): Descendant, Child, Sibling
• 52. شبه-کلاس‌ها (Pseudo-classes): :hover, :focus, :active
• 53. شبه-کلاس‌ها (Pseudo-classes): :first-child, :last-child, :nth-child
• 54. شبه-المان‌ها (Pseudo-elements): ::before و ::after
• 55. کاربرد ::before و ::after برای آیکون‌ها و تزئینات
• 56. طراحی واکنش‌گرا (Responsive Design) و رویکرد Mobile-First
• 57. استفاده از Media Queries برای Breakpointها
• 58. استایل‌دهی به دکمه "اتصال کیف پول" (Connect Wallet)
• 59. حالت‌های مختلف دکمه: Disabled, Loading, Connected
• 60. استایل‌دهی به فرم‌ها و ورودی‌ها (Inputs) برای آدرس‌ها و مقادیر
• 61. استایل‌دهی به پیام‌های خطا و موفقیت در تراکنش‌ها
• 62. طراحی جداول برای نمایش تاریخچه تراکنش‌ها
• 63. طراحی کارت‌ها (Cards) برای نمایش NFTها یا توکن‌ها
• 64. استایل‌دهی به مودال‌ها (Modals) برای تایید تراکنش
• 65. طراحی داشبوردهای کاربری و نمایش موجودی (Balance)
• 66. استایل‌دهی به آدرس‌ها و هش‌ها: فونت Monospace و کوتاه کردن متن
• 67. ایجاد Tooltip برای اصطلاحات فنی (Gas, Slippage)
• 68. طراحی نشانگرهای وضعیت: Pending, Confirmed, Failed
• 69. نوارهای پیشرفت (Progress Bars) برای فرآیندهای Staking یا Vesting
• 70. نمایش بصری داده‌ها: نمودارهای ساده با CSS
• 71. متغیرهای CSS (Custom Properties) و کاربرد آن در dApps
• 72. پیاده‌سازی تم تاریک و روشن (Dark/Light Mode) با متغیرهای CSS
• 73. استفاده از تابع ()calc برای محاسبات دینامیک
• 74. توابع ()min(), max و ()clamp برای طراحی روان
• 75. انتقال‌ها (Transitions) برای ایجاد افکت‌های نرم
• 76. انیمیشن‌های پایه با @keyframes
• 77. تبدیل‌ها (Transforms): translate, scale, rotate, skew
• 78. افکت‌های بصری با فیلترها: blur, brightness, drop-shadow
• 79. استفاده از backdrop-filter برای افکت Glassmorphism
• 80. اصول دسترسی‌پذیری (Accessibility) در CSS
• 81. استایل‌دهی به حالت focus برای ناوبری با کیبورد
• 82. استفاده از media query برای prefers-reduced-motion
• 83. بهینه‌سازی عملکرد CSS: کاهش حجم فایل
• 84. شناسایی و حذف CSS استفاده‌نشده
• 85. معماری CSS و متدولوژی BEM
• 86. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 87. مفهوم متغیرها و Nesting در Sass
• 88. استفاده از Mixinها و @extend در Sass
• 89. سازماندهی فایل‌های CSS در پروژه‌های بزرگ dApp
• 90. مفهوم CSS-in-JS و کاربرد آن در فریمورک‌های مدرن
• 91. استایل‌دهی به کامپوننت‌های Web3 (مانند ویجت‌های WalletConnect)
• 92. سازگاری بین مرورگرها و استفاده از پیشوندها (Vendor Prefixes)
• 93. استایل‌دهی برای چاپ (Print Stylesheets)
• 94. ایجاد آیکون‌های سفارشی با CSS
• 95. تکنیک‌های Image Replacement
• 96. استایل‌دهی بر اساس وضعیت‌های ARIA
• 97. چالش‌های رایج در استایل‌دهی dAppها و راه‌حل‌ها
• 98. پروژه عملی: طراحی صفحه اصلی یک صرافی غیرمتمرکز (DEX)
• 99. پروژه عملی: استایل‌دهی گالری NFT
• 100. پروژه عملی: پیاده‌سازی کامل تم تاریک/روشن برای یک داشبورد