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

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

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

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

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

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه ای بر CSS برای مدیریت ناوگان
• 2. آشنایی با HTML: ساختار پایه یک صفحه وب
• 3. CSS چیست و چرا از آن استفاده می کنیم؟
• 4. نحوه اعمال CSS: Inline, Internal, External
• 5. آشنایی با انتخابگرها (Selectors) در CSS
• 6. انتخابگرهای نوع (Type Selectors)
• 7. انتخابگرهای کلاس (Class Selectors)
• 8. انتخابگرهای ID (ID Selectors)
• 9. انتخابگرهای عمومی (Universal Selector)
• 10. ترکیب انتخابگرها (Combining Selectors)
• 11. اولین استایل دهی: تغییر رنگ متن و پس زمینه
• 12. فونت ها: خانواده فونت، اندازه فونت، وزن فونت
• 13. متن: تراز بندی، فاصله خطوط، تبدیل متن
• 14. مدل جعبه ای (Box Model): Content, Padding, Border, Margin
• 15. تنظیم ابعاد عناصر: Width, Height
• 16. حاشیه ها (Borders): استایل، رنگ و عرض
• 17. فاصله داخلی (Padding): تنظیم فضای داخلی عناصر
• 18. فاصله بیرونی (Margin): تنظیم فضای بیرونی عناصر
• 19. مرور و جمع بندی مدل جعبه ای
• 20. Overflow: مدیریت محتوای بیشتر از ظرفیت
• 21. Display: نحوه نمایش عناصر (Block, Inline, Inline-Block)
• 22. Positioning: Static, Relative, Absolute, Fixed, Sticky
• 23. Position: Relative: جابجایی نسبی عناصر
• 24. Position: Absolute: موقعیت دهی مطلق عناصر
• 25. Position: Fixed: تثبیت عناصر در صفحه
• 26. Position: Sticky: چسباندن عناصر به بالای صفحه
• 27. Z-index: مدیریت لایه بندی عناصر
• 28. شناور سازی (Floats): Float: Left, Float: Right
• 29. Clearfix: رفع مشکلات شناور سازی
• 30. چیدمان Flexbox: Container و Items
• 31. Flex-direction: جهت قرارگیری عناصر Flex
• 32. Justify-content: تراز افقی عناصر Flex
• 33. Align-items: تراز عمودی عناصر Flex
• 34. Flex-wrap: شکستن خط عناصر Flex
• 35. Flex-grow, Flex-shrink, Flex-basis
• 36. چیدمان Grid: Container و Items
• 37. grid-template-columns: تعریف ستون ها در Grid
• 38. grid-template-rows: تعریف ردیف ها در Grid
• 39. grid-gap: فاصله بین سطر و ستون ها در Grid
• 40. grid-column, grid-row: موقعیت دهی عناصر در Grid
• 41. grid-area: تعریف ناحیه ها در Grid
• 42. واحد های اندازه گیری در CSS: px, em, rem, vw, vh
• 43. استفاده از متغیرها (Variables) در CSS
• 44. Media Queries: طراحی واکنشگرا (Responsive Design)
• 45. Mobile First: طراحی برای موبایل قبل از دسکتاپ
• 46. Viewports: تنظیم مقیاس صفحه در موبایل
• 47. استفاده از فریم ورک های CSS: Bootstrap, Tailwind CSS
• 48. آشنایی با Bootstrap: Grid System
• 49. کامپوننت های Bootstrap: دکمه ها، فرم ها، نوبار
• 50. آشنایی با Tailwind CSS: Utility-First CSS
• 51. استفاده از رنگ ها: نام رنگ ها، کد هگز، RGB, RGBA, HSL, HSLA
• 52. تصاویر پس زمینه: background-image, background-repeat, background-position
• 53. گرادیان ها (Gradients): Linear Gradients, Radial Gradients
• 54. سایه ها: box-shadow, text-shadow
• 55. انیمیشن ها: @keyframes, animation-name, animation-duration
• 56. انتقال ها (Transitions): transition-property, transition-duration
• 57. Transform: rotate, scale, translate, skew
• 58. فیلترها (Filters): blur, grayscale, brightness, contrast
• 59. Pseudo-classes: :hover, :active, :focus, :nth-child
• 60. Pseudo-elements: ::before, ::after
• 61. ایجاد افکت های Hover با CSS
• 62. استایل دهی به فرم ها: ورودی ها، دکمه ها، برچسب ها
• 63. استایل دهی به جداول: سرآیندها، ردیف ها، ستون ها
• 64. استایل دهی به لیست ها: unordered list, ordered list
• 65. استفاده از آیکون ها: Font Awesome, SVG Icons
• 66. بهینه سازی CSS: Minification, Compression
• 67. CSS Reset: Normalize.css, Reset.css
• 68. Preprocessors: Sass, Less
• 69. Sass: متغیرها، توابع، Mixins, Nesting
• 70. Less: متغیرها، توابع، Mixins, Nesting
• 71. آشنایی با مفاهیم UI/UX در طراحی وب
• 72. تست و دیباگ کردن CSS در مرورگر
• 73. سازگاری با مرورگرهای مختلف (Cross-Browser Compatibility)
• 74. CSS Linting: استفاده از ابزارهای Lint
• 75. نوشتن CSS تمیز و قابل نگهداری
• 76. سازماندهی فایل های CSS
• 77. استفاده از CSS Modules
• 78. CSS-in-JS: Styled Components, Emotion
• 79. آشنایی با معماری های CSS: BEM, SMACSS
• 80. مفاهیم Accessibility (دسترسی پذیری) در CSS
• 81. استفاده از ARIA attributes در CSS
• 82. بهینه سازی تصاویر برای وب
• 83. Lazy Loading تصاویر
• 84. CSS Sprites
• 85. ایجاد یک صفحه مدیریت ناوگان با CSS: Header
• 86. ایجاد یک صفحه مدیریت ناوگان با CSS: Navigation Bar
• 87. ایجاد یک صفحه مدیریت ناوگان با CSS: Sidebar
• 88. ایجاد یک صفحه مدیریت ناوگان با CSS: Content Area
• 89. ایجاد یک صفحه مدیریت ناوگان با CSS: Footer
• 90. طراحی یک فرم گزارش گیری ناوگان با CSS
• 91. طراحی یک داشبورد مدیریتی با CSS
• 92. ایجاد چارت ها و نمودارها با CSS (به همراه JavaScript)
• 93. ساخت یک جدول اطلاعات ناوگان با CSS
• 94. استفاده از CSS برای نمایش اطلاعات مکانی ناوگان (به همراه Map API)
• 95. طراحی رابط کاربری موبایل برای مدیریت ناوگان
• 96. پیاده سازی سیستم هشدار و اعلان با CSS (به همراه JavaScript)
• 97. CSS و SEO: تاثیر CSS بر بهینه سازی موتورهای جستجو
• 98. منابع یادگیری CSS بیشتر
• 99. پروژه پایانی: طراحی یک سیستم مدیریت ناوگان کامل با CSS
• 100. انتخابگرهای ویژگی (Attribute Selectors)