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

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

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

عنوان دوره: دوره CSS for Executive Coaching

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

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

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

• 1. مقدمه به CSS: زبان استایل وب
• 2. هدف اصلی CSS در وب‌سایت‌های مدرن
• 3. چگونه CSS تجربه کاربری و برندینگ را بهبود می‌بخشد
• 4. راه‌اندازی اولین استایل‌شیت شما: بهترین شیوه‌ها برای CSS خارجی
• 5. استفاده از ابزارهای توسعه‌دهنده مرورگر برای بازرسی CSS
• 6. درک ساختار CSS: سلکتورها، ویژگی‌ها، مقادیر
• 7. هدف قرار دادن عناصر: سلکتورهای نوع
• 8. استایل‌دهی کارآمد با سلکتورهای کلاس
• 9. شناسه‌های منحصر به فرد: سلکتورهای ID (موارد استفاده و مشکلات)
• 10. گروه‌بندی سلکتورها برای استایل‌های مشترک
• 11. ترکیب سلکتورها برای هدف‌گیری پیشرفته
• 12. شبه‌کلاس‌ها: استایل‌دهی بر اساس وضعیت عنصر (hover, focus)
• 13. رمزگشایی از آبشار CSS: ترتیب اهمیت دارد
• 14. درک اولویت (Specificity): کدام استایل برنده می‌شود؟
• 15. محاسبه امتیاز اولویت (نمونه‌های عملی)
• 16. قدرت و رفتار پیش‌فرض وراثت
• 17. تنظیم مجدد استایل‌های پیش‌فرض مرورگر: Normalize.css و CSS Reset
• 18. مدیریت تداخلات استایل برای نتایج قابل پیش‌بینی
• 19. نقش `!important` (و چرا باید از آن با احتیاط استفاده کرد)
• 20. تجسم عناصر: مدل جعبه‌ای CSS توضیح داده شد
• 21. ناحیه محتوا: هسته عنصر شما
• 22. Padding: فضای داخلی برای محتوا
• 23. Border: تعریف مرزهای عنصر
• 24. Margin: فضای خارجی بین عناصر
• 25. کنترل ابعاد جعبه با `box-sizing: border-box`
• 26. درک فروپاشی مارجین (Margin Collapsing)
• 27. کاربردهای عملی مدل جعبه‌ای در طراحی رابط کاربری
• 28. انتخاب فونت مناسب: پشته‌های `font-family`
• 29. تنظیم اندازه متن برای خوانایی: `font-size` (rem در مقابل em)
• 30. کنترل وزن و استایل فونت
• 31. ارتفاع خط برای جریان خواندن بهینه
• 32. تنظیم فاصله بین حروف و کلمات
• 33. ترازبندی متن: ویژگی‌های `text-align`
• 34. افکت‌های دکوراسیون و تبدیل متن
• 35. پیاده‌سازی فونت‌های وب برای هویت برند (Google Fonts)
• 36. وارد کردن فونت‌های سفارشی برای برندینگ منحصر به فرد
• 37. بهترین شیوه‌ها برای تایپوگرافی دسترس‌پذیر و واکنش‌گرا
• 38. تعریف رنگ‌ها: Hex, RGB, HSL (انتخاب فرمت مناسب)
• 39. درک کانال آلفا برای شفافیت: RGBA, HSLA
• 40. تنظیم رنگ‌های پس‌زمینه یکپارچه
• 41. گنجاندن تصاویر پس‌زمینه برای جذابیت بصری
• 42. کنترل تکرار تصویر: `background-repeat`
• 43. موقعیت‌دهی تصاویر پس‌زمینه: `background-position`
• 44. اندازه‌بندی تصاویر پس‌زمینه: `background-size` (cover, contain)
• 45. استفاده از گرادیان‌ها به عنوان پس‌زمینه (linear-gradient, radial-gradient)
• 46. درک ویژگی `display` (block, inline, inline-block)
• 47. پنهان کردن عناصر: `display: none` در مقابل `visibility: hidden`
• 48. مقدمه‌ای بر ویژگی `position`
• 49. موقعیت‌دهی نسبی برای تنظیمات دقیق
• 50. موقعیت‌دهی مطلق برای هم‌پوشانی عناصر
• 51. موقعیت‌دهی ثابت برای نوارهای ناوبری پایدار
• 52. موقعیت‌دهی چسبنده (Sticky) برای افکت‌های اسکرول دینامیک
• 53. کنترل ترتیب انباشتگی با `z-index`
• 54. متمرکز کردن عناصر با رویکردهای مدرن CSS
• 55. مقدمه‌ای بر فلکس‌باکس: یک سیستم طرح‌بندی ۱ بعدی قدرتمند
• 56. ایجاد یک کانتینر فلکس: `display: flex`
• 57. هدایت آیتم‌های فلکس: `flex-direction` (row, column)
• 58. پیچیدن آیتم‌های فلکس به خطوط جدید: `flex-wrap`
• 59. ترازبندی آیتم‌ها به صورت افقی: `justify-content`
• 60. ترازبندی آیتم‌ها به صورت عمودی: `align-items`
• 61. کنترل رشد و انقباض آیتم: `flex-grow`, `flex-shrink`
• 62. تعریف اندازه اولیه آیتم: `flex-basis`
• 63. ویژگی `flex` برای کارایی
• 64. بازآرایی آیتم‌های فلکس با ویژگی `order`
• 65. مقدمه‌ای بر CSS گرید: یک سیستم طرح‌بندی ۲ بعدی قدرتمند
• 66. تعریف یک کانتینر گرید: `display: grid`
• 67. مشخص کردن مسیرهای ستون: `grid-template-columns` (واحد fr)
• 68. مشخص کردن مسیرهای ردیف: `grid-template-rows`
• 69. نام‌گذاری نواحی گرید برای طرح‌بندی‌های معنایی: `grid-template-areas`
• 70. ایجاد شکاف بین آیتم‌های گرید: `grid-gap` (row-gap, column-gap)
• 71. قرار دادن آیتم‌ها با شماره خط: `grid-column`, `grid-row`
• 72. قرار دادن آیتم‌ها با نواحی نام‌گذاری شده: `grid-area`
• 73. ترازبندی آیتم‌ها و محتوای گرید در سلول‌ها
• 74. ترکیب گرید و فلکس‌باکس برای کامپوننت‌های پیشرفته
• 75. ضرورت طراحی وب واکنش‌گرا برای مدیران
• 76. تنظیم تگ متا viewport برای دستگاه‌های موبایل
• 77. مقدمه‌ای بر Media Queries: تطبیق استایل‌ها بر اساس دستگاه
• 78. ایجاد استایل‌های واکنش‌گرا با breakpoints (min-width و max-width)
• 79. رویکرد موبایل-اول: ابتدا برای صفحه‌نمایش‌های کوچک‌تر بسازید
• 80. مدیریت تصاویر واکنش‌گرا با عناصر `srcset` و `picture`
• 81. تایپوگرافی واکنش‌گرا با واحدهای viewport (vw, vh)
• 82. پیاده‌سازی طرح‌بندی‌های سیال با واحدهای درصد و viewport
• 83. تست واکنش‌گرایی در دستگاه‌ها و viewport‌های متنوع
• 84. تغییرات روان با CSS Transitions
• 85. ویژگی‌های Transition: `transition-property`, `duration`, `timing-function`, `delay`
• 86. تقویت رابط کاربری با تغییر شکل‌های ۲ بعدی CSS (translate, rotate, scale, skew)
• 87. افزودن عمق با تغییر شکل‌های ۳ بعدی CSS (perspective)
• 88. مقدمه‌ای بر CSS Keyframe Animations
• 89. تعریف دنباله‌های انیمیشن با قواعد `@keyframes`
• 90. کنترل پخش انیمیشن: `animation-duration`, `iteration-count`, `fill-mode`
• 91. ملاحظات عملکرد برای انیمیشن‌های کارآمد CSS
• 92. بهبود استایل‌ها با ویژگی‌های سفارشی CSS (متغیرها)
• 93. شبه‌عناصر: استایل‌دهی به بخش‌هایی از یک عنصر (`::before`, `::after`)
• 94. شبه‌کلاس‌های پیشرفته: `nth-child`, `first-of-type`, `not()`
• 95. تقویت جلوه‌های بصری با فیلترها (`filter`) (blur, sepia, grayscale)
• 96. ساخت کامپوننت‌های قابل استفاده مجدد با متدولوژی‌های CSS (مفاهیم BEM)
• 97. اطمینان از دسترس‌پذیری وب (A11y) از طریق شیوه‌های CSS
• 98. بهینه‌سازی CSS برای سرعت بارگذاری و عملکرد
• 99. عیب‌یابی موثر مشکلات CSS با ابزارهای توسعه‌دهنده
• 100. نگهداری کدهای CSS بزرگ: سازماندهی و مقیاس‌پذیری