فلش‌کارت‌های آموزشی CSS در عمق: راهنمای جامع برای ساخت رابط‌های کاربری پویا و واکنش‌گرا

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

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

عنوان دوره: دوره CSS در عمق: راهنمای جامع برای ساخت رابط‌های کاربری پویا و واکنش‌گرا

موضوع کلی: توسعه فرانت‌اند

موضوع میانی: تسلط بر طراحی با CSS

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

• 1. مقدمه‌ای بر CSS: نقش و قدرت آن در وب
• 2. نحوه افزودن CSS به یک صفحه وب: داخلی، خارجی و درون‌خطی
• 3. آناتومی یک قانون CSS: انتخابگر، اعلان، خصوصیت و مقدار
• 4. جادوی انتخابگرها: انتخابگرهای نوع، کلاس و شناسه (ID)
• 5. انتخابگرهای ترکیبی: انتخابگرهای فرزند، نسل، همسایه مجاور و همسایه‌های عمومی
• 6. انتخابگرهای ویژگی (Attribute Selectors) و کاربردهای آن
• 7. مفهوم آبشار (Cascade): چگونه مرورگر تداخل‌ها را حل می‌کند
• 8. اولویت‌بندی و امتیازدهی (Specificity): کدام قانون برنده می‌شود؟
• 9. وراثت (Inheritance) و کنترل آن با مقادیر inherit, initial, unset
• 10. استفاده هوشمندانه از دستور !important
• 11. مدل جعبه‌ای (Box Model): محتوا، Padding، Border و Margin
• 12. کنترل مدل جعبه‌ای با خصوصیت box-sizing
• 13. واحدها در CSS: واحدهای مطلق (px, pt) و نسبی (em, rem, %)
• 14. تفاوت بنیادین بین واحدهای em و rem
• 15. کار با رنگ‌ها: کلمات کلیدی، HEX، RGB و RGBA
• 16. فضای رنگی HSL و HSLA برای کنترل بهتر رنگ‌ها
• 17. استایل‌دهی به متن: font-family, font-size, font-weight, font-style
• 18. تایپوگرافی پیشرفته: line-height, letter-spacing, word-spacing
• 19. استفاده از فونت‌های وب با @font-face
• 20. خصوصیت display: درک مقادیر block, inline و inline-block
• 21. مخفی کردن عناصر: display: none در مقابل visibility: hidden
• 22. مفهوم Normal Flow یا جریان عادی سند
• 23. کنترل (Overflow): مقادیر visible, hidden, scroll, auto
• 24. موقعیت‌یابی (Positioning): مقادیر static و relative
• 25. موقعیت‌یابی مطلق (absolute) و مفهوم Containing Block
• 26. موقعیت‌یابی ثابت (fixed) برای عناصر شناور در صفحه
• 27. موقعیت‌یابی چسبنده (sticky): بهترین‌های relative و fixed
• 28. مدیریت لایه‌ها با z-index و مفهوم Stacking Context
• 29. شناورسازی با Float: مفهوم و کاربردهای تاریخی
• 30. مشکلات Float و تکنیک‌های پاک‌سازی آن (Clearfix)
• 31. مقدمه‌ای بر Flexbox: انقلابی در چیدمان یک‌بعدی
• 32. محورهای اصلی و متقاطع در Flexbox
• 33. خصوصیات کانتینر Flex: flex-direction و flex-wrap
• 34. تراز کردن در محور اصلی: justify-content
• 35. تراز کردن در محور متقاطع: align-items
• 36. تراز کردن خطوط چندگانه: align-content
• 37. خصوصیات آیتم‌های Flex: flex-grow, flex-shrink, flex-basis
• 38. شورت‌هند flex و کاربردهای آن
• 39. کنترل ترتیب عناصر با خصوصیت order
• 40. تراز کردن یک آیتم خاص با align-self
• 41. مثال عملی با Flexbox: ساخت یک نوار ناوبری (Navbar)
• 42. مثال عملی با Flexbox: طراحی کارت‌های واکنش‌گرا
• 43. مقدمه‌ای بر CSS Grid: قدرت چیدمان دوبعدی
• 44. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 45. واحد جدید fr و قدرت آن در تقسیم‌بندی فضا
• 46. قرار دادن آیتم‌ها بر اساس شماره خطوط گرید
• 47. قرار دادن آیتم‌ها با استفاده از نام خطوط گرید
• 48. تعریف نواحی نام‌گذاری شده با grid-template-areas
• 49. فاصله‌گذاری بین آیتم‌ها با خصوصیت gap
• 50. تراز کردن آیتم‌ها در گرید: justify-items و align-items
• 51. تراز کردن کل گرید در کانتینر: justify-content و align-content
• 52. ادغام سلول‌ها با grid-column و grid-row و کلمه کلیدی span
• 53. توابع قدرتمند در گرید: minmax(), repeat(), auto-fit, auto-fill
• 54. مفهوم Subgrid و کاربردهای آن در چیدمان‌های پیچیده
• 55. مثال عملی با Grid: ساخت یک گالری تصاویر واکنش‌گرا
• 56. مثال عملی با Grid: طراحی یک صفحه اصلی مجله‌ای
• 57. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 58. تنظیم Viewport با تگ متا
• 59. استفاده از Media Query برای اعمال استایل‌های شرطی
• 60. رویکرد Mobile First در مقابل Desktop First
• 61. نقاط شکست (Breakpoints) رایج و نحوه انتخاب آن‌ها
• 62. واحدهای وابسته به Viewport: vw, vh, vmin, vmax
• 63. تصاویر واکنش‌گرا: استفاده از max-width: 100%
• 64. تکنیک‌های پیشرفته تصاویر واکنش‌گرا با تگ picture و srcset
• 65. تایپوگرافی روان (Fluid Typography) با تابع clamp()
• 66. شبه‌کلاس‌ها (Pseudo-classes): استایل‌دهی به حالت‌های مختلف عنصر
• 67. شبه‌کلاس‌های تعاملی: :hover, :focus, :active
• 68. شبه‌کلاس‌های ساختاری: :first-child, :last-child, :nth-child()
• 69. انتخاب بر اساس محتوا با شبه‌کلاس :empty
• 70. شبه‌کلاس‌های نفی و رابطه: :not() و :has()
• 71. شبه‌عناصر (Pseudo-elements): افزودن محتوای مجازی
• 72. کار با ::before و ::after و خصوصیت content
• 73. استایل‌دهی به اولین حرف و اولین خط با ::first-letter و ::first-line
• 74. استایل‌دهی به متن انتخاب شده با ::selection
• 75. متغیرها در CSS (Custom Properties): تعریف و استفاده
• 76. محدوده (Scope) متغیرها: ریشه (root:) در مقابل محلی
• 77. کاربردهای عملی متغیرها: ایجاد تم (Theming) و حالت تاریک
• 78. انتقال‌ها (Transitions): ایجاد انیمیشن‌های نرم بین حالت‌ها
• 79. کنترل زمان‌بندی انتقال با transition-timing-function
• 80. اعمال تاخیر در انتقال با transition-delay
• 81. انیمیشن‌های پیچیده با @keyframes
• 82. کنترل کامل انیمیشن‌ها با خصوصیت animation
• 83. تغییر شکل دوبعدی (2D Transforms): translate, rotate, scale, skew
• 84. نقطه مرجع تغییر شکل با transform-origin
• 85. تغییر شکل سه‌بعدی (3D Transforms) و مفهوم perspective
• 86. استایل‌دهی به پس‌زمینه: background-image, position, size, repeat
• 87. استفاده از چندین تصویر پس‌زمینه
• 88. گرادینت‌های خطی (Linear Gradients)
• 89. گرادینت‌های شعاعی (Radial Gradients)
• 90. ایجاد سایه برای جعبه‌ها با box-shadow
• 91. ایجاد سایه برای متن با text-shadow
• 92. گرد کردن گوشه‌ها با border-radius
• 93. استفاده از تصاویر برای حاشیه با border-image
• 94. فیلترهای گرافیکی در CSS با خصوصیت filter
• 95. حالت‌های ترکیبی (Blend Modes) برای لایه‌ها و پس‌زمینه‌ها
• 96. معماری CSS: چالش‌های مدیریت استایل در پروژه‌های بزرگ
• 97. متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 98. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 99. استفاده از Sass: متغیرها و تودرتویی (Nesting)
• 100. استفاده از Sass: Mixinها و توابع