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

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

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

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

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

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

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

• 1. معرفی CSS و نقش آن در مدیریت ناوگان
• 2. نصب و راه‌اندازی محیط توسعه (VS Code و Live Server)
• 3. مرورگرها و موتورهای رندرینگ
• 4. درک ساختار HTML برای اعمال CSS
• 5. سینتکس CSS: قوانین، سلکتورها، پراپرتی‌ها و مقادیر
• 6. روش‌های اعمال CSS: درون‌خطی (Inline Styles)
• 7. روش‌های اعمال CSS: داخلی (Internal Stylesheet)
• 8. روش‌های اعمال CSS: خارجی (External Stylesheet) و لینک‌دهی
• 9. آبشار (Cascade)، وراثت (Inheritance) و اولویت (Specificity)
• 10. کامنت‌گذاری در CSS برای خوانایی کد
• 11. معرفی ابزارهای توسعه‌دهنده مرورگر (Developer Tools)
• 12. آشنایی با واحدها در CSS: پیکسل، درصد، pt
• 13. واحدهای نسبی: em، rem، vw، vh، vmin، vmax
• 14. انتخابگرهای پایه: نوع (Type)، کلاس (Class)، آی‌دی (ID)
• 15. انتخابگرهای ترکیبی: فرزند (Child)، نوه (Descendant)، خواهر و برادر (Sibling)
• 16. مدل جعبه‌ای (Box Model) در CSS: اصول و اجزا
• 17. پراپرتی content و کاربردهای آن
• 18. درک padding: فضای داخلی عناصر
• 19. درک border: حاشیه عناصر و استایل‌های آن
• 20. درک margin: فضای بیرونی عناصر وcollapsing margins
• 21. ترکیب padding, border, margin برای ساخت عناصر UI
• 22. پراپرتی box-sizing و اهمیت آن (content-box vs border-box)
• 23. آشنایی با پراپرتی display: block, inline, inline-block
• 24. استفاده از display: none برای مخفی کردن عناصر
• 25. موقعیت‌دهی (Positioning): static
• 26. موقعیت‌دهی (Positioning): relative و کاربردهای آن
• 27. موقعیت‌دهی (Positioning): absolute برای عناصر شناور
• 28. موقعیت‌دهی (Positioning): fixed برای نوارهای ثابت (ناوبری، اعلان‌ها)
• 29. موقعیت‌دهی (Positioning): sticky برای سربرگ‌های شناور جدول‌ها
• 30. پراپرتی z-index برای کنترل ترتیب نمایش لایه‌ها
• 31. پراپرتی overflow: مدیریت محتوای اضافی
• 32. اصول اولیه استفاده از floats برای طرح‌بندی (legacy layout)
• 33. پاک کردن شناورها (Clearing Floats) و مشکل ارتفاع
• 34. ساختن طرح‌بندی‌های چندستونی ساده با floats
• 35. کار با فونت‌ها: font-family, font-size, font-weight, font-style
• 36. ایمپورت کردن فونت‌های سفارشی (Web Fonts مانند Google Fonts)
• 37. پراپرتی‌های متنی: text-align, text-decoration, text-transform
• 38. کنترل فاصله خطوط و کلمات (line-height, letter-spacing, word-spacing)
• 39. استایل‌دهی به لینک‌ها و دکمه‌ها برای عملیات ناوگان
• 40. استفاده از آیکون‌ها در رابط کاربری مدیریت ناوگان (مانند Font Awesome)
• 41. رنگ‌ها در CSS: نام رنگ‌ها، هگزا، RGB، RGBA، HSL، HSLA
• 42. شفافیت (Opacity) در CSS و کاربرد آن
• 43. پراپرتی background-color
• 44. پراپرتی background-image و استفاده از تصاویر در پس‌زمینه
• 45. کنترل تکرار و اندازه تصاویر پس‌زمینه (background-repeat, background-size)
• 46. پس‌زمینه‌های ثابت و متحرک (background-attachment)
• 47. گرادیانت‌ها در CSS: خطی (linear-gradient)
• 48. گرادیانت‌ها در CSS: شعاعی (radial-gradient)
• 49. انتخابگرهای ویژگی (Attribute Selectors)
• 50. انتخابگرهای شبه‌کلاس (Pseudo-classes): :hover, :active, :focus, :visited
• 51. انتخابگرهای شبه‌کلاس: :nth-child, :first-child, :last-child, :only-child
• 52. انتخابگرهای شبه‌کلاس: :not(), :empty, :target, :checked
• 53. استایل‌دهی به فرم‌های مدیریت ناوگان با شبه‌کلاس‌ها (:focus, :disabled, :valid, :invalid)
• 54. انتخابگرهای شبه‌عنصر (Pseudo-elements): ::before, ::after
• 55. استفاده از ::before و ::after برای تزئینات و محتوای تولید شده
• 56. انتخابگرهای شبه‌عنصر: ::first-letter, ::first-line
• 57. انتخابگرهای شبه‌عنصر: ::selection
• 58. انتخابگرهای برادر مجاور (Adjacent Sibling Selector) و برادر کلی (General Sibling Selector)
• 59. معرفی Flexbox: اصول و مفاهیم اصلی (محور اصلی و متقاطع)
• 60. کانتینر فلکس (Flex Container) و آیتم‌های فلکس (Flex Items)
• 61. پراپرتی display: flex و کاربرد آن
• 62. کنترل جهت‌گیری فلکس (flex-direction)
• 63. رپ کردن آیتم‌های فلکس (flex-wrap) و اهمیت آن
• 64. پراپرتی flex-flow: ترکیب جهت‌گیری و رپ کردن
• 65. تراز کردن آیتم‌ها در محور اصلی (justify-content)
• 66. تراز کردن آیتم‌ها در محور متقاطع (align-items)
• 67. توزیع فضاهای خالی در محور متقاطع (align-content)
• 68. پراپرتی flex-grow برای رشد آیتم‌ها
• 69. پراپرتی flex-shrink برای انقباض آیتم‌ها
• 70. پراپرتی flex-basis و flex shorthand
• 71. کنترل ترتیب آیتم‌ها (order)
• 72. استفاده از Flexbox برای ساخت نوارهای ناوبری و هدرها
• 73. ساخت کامپوننت‌های کارت (Vehicle Cards) با Flexbox
• 74. معرفی CSS Grid: اصول و مفاهیم اصلی (سطرها و ستون‌ها)
• 75. تعریف Grid Container و Grid Items
• 76. پراپرتی display: grid
• 77. تعریف صریح سطرها و ستون‌ها (grid-template-columns, grid-template-rows)
• 78. واحد fr و repeat() در Grid برای تکرار
• 79. تعیین گپ بین سطرها و ستون‌ها (gap, row-gap, column-gap)
• 80. قرار دادن آیتم‌ها در Grid با grid-column و grid-row
• 81. نام‌گذاری خطوط و نواحی در Grid (grid-template-areas)
• 82. تراز کردن آیتم‌ها در Grid (justify-items, align-items, place-items)
• 83. تراز کردن محتوای Grid (justify-content, align-content, place-content)
• 84. طراحی طرح‌بندی اصلی داشبورد مدیریت ناوگان با Grid
• 85. ساخت گالری تصاویر وسایل نقلیه یا جداول پیچیده با Grid
• 86. Grid Implicit: Grid خودکار و grid-auto-rows/columns
• 87. اصول طراحی واکنش‌گرا (Responsive Design) برای دستگاه‌های مختلف
• 88. معرفی Viewport Meta Tag و اهمیت آن
• 89. Media Queries: syntax و کاربردها در CSS
• 90. طراحی Mobile-First برای رابط‌های مدیریت ناوگان
• 91. ساخت نقاط شکست (Breakpoints) برای تبلت‌ها و دسکتاپ‌ها
• 92. تصاویر واکنش‌گرا و ویدئوهای واکنش‌گرا
• 93. مخفی کردن یا نمایش عناصر با Media Queries
• 94. ترنزیشن‌ها (Transitions) برای تغییرات نرم و روان
• 95. پراپرتی‌های transition-property, transition-duration, transition-timing-function, transition-delay
• 96. ترنسفورم‌ها (Transforms): rotate, scale, translate, skew
• 97. ترکیب ترنسفورم‌ها و ترنزیشن‌ها برای افکت‌های UI
• 98. انیمیشن‌ها (Animations) و keyframes
• 99. کنترل انیمیشن‌ها: animation-duration, animation-delay, animation-iteration-count, animation-direction
• 100. ساخت لودرها و افکت‌های بصری برای رابط کاربری (مانند وضعیت بارگذاری خودرو)