دوره تسلط بر CSS: از مبانی تا تکنیک‌های پیشرفته طراحی ریسپانسیو همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره تسلط بر CSS: از مبانی تا تکنیک‌های پیشرفته طراحی ریسپانسیو

موضوع کلی: توسعه وب و طراحی رابط کاربری

موضوع میانی: طراحی و پیاده‌سازی صفحات وب با CSS

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

• 1. مبانی CSS و جایگاه آن در توسعه وب
• 2. نصب و راه‌اندازی ابزارهای توسعه وب
• 3. اولین استایل‌ها: انتخابگرها و خواص پایه
• 4. ساختار سند HTML و ارتباط آن با CSS
• 5. نحوه اعمال استایل‌ها: اینلاین، داخلی و خارجی
• 6. مفهوم Box Model: حاشیه، فاصله داخلی، حاشیه بیرونی و محتوا
• 7. کنترل اندازه و ابعاد المان‌ها
• 8. رنگ‌ها در CSS: مقادیر هگز، RGB، HSL و نام رنگ‌ها
• 9. انتخابگرهای پیشرفته: کلاس‌ها، آی‌دی‌ها و صفات
• 10. انتخابگرهای ساختاری: فرزند، برادر و شبه‌کلاس‌ها
• 11. نوشتار در CSS: فونت‌ها، اندازه‌ها و وزن‌ها
• 12. مدیریت متن: تراز، فاصله‌گذاری و دکوراسیون
• 13. پس‌زمینه‌ها: رنگ، تصویر و تکرار
• 14. حاشیه‌ها: سبک، ضخامت و رنگ
• 15. فاصله‌های داخلی (Padding): ایجاد فضای اطراف محتوا
• 16. فاصله‌های بیرونی (Margin): ایجاد فضای بین المان‌ها
• 17. خاصیت Display: بلاک، اینلاین و اینلاین-بلاک
• 18. مفهوم جانمایی (Positioning): استاتیک، ریلیتیو، آبسولوت و فیکسد
• 19. نحوه قرارگیری المان‌ها با Position
• 20. انتقال و تبدیل المان‌ها با CSS Transitions
• 21. انیمیشن‌ها در CSS: Keyframes و Animation Properties
• 22. ایجاد انیمیشن‌های پیچیده با @keyframes
• 23. کنترل انیمیشن‌ها: تاخیر، مدت زمان و تکرار
• 24. قوانین CSS: اولویت‌بندی و وراثت
• 25. مدیریت مقیاس‌پذیری (Scaling) المان‌ها
• 26. تکنیک‌های طراحی ریسپانسیو (Responsive Design)
• 27. مدیریت دیدگاه (Viewport) در دستگاه‌های مختلف
• 28. استفاده از Media Queries برای طراحی ریسپانسیو
• 29. طراحی برای موبایل اول (Mobile-First Approach)
• 30. طراحی برای دسکتاپ (Desktop-First Approach)
• 31. شبکه‌های CSS (CSS Grid): مبانی و ساختار
• 32. ایجاد چیدمان‌های پیچیده با CSS Grid
• 33. Grid Template Areas و Grid Template Columns/Rows
• 34. Grid Item Placement و Grid Alignment
• 35. فریمورک‌های CSS (مانند Bootstrap): مقدمه و کاربرد
• 36. نصب و استفاده از Bootstrap
• 37. اجزای اصلی Bootstrap: Grid System، Components
• 38. تخصیص کلاس‌های Bootstrap برای استایل‌دهی
• 39. استفاده از Layout Utilities در Bootstrap
• 40. کار با فرم‌ها در Bootstrap
• 41. اجزای ناوبری (Navbars) در Bootstrap
• 42. کارت‌ها (Cards) و مدال‌ها (Modals) در Bootstrap
• 43. طراحی جداول با Bootstrap
• 44. آیکون‌ها در Bootstrap
• 45. نصب و استفاده از Tailwind CSS
• 46. مفاهیم Utility-First در Tailwind CSS
• 47. طراحی ریسپانسیو با کلاس‌های Utility
• 48. تنظیمات سفارشی در Tailwind CSS
• 49. استفاده از Flexbox برای چیدمان‌های یک‌بعدی
• 50. مبانی Flexbox: Container و Items
• 51. خاصیت Flex-direction و Flex-wrap
• 52. خاصیت Justify-content و Align-items
• 53. خاصیت Align-self و Align-content
• 54. کاربرد Flexbox در طراحی ریسپانسیو
• 55. طراحی فرم‌های واکنش‌گرا با Flexbox
• 56. ساخت منوهای ناوبری با Flexbox
• 57. چیدمان المان‌ها در فوتر با Flexbox
• 58. استفاده از Pseudo-elements و Pseudo-classes
• 59. Pseudo-elements: ::before و ::after
• 60. کاربرد ::before و ::after در طراحی
• 61. Pseudo-classes: :hover, :focus, :active
• 62. استفاده از :not(), :nth-child()
• 63. مدیریت فرم‌ها با Pseudo-classes
• 64. استایل‌دهی به لینک‌ها با Pseudo-classes
• 65. کنترل وضعیت المان‌ها با Pseudo-classes
• 66. CSS Variables (Custom Properties)
• 67. تعریف و استفاده از متغیرهای CSS
• 68. تغییر استایل‌ها با استفاده از متغیرها
• 69. مدیریت تم‌ها (Themes) با CSS Variables
• 70. مباحث پیشرفته‌تر در CSS Variables
• 71. CSS Specificity و Cascade
• 72. درک اولویت‌بندی استایل‌ها
• 73. نحوه وراثت استایل‌ها
• 74. مدیریت Cascade برای جلوگیری از تداخل
• 75. بهینه‌سازی عملکرد CSS
• 76. فشرده‌سازی فایل‌های CSS
• 77. حذف کدهای CSS بلااستفاده
• 78. استفاده از Preprocessors (مانند Sass/Less): مقدمه
• 79. نصب و راه‌اندازی Sass
• 80. متغیرها، Mixins و Nesting در Sass
• 81. توابع و عملیات ریاضی در Sass
• 82. استفاده از Extend و Import در Sass
• 83. مزایای استفاده از Sass در پروژه‌های بزرگ
• 84. نکات پایانی و بهترین شیوه‌ها در CSS
• 85. مستندسازی کد CSS
• 86. مدیریت پروژه‌های CSS در مقیاس بزرگ
• 87. آینده CSS و تکنولوژی‌های جدید
• 88. تمرین عملی: طراحی یک صفحه وب کامل
• 89. بازبینی و بهبود طراحی انجام شده
• 90. بررسی و رفع اشکالات رایج CSS
• 91. آموزش ابزارهای Developer Tools مرورگر
• 92. استفاده از Inspect Element برای دیباگ کردن
• 93. تست ریسپانسیو بودن با ابزارهای مرورگر
• 94. جمع‌بندی و مسیر یادگیری ادامه
• 95. نکات امنیتی در توسعه وب با CSS
• 96. اصول دسترسی‌پذیری (Accessibility) در CSS
• 97. استایل‌دهی برای صفحه‌خوان‌ها
• 98. مدیریت فوکوس برای ناوبری با کیبورد
• 99. طراحی برای کاربران با نیازهای خاص
• 100. ملاحظات فرهنگی و اجتماعی در طراحی رابط کاربری