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

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

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

عنوان دوره: دوره CSS for Fleet Management Blogs

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

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

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

• 1. معرفی CSS: چرا و چگونه از آن استفاده کنیم؟
• 2. ساختار CSS: انتخاب‌گرها و قوانین
• 3. ادغام CSS در HTML: خطی، داخلی، خارجی
• 4. ابزارهای توسعه‌دهنده مرورگر برای اشکال‌زدایی CSS
• 5. معرفی مدل جعبه‌ای (Box Model) در CSS
• 6. استفاده از انتخاب‌گرهای نوع، کلاس و ID
• 7. مقدمه‌ای بر رنگ‌ها در CSS و فرمت‌های آن (HEX, RGB, HSL)
• 8. مقدمه‌ای بر پس‌زمینه‌ها در CSS (background-color, background-image)
• 9. تنظیم اندازه فونت (font-size) و وزن آن (font-weight)
• 10. مدیریت حاشیه‌ها (Margin) و فاصله‌ها (Padding)
• 11. انواع نمایش عناصر (Display): Block، Inline، Inline-Block
• 12. آشنایی با موقعیت‌یابی (Position): Static، Relative
• 13. موقعیت‌یابی Absolute و Fixed
• 14. اصول اولیه Flexbox: Container و Items
• 15. کنترل جهت و چینش عناصر با Flexbox
• 16. استفاده از Gap در Flexbox برای فاصله‌گذاری
• 17. معرفی CSS Grid Layout برای ساختاردهی پیچیده
• 18. تعریف ستون‌ها و ردیف‌ها با Grid
• 19. چینش عناصر با Grid و استفاده از Grid Areas
• 20. واحدهای اندازه‌گیری در CSS: px، em، rem
• 21. واحدهای اندازه‌گیری درصد و Viewport (vw, vh)
• 22. شناور کردن عناصر (Floats) و پاک کردن آن‌ها (Clearing)
• 23. آشنایی با Stack Order (z-index) برای لایه‌بندی عناصر
• 24. مدیریت Overflow در عناصر
• 25. تنظیم ارتفاع و عرض عناصر
• 26. Max-width و Min-width برای محتوای پاسخگو
• 27. Max-height و Min-height برای محدود کردن ابعاد
• 28. ایجاد ستون‌های چندگانه با CSS Columns
• 29. مقدمه‌ای بر Media Queries برای طراحی واکنش‌گرا
• 30. انتخاب و استفاده از فونت‌ها (font-family) برای وبلاگ
• 31. مدیریت خطوط و پاراگراف‌ها (line-height, letter-spacing)
• 32. وب‌فونت‌ها: استفاده از @font-face و Google Fonts
• 33. تراز کردن متن (text-align) و جهت متن (direction)
• 34. تزئین متن (text-decoration) برای لینک‌ها و عناوین
• 35. تبدیل متن (text-transform) به حروف بزرگ یا کوچک
• 36. سایه متن (text-shadow) برای جلوه‌های بصری
• 37. استایل‌دهی به لیست‌ها (ul, ol) در محتوای وبلاگ
• 38. استایل‌دهی به نقل قول‌ها (blockquote)
• 39. استایل‌دهی به کدهای درون محتوا (code, pre)
• 40. استایل‌دهی به هدر وبلاگ (لوگو، عنوان سایت)
• 41. طراحی و استایل‌دهی منوی ناوبری اصلی
• 42. ایجاد منوی ناوبری افقی با CSS
• 43. طراحی منوهای آبشاری (Dropdown Menus) برای دسته‌بندی‌ها
• 44. استایل‌دهی به فوتر وبلاگ (کپی‌رایت، لینک‌های فرعی)
• 45. استایل‌دهی به ستون‌های کناری (Sidebar) وبلاگ
• 46. نمایش و استایل‌دهی لیست آخرین پست‌ها در Sidebar
• 47. استایل‌دهی به فرم جستجو در وبلاگ
• 48. استایل‌دهی به کارت‌های پست (Blog Post Cards) در صفحه اصلی
• 49. استایل‌دهی به تصاویر در پست‌ها (ابعاد، حاشیه‌ها، کپشن)
• 50. ریسپانسیو کردن تصاویر در وبلاگ با CSS
• 51. استایل‌دهی به جداول نمایش داده‌های ناوگان (Fleet Data)
• 52. بهبود خوانایی و زیبایی جداول با CSS
• 53. استایل‌دهی به دکمه‌ها (Call-to-Action) در وبلاگ
• 54. ایجاد دکمه‌های ریسپانسیو و تعاملی
• 55. استایل‌دهی به فرم‌های تماس یا ثبت‌نام
• 56. استایل‌دهی به فیلدهای ورودی (Input Fields) و TextArea
• 57. استایل‌دهی به بخش نظرات (Comments Section)
• 58. نمایش و استایل‌دهی آواتارها و اطلاعات کاربر در نظرات
• 59. استایل‌دهی به صفحات دسته‌بندی و برچسب‌ها
• 60. استایل‌دهی به دکمه‌های صفحه‌بندی (Pagination)
• 61. طراحی افکت‌های هاور برای لینک‌ها و دکمه‌ها (:hover)
• 62. استایل‌دهی به عناصر فرم در حالت Focus (:focus)
• 63. استفاده از Pseudo-classes برای حالت‌های مختلف عناصر
• 64. استایل‌دهی به اولین و آخرین عناصر لیست (:first-child, :last-child)
• 65. انتخاب و استایل‌دهی به عناصر زوج و فرد (:nth-child)
• 66. استایل‌دهی به محتوای قبل و بعد از عنصر (::before, ::after)
• 67. ایجاد فلش یا آیکون با Pseudo-elements
• 68. استایل‌دهی به دکمه‌های فیلتر و مرتب‌سازی داده‌ها
• 69. بهینه‌سازی خوانایی متون طولانی با CSS
• 70. گذارها (Transitions) در CSS برای انیمیشن‌های نرم
• 71. خواص Transition: duration، timing-function، delay
• 72. تبدیل‌ها (Transforms) 2D: Rotate، Scale، Translate
• 73. تبدیل‌ها (Transforms) 3D: Perspective، RotateX/Y/Z
• 74. انیمیشن‌ها با @keyframes و animation-properties
• 75. کنترل زمان‌بندی و تکرار انیمیشن‌ها
• 76. سایه‌های جعبه‌ای (Box Shadow) برای عمق‌دهی عناصر
• 77. گرادیان‌های خطی (Linear Gradients) برای پس‌زمینه‌ها
• 78. گرادیان‌های شعاعی (Radial Gradients)
• 79. فیلترها (Filters): Blur، Brightness، Grayscale برای تصاویر
• 80. Blend Modes برای تصاویر و پس‌زمینه‌ها
• 81. Clipping و Masking در CSS
• 82. استایل‌دهی به SVG با CSS برای آیکون‌ها
• 83. ایجاد Tooltip با CSS
• 84. افکت‌های پارالاکس ساده با CSS
• 85. طراحی Mobile-First: شروع از کوچکترین صفحات
• 86. استفاده از Viewport Meta Tag برای ریسپانسیو بودن
• 87. Media Queries پیشرفته (orientation, resolution)
• 88. CSS Variables (Custom Properties) برای مدیریت آسان‌تر
• 89. کاربرد CSS Variables در تم‌سازی (Theming) وبلاگ
• 90. سازماندهی CSS با روش‌هایی مانند BEM
• 91. OOCSS و SMACSS برای ساختاردهی CSS
• 92. اصول کدنویسی CSS قابل نگهداری و مقیاس‌پذیر
• 93. کاهش حجم فایل CSS برای بهبود عملکرد وبلاگ
• 94. اهمیت Critical CSS برای بارگذاری اولیه سریع
• 95. تست Cross-Browser Compatibility
• 96. دسترسی‌پذیری (Accessibility) در CSS: کنتراست رنگی
• 97. استفاده از ARIA Attributes با CSS
• 98. ابزارهای Linting و Formatting برای CSS
• 99. نکاتی برای به‌روزرسانی و نگهداری CSS وبلاگ‌های مدیریت ناوگان
• 100. مبانی چیدمان (Layout) با Flexbox برای ساختاردهی به محتوای وبلاگ