دوره CSS for Technology Industry همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره CSS for Technology Industry

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. نحوه اتصال فایل‌های CSS به HTML
• 3. سینتکس پایه CSS: سلکتور، پراپرتی، ولیو
• 4. کامنت‌گذاری در کدهای CSS
• 5. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای CSS
• 6. مفهوم آبشاری بودن و ترتیب اعمال استایل‌ها (The Cascade)
• 7. مفهوم وراثت (Inheritance)
• 8. مفهوم اولویت و محاسبه آن (Specificity)
• 9. کاربرد !important و زمان استفاده (و عدم استفاده) از آن
• 10. تفاوت Reset.css و Normalize.css
• 11. سلکتورهای اصلی: نوع، کلاس و شناسه (ID)
• 12. سلکتور جامع (*) و کاربردهای آن
• 13. سلکتورهای ویژگی (Attribute Selectors)
• 14. سلکتورهای ترکیبی: Descendant, Child, Adjacent Sibling, General Sibling
• 15. سودو-کلاس‌ها (Pseudo-classes): وضعیت لینک و تعامل کاربر (:hover, :active, :focus)
• 16. سودو-کلاس‌های ساختاری: first-child, :last-child, :nth-child
• 17. سودو-کلاس‌های فرم‌ها (:checked, :disabled, :required)
• 18. سودو-المان‌ها (Pseudo-elements): before:: و after::
• 19. سودو-المان‌های first-letter:: و first-line::
• 20. گروه‌بندی سلکتورها
• 21. واحد‌های اندازه‌گیری مطلق (px, pt, cm)
• 22. واحدهای اندازه‌گیری نسبی (em, rem)
• 23. واحدهای اندازه‌گیری درصدی (%)
• 24. واحدهای مربوط به Viewport (vw, vh, vmin, vmax)
• 25. مفهوم رنگ‌ها در CSS: کلمات کلیدی، HEX، RGB و RGBA
• 26. فرمت رنگ HSL و HSLA
• 27. پراپرتی color برای رنگ متن
• 28. پراپرتی‌های فونت: font-family, font-size, font-weight, font-style
• 29. پراپرتی text-align و vertical-align
• 30. پراپرتی‌های text-decoration و text-transform
• 31. پراپرتی‌های line-height, letter-spacing و word-spacing
• 32. استایل‌دهی به لیست‌ها (list-style-type, list-style-position)
• 33. مقدمه‌ای بر مدل جعبه‌ای (Box Model)
• 34. پراپرتی‌های width و height
• 35. پراپرتی padding
• 36. پراپرتی border و استایل‌های مختلف آن
• 37. پراپرتی margin و مفهوم Margin Collapsing
• 38. پراپرتی box-sizing: content-box در مقابل border-box
• 39. پراپرتی display: block, inline, inline-block
• 40. پراپرتی display: none در مقابل visibility: hidden
• 41. مدیریت سرریز محتوا با پراپرتی overflow
• 42. پراپرتی outline و تفاوت آن با border
• 43. مفهوم موقعیت‌دهی (Positioning)
• 44. position: static و relative
• 45. position: absolute و اولین والد positioned
• 46. position: fixed و کاربردهای آن
• 47. position: sticky
• 48. مدیریت لایه‌ها با z-index و مفهوم Stacking Context
• 49. مقدمه‌ای بر چیدمان با Float (برای آشنایی با کدهای قدیمی)
• 50. پاک‌سازی Float ها با پراپرتی clear و تکنیک Clearfix
• 51. مقدمه‌ای بر Flexbox و مفاهیم اصلی آن
• 52. پراپرتی display: flex و جهت‌دهی با flex-direction
• 53. تراز افقی آیتم‌ها با justify-content
• 54. تراز عمودی آیتم‌ها با align-items و align-self
• 55. مدیریت شکست خط با flex-wrap و پراپرتی flex-flow
• 56. تراز خطوط چندگانه با align-content
• 57. انعطاف‌پذیری آیتم‌ها: flex-grow, flex-shrink, flex-basis
• 58. پراپرتی shorthand به نام flex
• 59. تغییر ترتیب آیتم‌ها با پراپرتی order
• 60. مقدمه‌ای بر CSS Grid Layout
• 61. پراپرتی display: grid و تعریف ستون و ردیف
• 62. واحد جدید fr در Grid
• 63. فاصله‌گذاری بین آیتم‌ها با gap
• 64. مکان‌یابی آیتم‌ها با شماره خطوط در Grid
• 65. نام‌گذاری خطوط Grid
• 66. نام‌گذاری نواحی با grid-template-areas
• 67. تراز آیتم‌ها در سلول گرید: justify-items و align-items
• 68. تراز کل محتوای گرید: justify-content و align-content
• 69. توابع کاربردی در گرید: repeat() و minmax()
• 70. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Web Design)
• 71. متا تگ Viewport
• 72. آشنایی با Media Queries و Breakpoint ها
• 73. رویکرد Mobile-First در مقابل Desktop-First
• 74. تصاویر واکنش‌گرا با استفاده از CSS
• 75. چیدمان‌های سیال (Fluid Layouts) با درصد
• 76. کار با پراپرتی background-image
• 77. کنترل تکرار و موقعیت پس‌زمینه (background-repeat, background-position)
• 78. اندازه پس‌زمینه با background-size
• 79. استفاده از چندین تصویر پس‌زمینه
• 80. گرادینت‌های خطی و دایره‌ای (Linear & Radial Gradients)
• 81. ایجاد سایه برای جعبه‌ها با box-shadow
• 82. ایجاد سایه برای متون با text-shadow
• 83. گرد کردن گوشه‌ها با border-radius
• 84. تبدیل‌های دو بعدی: transform: translate, rotate, scale
• 85. مبدأ تبدیل با transform-origin
• 86. انتقال‌های نرم با transition
• 87. توابع زمانی در transition (Timing Functions)
• 88. انیمیشن‌سازی با keyframes@
• 89. پراپرتی animation و ویژگی‌های آن
• 90. فیلترهای گرافیکی با پراپرتی filter
• 91. پراپرتی backdrop-filter
• 92. ترکیب رنگ‌ها با mix-blend-mode
• 93. متغیرها در CSS (Custom Properties)
• 94. محدوده تعریف متغیرها و استفاده از :root
• 95. استفاده از تابع ()calc برای محاسبات
• 96. سلکتورهای جدید is:() و where:()
• 97. مقدمه‌ای بر ویژگی‌های منطقی (Logical Properties)
• 98. آشنایی با مفهوم پیش‌پردازنده‌های CSS مانند Sass
• 99. معماری و نام‌گذاری در CSS: متدولوژی BEM
• 100. استایل‌دهی به فرم‌های HTML