فلش‌کارت‌های آموزشی مقدمه‌ای بر CSS: اصول استایل‌دهی برای صفحات وب حرفه‌ای

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

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

عنوان دوره: دوره مقدمه‌ای بر CSS: اصول استایل‌دهی برای صفحات وب حرفه‌ای

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

موضوع میانی: استایل‌دهی صفحات وب

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

• 1. آشنایی با CSS و جایگاه آن در طراحی وب
• 2. نصب و راه‌اندازی ابزارهای لازم برای توسعه وب
• 3. اولین گام‌ها با CSS: ساخت اولین استایل‌شیت
• 4. انتخاب‌گرهای پایه: تگ‌ها، کلاس‌ها و شناسه‌ها
• 5. تکنیک‌های انتخاب‌گر پیشرفته: ترکیبی و سلسله مراتبی
• 6. آشنایی با خاصیت‌های CSS: رنگ، فونت و پس‌زمینه
• 7. تنظیم فونت‌ها: خانواده، اندازه، وزن و سبک
• 8. کار با رنگ‌ها: مقادیر هگز، RGB و نام رنگ‌ها
• 9. تنظیم پس‌زمینه: رنگ، تصویر و تکرار
• 10. مدیریت نمایش عناصر: دیسپلی، پوزیشن و فلوت
• 11. جعبه مدل (Box Model): مارجین، پدینگ و بوردر
• 12. تنظیم اندازه عناصر: عرض، ارتفاع و مقادیر نسبی
• 13. شناخت واحدهای اندازه‌گیری در CSS: پیکسل، em، rem و درصد
• 14. استفاده از واحدهای نسبی برای واکنش‌گرایی
• 15. تنظیم رنگ متن و ویژگی‌های آن
• 16. مدیریت حاشیه‌ها (Borders) و استایل‌های مختلف
• 17. ایجاد فضاهای خالی داخلی (Padding)
• 18. تنظیم فاصله‌های خارجی (Margin)
• 19. تکنیک‌های چیدمان عناصر: Flexbox
• 20. مفاهیم اصلی Flexbox: کانتینر و آیتم‌ها
• 21. تنظیم جهت و ترتیب آیتم‌ها در Flexbox
• 22. تراز کردن آیتم‌ها در Flexbox
• 23. مدیریت فضای خالی بین آیتم‌های Flexbox
• 24. استفاده از Grid Layout برای چیدمان پیچیده‌تر
• 25. مفاهیم اصلی Grid Layout: کانتینر و آیتم‌ها
• 26. تعریف ستون‌ها و ردیف‌ها در Grid
• 27. تراز کردن و تخصیص فضا در Grid
• 28. ایجاد طرح‌بندی‌های واکنش‌گرا با Grid
• 29. استفاده از CSS Variables (متغیرها) برای مدیریت مقادیر
• 30. تعریف و استفاده از متغیرها
• 31. مدیریت استایل‌های پویا با متغیرها
• 32. کدنویسی تمیز و قابل نگهداری با متغیرها
• 33. طراحی فرم‌ها با CSS: استایل‌دهی فیلدها
• 34. استایل‌دهی دکمه‌ها و عناصر تعاملی
• 35. استفاده از CSS برای ایجاد منوهای ناوبری
• 36. طراحی هدر و فوتر صفحات وب
• 37. استفاده از CSS برای زیباسازی جداول
• 38. مدیریت تصاویر و استایل‌دهی آن‌ها
• 39. افکت‌های CSS: سایه، گرادیان و ترنزیشن
• 40. ایجاد انیمیشن‌های ساده با CSS Transitions
• 41. استفاده از CSS Animations برای افکت‌های پیچیده‌تر
• 42. تنظیمات مربوط به فونت‌های وب (Web Fonts)
• 43. استفاده از آیکون‌ها در صفحات وب با Font Awesome
• 44. اصول طراحی واکنش‌گرا (Responsive Design)
• 45. استفاده از Media Queries برای تنظیمات دستگاه‌های مختلف
• 46. طراحی برای موبایل اول (Mobile-First Approach)
• 47. بهینه‌سازی تصاویر برای وب
• 48. کتابخانه‌های CSS: Bootstrap و Tailwind CSS (معرفی)
• 49. مقدمه‌ای بر Bootstrap و ساختار آن
• 50. ساخت Layout با استفاده از Grid سیستم Bootstrap
• 51. استایل‌دهی کامپوننت‌های Bootstrap
• 52. مقدمه‌ای بر Tailwind CSS و فلسفه آن
• 53. کلاس‌های Utility در Tailwind CSS
• 54. ساخت Layout با استفاده از Tailwind CSS
• 55. استایل‌دهی کامپوننت‌ها با Tailwind CSS
• 56. اصول دسترسی‌پذیری (Accessibility) در وب
• 57. اهمیت دسترسی‌پذیری برای کاربران مختلف
• 58. استفاده از ARIA Attributes برای بهبود دسترسی‌پذیری
• 59. تست دسترسی‌پذیری صفحات وب
• 60. مقدمه‌ای بر Preprocessors CSS: Sass و Less
• 61. نصب و راه‌اندازی Sass
• 62. استفاده از Mixins و Functions در Sass
• 63. ساختاردهی پروژه‌های بزرگ با Sass
• 64. مقدمه‌ای بر Less و ویژگی‌های آن
• 65. مقایسه Sass و Less
• 66. بهینه‌سازی CSS برای عملکرد بهتر
• 67. حذف کدهای مرده (Dead Code)
• 68. فشرده‌سازی فایل‌های CSS
• 69. استفاده از CSS Sprites برای کاهش درخواست‌ها
• 70. اصول طراحی UI/UX با CSS
• 71. تکنیک‌های بصری برای بهبود تجربه کاربری
• 72. رنگ‌شناسی در طراحی وب
• 73. تایپوگرافی و خوانایی متن
• 74. ایجاد حس سلسله مراتب در طراحی
• 75. استفاده از فضای سفید (Whitespace)
• 76. ساخت اسلایدر و کاروسل با CSS
• 77. ایجاد منوهای کشویی (Dropdown Menus)
• 78. استایل‌دهی مودال‌ها و پنجره‌های پاپ‌آپ
• 79. ایجاد افکت‌های هاور (Hover Effects)
• 80. طراحی کارت‌های اطلاعاتی
• 81. چیدمان گالری تصاویر
• 82. استفاده از CSS برای ایجاد فرم‌های اعتبارسنجی
• 83. طراحی صفحات فرود (Landing Pages)
• 84. نکات پیشرفته در CSS
• 85. مدیریت CSS در پروژه‌های بزرگ
• 86. بررسی ابزارهای توسعه‌دهنده مرورگر برای CSS
• 87. آخرین روندها در CSS